Filter that empties from page two
Pick a difficulty from page one and it works. Do it any deeper in and the list goes blank — matches and all.
reactChewy~20 min
1
Fresh from the oven
Clone it down and have a look around.
$
git clone https://github.com/loaf-crumbs/filter-that-empties-from-page-two.git2
The scenario
A browser for Loaf's own crumbs lists fourteen of them, four to a page, with a difficulty filter across the top: all, soft, chewy, crusty. Click a difficulty and the list narrows to matching crumbs; a pager at the bottom walks through the rest.
From a fresh load it behaves exactly as you'd expect. Land on page one, click "crusty," and the three crusty crumbs appear. Click "chewy," there are the chewy ones. The filter is doing its job.
The trouble starts when you filter without being on the first page. Page forward two or three times, then pick a difficulty, and the list goes completely empty — "No crumbs to show" — even though the count in the corner still insists there are matches, and you can plainly see those crumbs when you filter from the top. Nothing errors. The buttons highlight correctly. The data is all present in `crumbs.js`. It's the act of filtering *from a later page* that makes everything vanish.
3
What done looks like
- Picking a difficulty shows its matching crumbs no matter which page you were on
- Changing the filter returns you to the first page of the new results
- The "Page X of Y" indicator never shows a current page past the last one
- The list is never empty while the active filter has matching crumbs
4
Stuck?
Peek if you need to — they get more specific as you go.
5
Taste test
Send it in when you’re ready. We’ll see if it’s tasty.
When you've got the flag, paste it here.
No attempts yet.