Challenge: Paginated Fetch

Searching for popular stories via Hacker News API is only one step towards a fully-functional search engine, and there are many ways to fine-tune the search. Take a closer look at the data structure and observe how the Hacker News API returns more than a list of hits.

Specifically, it returns a paginated list. The page property, which is 0 in the first response, can be used to fetch more paginated lists as results. You only need to pass the next page with the same search term to the API.

The following shows how to implement a paginated fetch with the Hacker News data structure. If you are used to pagination from other applications, you may have a row of buttons from 1-10 in your mind – where the currently selected page is highlighted 1-[3]-10 and where clicking one of the buttons leads to fetching and displaying this subset of data.

In contrast, we will implement the feature as infinite pagination. Instead of rendering a single paginated list on a button click, we will render all paginated lists as one list with one button to fetch the next page. Every additional paginated list is concatenated at the end of the one list.

Task

Rather than fetching only the first page of a list, extend the functionality for fetching succeeding pages. Implement this as an infinite pagination on button click.

Optional Hints:

• Extend the API_ENDPOINT with the parameters needed for the paginated fetch.
• Store the page from the result as state after fetching the data.
• Fetch the first page (0) of data with every search.
• Fetch the succeeding page ( page + 1) for every additional request triggered with a new HTML button.