Intermediate
A cursor-paginated feed without duplicates
fetchPage(cursor) in the starter returns { items, nextCursor } after 50 ms. Start with fetchPage(null); pass the returned nextCursor to get the next page. nextCursor is null on the last page. The server sometimes repeats the last post of the previous page.
Render every post as an <article> inside <div id="feed" role="feed">, oldest first in the order received, with no duplicates (merge by id).
Show a Load more button with id="more" while there is a next page, and disable it while a page is loading. On the last page remove the button and show <p id="end">You're all caught up</p>.
What Check tests
- The first page shows three posts in
#feed - Load more adds the next page without repeating p3
- The button is disabled while a page loads
- All seven posts, in order, with no duplicates
- At the end the button is gone and
#endsays you're caught up
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.