Skip to content

feat: implement URL-based search param syncing for filters - #118

Open
shreyashchandratre wants to merge 1 commit into
akshay0611:mainfrom
shreyashchandratre:feature/url-filter-sync
Open

feat: implement URL-based search param syncing for filters#118
shreyashchandratre wants to merge 1 commit into
akshay0611:mainfrom
shreyashchandratre:feature/url-filter-sync

Conversation

@shreyashchandratre

@shreyashchandratre shreyashchandratre commented Jul 4, 2026

Copy link
Copy Markdown

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

@vercel

vercel Bot commented Jul 4, 2026

Copy link
Copy Markdown

@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.

@shreyashchandratre

Copy link
Copy Markdown
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!

@akshay0611

Copy link
Copy Markdown
Owner

Hi @shreyashchandratre

Kindly complete the below Checklist:

🏕️ Explorer Checklist
Star this repository
👀 Follow the maintainer
📖 Review the README.md
📚 Review the CONTRIBUTING.md

@akshay0611

Copy link
Copy Markdown
Owner

Hi @shreyashchandratre

Kindly complete all the below points mentioned in the Checklist:

🏕️ Explorer Checklist
Star this repository
👀 Follow the maintainer
📖 Review the README.md
📚 Review the CONTRIBUTING.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Persist search/filter state in URL query params

2 participants