feat: sync route params with compare form inputs#119
Conversation
Round-2 review: the previous version only consumed search params on initial mount, so router.push from compare/swap/reset put history entries that the back button couldn't restore. Now a useEffect watches searchParams and resyncs username1/username2 + triggers a re-fetch when the URL pair differs from the last fetched pair. lastFetchedPairRef short-circuits the loop with our own router.push.
|
@mvanhorn is attempting to deploy a commit to the osama's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for the pull request! ✅ A maintainer will review this soon. Please be patient while we take a look. 🙌 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
||
| <div className="w-full flex-1 max-w-6xl mx-auto px-4 py-10 space-y-6"> | ||
| <CompareForm | ||
| username1={username1} |
There was a problem hiding this comment.
It looks like some new props were added to the CompareForm call, but the component itself wasn't updated to receive them. This is breaking the build right now.
Could you sync the component definition and double-check that it loads okay in live mode?
The PR call site lifted username1/username2 and their setters into
HomePageInner so URL searchParams could drive the form, but the
component itself still owned its own useState pair. That broke the
build and meant the prop-passed values were ignored at runtime.
Move the four values into CompareFormProps, drop the internal
useState, and let parent-supplied swapUsers/reset handle clearing
and swapping. The local placeholder defaults ("pbiggar",
"CoralineAda") are gone; the parent now seeds initial state from
searchParams.
|
Fixed in 68fa4d3. CompareFormProps now declares username1, username2, setUsername1, setUsername2, and the internal useState pair is gone, so the parent's URL-synced state is the single source. handleSwap and handleReset just delegate to swapUsers/reset. Verified locally: |
|
✨ Thank you, @mvanhorn! Another great contribution merged! 🚀 You've been a fantastic contributor! We truly appreciate your continued support. |
2 participants
Summary
Closes #21. The home page now treats
?username=u1&username=u2as the source of truth for the compare form and results:router.pushso the result is shareable / copy-pasteable.swapandresetpush their corresponding URL state too.Why this matters
The form was previously seeded with hardcoded
pbiggar/CoralineAdadefaults and the URL never reflected what was being compared, so a user couldn't share or bookmark a result. The issue's two main tasks (update the url params when the form values change+when the page initialize check the url params to update the form values and fetching the required data) both land here.The implementation lifts username state out of
CompareFormintoapp/page.tsxso the URL can drive both. The form becomes controlled — it acceptsusername1/username2/setUsername1/setUsername2props from the page and no longer owns local input state.A
useEffectwatchingsearchParamscalls into auseEffectEvent-wrappedsyncToUrlhelper.syncToUrlis the single resync entry point used for initial mount AND back/forward navigation; it short-circuits vialastFetchedPairRefso our ownrouter.pushcalls don't trigger duplicate fetches.Changes
app/page.tsx:<Suspense>(required byuseSearchParams) and split the body into aHomePageInnercomponent.useRouter+useSearchParamsto read the URL.username1/username2state from the form into the page; seeded from URL params.handleComparenowrouter.pushes the URL before fetching, and stampslastFetchedPairRef.swapUsersandresetpush the corresponding URL state.searchParams-watchinguseEffect+useEffectEventresyncs form/results on URL change.components/compare-form.tsx:username1/username2/setUsername1/setUsername2props.useStateand the hardcodedpbiggar/CoralineAdadefaults.handleSwap/handleResetkeep their existing parent-callback shape.Testing
pnpm run build—Compiled successfullyandFinished TypeScriptboth pass on this diff. The build then fails atCollecting page datawithMissing GITHUB_TOKEN, but that's a pre-existing failure of the/api/compareroute in any local build without a token, not anything this PR introduced.pnpm run lint— same 5 pre-existing issues (3 errors / 2 warnings) reported onmaster. None inapp/page.tsxorcomponents/compare-form.tsx.Manual verification flow:
/— empty form, empty state./?username=u1&username=u2, results load.This contribution was developed with AI assistance (Codex).