feat: rebuild Gig Explorer with virtualization, infinite scroll, and URL-synced filters - #70
Conversation
…URL-synced filters Closes trustflow-protocol#68
|
@IamHarrie-Labs is attempting to deploy a commit to the Meshack Yaro 's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Please resolve conflicts and ensure all checks are passing |
npm ci was failing in CI because a prior npm install (run with a newer local npm) dropped the nested next-intl/node_modules/@swc/helpers@0.5.23 entry that next-intl's build tooling requires. Regenerated by installing from the original known-good lockfile with npm 10.8.2 (matching CI's Node 18 job) and adding @tanstack/react-virtual on top of that, instead of a full re-resolve.
|
Fixed it. The Looks like Actions hasn't picked up the new commit yet, might be waiting on approval since I'm a first-time contributor here. Could you approve the run when you get a chance? The Vercel check is also stuck needing a team member to authorize the deploy. |
There are still some conflicts here: hooks/index.ts |
|
Quick update: the hooks/index.ts thing is sorted now too. Turned out to just be a line-ending mismatch from my local Windows setup, the actual committed file was already fine, but I cleaned it up locally to match the rest of the repo anyway so there's no confusion going forward. |
I can't seem to see your fix. Ensure you're pushing to upstream and not your fork |
…zed-gig-explorer # Conflicts: # hooks/index.ts
|
Found the real issue this time, sorry for the runaround. It wasn't a line-ending thing at all, your #71 merge added a useWallet export to hooks/index.ts around the same time I added mine, so the two branches genuinely conflicted on that file. Merged upstream/main in, combined both sets of exports, and pushed as 5b2f9ff. GitHub now shows this as mergeable with no conflicts. Still waiting on you to approve the Actions run and authorize the Vercel deploy when you get a chance. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meshackyaro
left a comment
meshackyaro
left a comment
There was a problem hiding this comment.
Weld done and thanks for your contribution
2 participants
Closes #68
What this does
The old
/explorepage rendered every gig in a plain CSS grid off a hardcoded array of three mock gigs, filtered and searched entirely on the client, with pagination buttons that didn't actually do anything (they just sat there labeled 1, 2, 3). None of that would hold up with a real dataset.This PR rebuilds it properly:
Server-driven data. New route at
pages/api/gigs.ts, following the same pattern already used bypages/api/profile.tsin this repo (edge runtime, falls back to generated mock data when no backend URL is configured, proxies to a real backend viaGIGS_API_BASE_URLwhen one is). Category, search, and sort are all applied server-side, not in the browser. I seeded 240 mock gigs with a seeded PRNG so pagination offsets stay stable across requests instead of reshuffling on every call.Cursor-based infinite scroll.
hooks/useGigsExplorer.tsfetches pages by cursor rather than page number, appends results as you scroll, and guards against out-of-order responses if you change filters mid-fetch (there's a request-id check so a slow, stale response can't clobber a newer one).Windowed virtualization. Swapped the plain grid for
@tanstack/react-virtual. Only the rows actually near the viewport get mounted, so scrolling through hundreds of gigs stays smooth instead of the DOM growing without bound. I did simplify the layout from a 3-column grid down to a single-column list to keep the windowing math straightforward across breakpoints. A responsive multi-column virtualized grid is a fair bit more involved (you need to group items into rows dynamically based on measured column count), and didn't seem justified for this pass. Happy to revisit if that's wanted.Filters that survive refresh and back/forward. Category, sort, and search are all mirrored into the URL (
?category=...&sort=...&q=...) viarouter.replacewith shallow routing, so filtering doesn't spam your browser history, but refreshing or hitting back actually restores what you had. Search is debounced 300ms before it touches the URL or fires a request, so you're not hammering the API on every keystroke.New dependency
Added
@tanstack/react-virtual(^3). It's small, has no peer dependencies beyond React, and is the de facto standard for this kind of windowing in React right now. Nothing else changed in the dependency tree.A scope note
The issue's task list mentions reviewing the "Next.js App Router structure," but this repo is actually still on the Pages Router (
pages/, notapp/) perpackage.json,README.md, andCONTRIBUTING.md. I built this the way the rest of the codebase already works rather than introducing App Router into a repo that doesn't use it. Let me know if there's a migration in flight I'm not aware of.Test plan
I ran this in an actual browser against the dev server, not just typecheck/build:
/explore?category=Developmentrestores the Development filter and its results, not the default "All" state.npm run lint— clean.npm run typecheck— clean.npm run build— succeeds.