Add nuqs for query state management in country list

markslorach · markslorach · commit 8fe1982ba30c · 2025-02-11T20:02:46.000Z
diff --git a/app/components/country-list.tsx b/app/components/country-list.tsx
@@ -1,12 +1,13 @@
 "use client";
-import { useState } from "react";
+import { useQueryState } from "nuqs";
 import { Country } from "../types/types";
 import CountryCard from "./country-card";
 import RegionSelect from "./region-select";
 import SearchCountry from "./country-search";
 import { usePathname } from "next/navigation";
 import { FavouriteCountry } from "@prisma/client";
 import { ArrowUpDown } from "lucide-react";
+import { parseAsString, parseAsStringLiteral } from "nuqs";
 
 type Props = {
   data: Country[];
@@ -16,9 +17,12 @@ type Props = {
 };
 
 const CountryList = ({ data, removeFavourite, countries, userId }: Props) => {
-  const [search, setSearch] = useState("");
-  const [selectedRegion, setSelectedRegion] = useState("all");
-  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
+  const [search, setSearch] = useQueryState('search', parseAsString.withDefault(""));
+  const [selectedRegion, setSelectedRegion] = useQueryState('region', parseAsString.withDefault("all"));
+  const [sortDirection, setSortDirection] = useQueryState(
+    'sort',
+    parseAsStringLiteral(['asc', 'desc']).withDefault("asc")
+  );
 
   const pathname = usePathname();
 
@@ -40,10 +44,10 @@ const CountryList = ({ data, removeFavourite, countries, userId }: Props) => {
   return (
     <div>
       <div className="flex flex-wrap md:flex-nowrap justify-between gap-5">
-        <SearchCountry search={search} setSearch={setSearch} />
+        <SearchCountry search={search || ""} setSearch={setSearch} />
 
         <RegionSelect
-          selectedRegion={selectedRegion}
+          selectedRegion={selectedRegion || "all"}
           setSelectedRegion={setSelectedRegion}
         />
       </div>
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import ScrollButton from "./components/shared/scroll-btn";
 import NavBar from "./components/shared/navbar";
 import Footer from "./components/shared/footer";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
 
 const notoSans = Noto_Sans({ subsets: ["latin"] });
 
@@ -24,7 +25,9 @@ export default function RootLayout({
         <body className={notoSans.className}>
           <main className="flex flex-col min-h-dvh md:min-h-screen">
             <NavBar />
-            <div className="px-4 md:container mt-10 flex-grow">{children}</div>
+            <div className="px-4 md:container mt-10 flex-grow">
+              <NuqsAdapter>{children}</NuqsAdapter>
+            </div>
             <ScrollButton />
             <Footer />
           </main>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "lucide-solid": "^0.474.0",
     "next": "^14.2.23",
     "next-themes": "^0.3.0",
+    "nuqs": "^2.3.2",
     "prisma": "^5.18.0",
     "react": "^18",
     "react-dom": "^18",
