feat: implement URL-based search param syncing for filters - #118
Open
shreyashchandratre wants to merge 1 commit into
Open
feat: implement URL-based search param syncing for filters#118shreyashchandratre wants to merge 1 commit into
shreyashchandratre wants to merge 1 commit into
Conversation
|
@shreyashchandratre is attempting to deploy a commit to the Akshay Kumar's projects Team on Vercel. A member of the Team first needs to authorize it. |
Author
|
Hi maintainers! My first PR is ready for review. It looks like the Vercel deployment check needs authorization from a team member to build the preview. Whenever you have a moment to approve it, let me know if any other tests need attention. Thanks! |
Owner
|
Kindly complete the below Checklist: 🏕️ Explorer Checklist |
Owner
|
Kindly complete all the below points mentioned in the Checklist: 🏕️ Explorer Checklist |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #90
Description
Implements URL-based search parameter syncing for the Havenly filter system. Previously, all filter state (price range, rating, property type, category, sort order) lived in local component state — meaning filters reset on every page refresh and filtered views couldn't be shared via URL.
This PR replaces that local state with a useFilterParams custom hook backed by useSearchParams and useRouter from next/navigation. Filter state is now serialized into the URL on every change and deserialized on mount, making filtered views both persistent and shareable.
Changes Made
hooks/use-filter-params.ts — new custom hook that owns all URL read/write logic for filters. Uses router.replace (not push) to avoid polluting browser history. Removes a key from the URL when its value equals the default, keeping URLs clean. Preserves non-filter params (city, checkIn, checkOut, guests) on every update and on clear.
components/FilterSidebar.tsx — refactored to be fully prop-driven. Removed internal useState for price range, rating, and property type. Now receives filters and onFiltersChange props from the parent. Property type checkboxes properly wired with toggle behaviour.
app/properties/page.tsx — wired to useFilterParams. Removed local state for sortBy, priceFilter, and ratingFilter. Sort dropdown and sidebar both sync to URL. Wrapped in as required by Next.js when useSearchParams is used.
app/page.tsx — category filter on the home page now syncs to the URL. Removed selectedCategory state and useRouter manual navigation. clearFilters() from the hook replaces the old router.push('/').
vitest.config.mts + vitest.setup.ts — test config set up with jsdom environment and @testing-library/react.
hooks/tests/use-filter-params.test.ts — 16 unit tests covering deserialization (valid values, fallbacks for invalid/missing params), setFilters URL writes, default-value key removal, and clearFilters non-filter param preservation.
components/tests/FilterSidebar.test.tsx — 7 unit tests verifying prop-driven rendering and that onFiltersChange is called correctly on user interaction.
How to Test
Run npm run dev and navigate to /properties
Select a price range, rating, or property type — verify the URL updates immediately (e.g. ?maxPrice=300&rating=4.5)
Refresh the page — filters should remain active, matching what's in the URL
Copy the URL and open it in a new tab — the same filters should be applied
Clear all filters — verify all filter params are removed from the URL, and non-filter params like city are preserved if present
On the home page (/), select a category — verify ?category=beachfront (or similar) appears in the URL and persists on refresh
Run npm test — all 32 tests should pass