From ee3d39e07a41b65131d28c70ebb1f352f9df7f04 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Sun, 3 Nov 2024 21:45:54 +0100
Subject: [PATCH] Add Nuqs for state management and update ScriptContent to
 utilize query state for improved parameter handling

---
 package.json             |  1 +
 src/app/layout.tsx       |  3 ++-
 src/app/scripts/page.tsx | 14 ++------------
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index aa06d79..be0c307 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "mini-svg-data-uri": "^1.4.4",
     "next": "15.0.2",
     "next-themes": "^0.3.0",
+    "nuqs": "^2.1.1",
     "pocketbase": "^0.21.4",
     "prettier-plugin-organize-imports": "^4.1.0",
     "react": "19.0.0-rc-02c0e824-20241028",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index cbdb44c..fd421b4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { Toaster } from "@/components/ui/sonner";
 import "@/styles/globals.css";
 import { Inter } from "next/font/google";
 import React from "react";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -72,7 +73,7 @@ export default function RootLayout({
             <div className="flex min-h-screen flex-col justify-center">
               <div className="flex w-full justify-center">
                 <div className="w-full max-w-7xl ">
-                  {children}
+                  <NuqsAdapter>{children}</NuqsAdapter>
                   <Toaster richColors />
                 </div>
               </div>
diff --git a/src/app/scripts/page.tsx b/src/app/scripts/page.tsx
index 7cac4bd..a419a2f 100644
--- a/src/app/scripts/page.tsx
+++ b/src/app/scripts/page.tsx
@@ -5,14 +5,13 @@ export const dynamic = "force-static";
 import ScriptItem from "@/app/scripts/_components/ScriptItem";
 import { Category } from "@/lib/types";
 import { Loader2 } from "lucide-react";
-import { useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 import Sidebar from "./_components/Sidebar";
+import { useQueryState } from "nuqs";
 
 function ScriptContent() {
-  const [selectedScript, setSelectedScript] = useState<string | null>(null);
+  const [selectedScript, setSelectedScript] = useQueryState("id");
   const [links, setLinks] = useState<Category[]>([]);
-  const searchParams = useSearchParams();
 
   const sortCategories = (categories: Category[]): Category[] => {
     return categories.sort((a: Category, b: Category) => {
@@ -42,15 +41,6 @@ function ScriptContent() {
       .catch(error => console.error(error));
   }, []);
 
-  useEffect(() => {
-    const id = searchParams.get("id");
-    if (id) {
-      setSelectedScript(id);
-    } else {
-      setSelectedScript(null);
-    }
-  }, [searchParams, setSelectedScript]);
-
   return (
     <div className="mb-3">
       <div className="mt-20 flex sm:px-4 xl:px-0">