New admin section.

src/components/hooks/useNavigation.ts

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from '@/lib/url';
 
@@ -7,18 +8,31 @@ export function useNavigation() {
   const searchParams = useSearchParams();
   const [, teamId] = pathname.match(/\/teams\/([a-f0-9-]+)/) || [];
   const [, websiteId] = pathname.match(/\/websites\/([a-f0-9-]+)/) || [];
-  const query = Object.fromEntries(searchParams);
+  const [queryParams, setQueryParams] = useState(Object.fromEntries(searchParams));
 
   const updateParams = (params?: Record<string, string | number>) => {
-    return !params ? pathname : buildUrl(pathname, { ...query, ...params });
+    return !params ? pathname : buildUrl(pathname, { ...queryParams, ...params });
   };
 
+  useEffect(() => {
+    setQueryParams(Object.fromEntries(searchParams));
+  }, [searchParams.toString()]);
+
   const renderUrl = (path: string, params?: Record<string, string | number> | false) => {
     return buildUrl(
       teamId ? `/teams/${teamId}${path}` : path,
-      params === false ? {} : { ...query, ...params },
+      params === false ? {} : { ...queryParams, ...params },
     );
   };
 
-  return { router, pathname, searchParams, query, teamId, websiteId, updateParams, renderUrl };
+  return {
+    router,
+    pathname,
+    searchParams,
+    query: queryParams,
+    teamId,
+    websiteId,
+    updateParams,
+    renderUrl,
+  };
 }