Description
Currently, when a user applies specific filters (like tech stack, categories, or tags) on the platform pages (e.g., Opportunities or Courses) and reloads the page, the active UI filters get completely wiped out because the internal state isn't synced with the browser URL query parameters.
Furthermore, manually appending query params (e.g., ?category=internship) doesn't pre-select the corresponding checkboxes/filters on initial component render.
Steps to Reproduce
- Navigate to the dynamic listing page (like Opportunities).
- Apply 2-3 filters to narrow down the results.
- Refresh the browser page.
- Observe that the URL doesn't retain the query string, and the UI completely resets to the default state, forcing the user to select everything again.
Technical Analysis & Solution
This happens because the component relies purely on isolated local React useState hooks instead of mapping the filter state to URL query parameters using Next.js routing tools (useSearchParams or useRouter).
- Fix: I will implement a synchronization hook that pushes active filter states into the URL query string using Next.js router.
- On Mount: Read the search parameters via
useSearchParams and populate the initial state so the filters persist across hard reloads or deep-linking shares.
Description
Currently, when a user applies specific filters (like tech stack, categories, or tags) on the platform pages (e.g., Opportunities or Courses) and reloads the page, the active UI filters get completely wiped out because the internal state isn't synced with the browser URL query parameters.
Furthermore, manually appending query params (e.g.,
?category=internship) doesn't pre-select the corresponding checkboxes/filters on initial component render.Steps to Reproduce
Technical Analysis & Solution
This happens because the component relies purely on isolated local React
useStatehooks instead of mapping the filter state to URL query parameters using Next.js routing tools (useSearchParamsoruseRouter).useSearchParamsand populate the initial state so the filters persist across hard reloads or deep-linking shares.