Move tabs state from useState to query parameters

Author: Dosbodoke

app/[locale]/_components/search.tsx

@@ -9,8 +9,8 @@ import { useRouter } from "@/navigation";
 import { createUrl } from "@/utils/helperFunctions";
 
 export default function Search() {
-  const router = useRouter();
   const t = useTranslations("home");
+  const router = useRouter();
   const searchParams = useSearchParams();
 
   function onSubmit(e: React.FormEvent<HTMLFormElement>) {

components/tabs/Ranking/CategoryDropdown.tsx

@@ -66,26 +66,6 @@ function CategoryDropdown({
                 </label>
               </li>
             ))}
-            {/* {categories.map((c) => (
-              <li key={c}>
-                <label
-                  htmlFor={c}
-                  className="flex items-center rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-500"
-                >
-                  <input
-                    id={c}
-                    type="radio"
-                    value={c}
-                    checked={selectedCategory === c}
-                    onChange={() => handleCategorySelect(c)}
-                    className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
-                  />
-                  <span className="ml-2 w-full rounded text-sm font-medium text-gray-500 dark:text-gray-300">
-                    {c}
-                  </span>
-                </label>
-              </li>
-            ))} */}
           </ul>
         </div>
       )}

components/tabs/Ranking/index.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import React, { useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 
+import { usePathname, useRouter } from "@/navigation";
 import type { Tables } from "@/utils/supabase/database.types";
 
 import Cadenas from "./Cadenas";
@@ -20,6 +22,9 @@ export type Categories = Record<Category, { label: string }>;
 
 function Ranking({ highline }: Props) {
   const t = useTranslations("highline.tabs.ranking");
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
   const categories = useMemo<Categories>(
     () => ({
       speedline: { label: "Speedline" },
@@ -29,13 +34,24 @@ function Ranking({ highline }: Props) {
     }),
     [t]
   );
-  const [selectedCategory, setSelectedCategory] = useState<Category>(
-    () => (localStorage.getItem("selectedCategory") as Category) || "speedline"
+
+  const selectedCategory: Category =
+    (searchParams.get("category") as Category) || "speedline";
+
+  // Get a new searchParams string by merging the current
+  // searchParams with a provided key/value pair
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+
+      return params.toString();
+    },
+    [searchParams]
   );
 
   function handleCategoryChange(category: Category) {
-    localStorage.setItem("selectedCategory", category);
-    setSelectedCategory(category);
+    router.push(pathname + "?" + createQueryString("category", category));
   }
 
   function renderCategory() {

components/tabs/Tabs.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { motion } from "framer-motion";
+import { useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 
+import { usePathname, useRouter } from "@/navigation";
 import type { Tables } from "@/utils/supabase/database.types";
 
 import Comments from "./Comments";
@@ -34,6 +36,24 @@ function tabMapping(tab: string, highline: Tables["highline"]["Row"]) {
 
 function Tabs({ highline }: Props) {
   const t = useTranslations("highline.tabs");
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const tab = searchParams.get("tab") || "info";
+
+  // Get a new searchParams string by merging the current
+  // searchParams with a provided key/value pair
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+      params.delete("category");
+
+      return params.toString();
+    },
+    [searchParams]
+  );
 
   const tabs = useMemo<Tab[]>(
     () => [
@@ -52,7 +72,6 @@ function Tabs({ highline }: Props) {
     ],
     [t]
   );
-  const [selectedTabId, setSelectedTabId] = useState(tabs[0].id);
 
   return (
     <div className="h-full">
@@ -61,14 +80,15 @@ function Tabs({ highline }: Props) {
           <li
             key={item.id}
             className={`relative flex-auto cursor-pointer rounded-t-md text-base md:text-lg ${
-              item.id === selectedTabId
-                ? "text-blue-600 dark:text-blue-500"
-                : ""
+              item.id === tab ? "text-blue-600 dark:text-blue-500" : ""
             }`}
-            onClick={() => setSelectedTabId(item.id)}
+            onClick={(e) => {
+              e.preventDefault();
+              router.push(pathname + "?" + createQueryString("tab", item.id));
+            }}
           >
             {item.label}
-            {item.id === selectedTabId ? (
+            {item.id === tab ? (
               <motion.div
                 className="absolute -bottom-px left-0 right-0 h-px bg-blue-700"
                 layout
@@ -80,7 +100,7 @@ function Tabs({ highline }: Props) {
       </ul>
 
       <div className="overflow-y-auto overflow-x-hidden">
-        {tabMapping(selectedTabId, highline)}
+        {tabMapping(tab, highline)}
       </div>
     </div>
   );