feat: using nuqs library for queries on sort & filters

Author: CrispyKhim

frontend/app/clientLayout.tsx

@@ -10,6 +10,7 @@ import { grey } from "@mui/material/colors";
 import CssBaseline from "@mui/material/CssBaseline";
 import { createTheme, styled } from "@mui/material/styles";
 import ThemeProvider from "@mui/system/ThemeProvider";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
 import React, {
   createContext,
   useCallback,
@@ -129,7 +130,9 @@ const ClientLayout: React.FC<{
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <ReduxProvider store={store}>
-          <App>{children}</App>
+          <NuqsAdapter>
+            <App>{children}</App>
+          </NuqsAdapter>
         </ReduxProvider>
       </ThemeProvider>
     </DarkModeContext.Provider>

frontend/hooks/useQueryFilter.ts

@@ -1,4 +1,4 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { parseAsString, useQueryStates } from "nuqs";
 import { useEffect, useRef } from "react";
 import { selectFilters, setFilter } from "redux/filtersSlice";
 
@@ -7,13 +7,9 @@ import { Filters } from "../types";
 import { filterBarDropdown } from "../utils/constants";
 
 // Type for the keys of the Filters type
-const queryFilter: (keyof Filters)[] = [
-  "capacity",
-  "usage",
-  "location",
-  "duration",
-  "id",
-];
+const filterQueries: (keyof Filters)[] = filterBarDropdown.map(
+  ({ key }) => key
+);
 
 // Create an object that maps each filter key to its values in an array
 const validFilterQueries: Partial<Record<keyof Filters, string[]>> =
@@ -24,43 +20,56 @@ const validFilterQueries: Partial<Record<keyof Filters, string[]>> =
     ])
   );
 
+// Function to check if a given filter key and value are valid
 const isValidFilter = (key: keyof Filters, value: string): boolean => {
   const isValid = validFilterQueries[key];
-  if (isValid === undefined) return false;
-  return isValid.includes(value);
+  if (isValid) {
+    return isValid.includes(value);
+  }
+  return false;
 };
 
 // Function to handle query string parameters for filters in page.tsx (browse page)
 const useQueryFilter = () => {
   const dispatch = useDispatch();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
   const filters = useSelector(selectFilters);
 
   // Only write to query parameters on initial load
   const initialLoad = useRef(true);
 
-  // On initial load, apply filters from query parameters to Redux state
+  const [filterParams, setFilterParams] = useQueryStates(
+    {
+      capacity: parseAsString.withDefault(""),
+      usage: parseAsString.withDefault(""),
+      location: parseAsString.withDefault(""),
+      duration: parseAsString.withDefault(""),
+      id: parseAsString.withDefault(""),
+    },
+    { shallow: true }
+  );
+
+  // Apply filters from URL on load
   useEffect(() => {
-    const params = new URLSearchParams(searchParams.toString());
+    const invalidKeys: Partial<Record<keyof Filters, null>> = {};
     let hasInvalidFilter = false;
 
-    queryFilter.forEach((key) => {
-      const value = searchParams.get(key);
-      if (value && isValidFilter(key, value)) {
-        dispatch(setFilter({ key, value }));
-      } else {
-        params.delete(key);
-        hasInvalidFilter = true;
+    filterQueries.forEach((key) => {
+      const value = filterParams[key];
+      if (value) {
+        if (isValidFilter(key, value)) {
+          dispatch(setFilter({ key, value }));
+        } else {
+          // Set as null to remove invalid filters
+          invalidKeys[key] = null;
+          hasInvalidFilter = true;
+        }
       }
     });
 
     // Check if need to update URL to remove invalid parameters
     if (hasInvalidFilter) {
-      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+      setFilterParams(invalidKeys);
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch]); // Apply filters on initial load (when user shares link with query params), and not on subsequent loads
 
@@ -72,21 +81,15 @@ const useQueryFilter = () => {
       return;
     }
 
-    const params = new URLSearchParams(searchParams.toString());
-    queryFilter.forEach((key) => {
-      const value = filters[key];
-      if (value && isValidFilter(key, value)) {
-        // If the filter value exists and is a valid filter key, apply to query parameters
-        params.set(key, value);
-      } else {
-        // Remove the key if the filter value is not in the filter
-        params.delete(key);
-      }
+    const params: Partial<Record<keyof Filters, string | null>> = {};
+
+    filterQueries.forEach((key) => {
+      params[key] = filters[key] ?? null;
     });
 
-    // Update the URL with new query parameters
-    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
-  }, [filters, pathname, router, searchParams]); // Update query parameters whenever filters change
+    setFilterParams(params);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters]);
 };
 
 export default useQueryFilter;

frontend/hooks/useQuerySort.ts

@@ -1,41 +1,26 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { parseAsString, useQueryState } from "nuqs";
+import { useEffect } from "react";
 
 import { sortBarDropdown } from "../utils/constants";
 
 const validSortQueries: string[] = sortBarDropdown.map((item) => item.value);
 
-const isValidSort = (value: string): boolean => {
-  return validSortQueries.includes(value);
-};
+const isValidSort = (value: string): boolean =>
+  validSortQueries.includes(value);
 
-// Function to handle query string parameters for sorting in page.tsx (browse page)
 const useQuerySort = (): [string, (sort: string) => void] => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const pathname = usePathname();
-  const initialLoad = useRef(true);
-
-  // On initial load, fallback to alphabetical sort if no sort query parameter provided
-  const [sort, setSort] = useState<string>(() => {
-    const value = searchParams.get("sort");
-    return value && isValidSort(value) ? value : "alphabetical";
-  });
+  const [sort, setSort] = useQueryState(
+    "sort",
+    parseAsString.withDefault("alphabetical")
+  );
 
-  // Apply sort to URL when sort changes
   useEffect(() => {
-    // Skip first run to avoid overwriting query parameters on initial load with empty state
-    if (initialLoad.current) {
-      initialLoad.current = false;
-      return;
+    if (sort && !isValidSort(sort)) {
+      // Null resets the sort to the default value, which is "alphabetical"
+      setSort(null);
     }
-
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("sort", sort);
-
-    // Update the URL with new query parameters
-    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
-  }, [sort, pathname, router, searchParams]); // Update query parameters whenever sort changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return [sort, setSort];
 };

frontend/package-lock.json

@@ -32,6 +32,7 @@
     "lucide-react": "^1.7.0",
     "match-sorter": "^8.2.0",
     "next": "^15.4.10",
+    "nuqs": "^2.9.4",
     "path-scurry": "^2.0.0",
     "react": "19.2.7",
     "react-big-calendar": "^1.6.9",