the selected button will be saved in url as a query

Nusab19 · Jan 26, 2024 · 59f6cdf · 59f6cdf
1 parent fca7cfa
commit 59f6cdf
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/components/Home.jsx b/components/Home.jsx
@@ -1,12 +1,16 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 
 import Table from "@components/Table";
 
 const Styles = {
   buttons: {
-    active: "bg-[#3598dc] text-[#e7ecf1] dark:bg-[#2283c3] text-lg px-3 py-2 rounded-md transition duration-100 ease-in-out",
-    inactive: "hover:bg-[#e4f0f8] dark:hover:bg-[#e4f0f820] text-[#3598dc] dark:text-[#52a7e0] text-lg px-3 py-2 rounded-md transition duration-100 ease-in-out",
+    active:
+      "bg-[#3598dc] text-[#e7ecf1] dark:bg-[#2283c3] text-lg px-3 py-2 rounded-md transition duration-100 ease-in-out",
+    inactive:
+      "hover:bg-[#e4f0f8] dark:hover:bg-[#e4f0f820] text-[#3598dc] dark:text-[#52a7e0] text-lg px-3 py-2 rounded-md transition duration-100 ease-in-out",
   },
 };
 
@@ -15,9 +19,22 @@ const Home = ({ props }) => {
   const [selected, setSelected] = useState("fastest");
   const classes = [Styles.buttons.active, Styles.buttons.inactive];
 
+  const router = useRouter();
+  const query = useSearchParams().get("q");
+
+  useEffect(() => {
+    if (query) {
+      setSelected(query);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    router.push(`?q=${selected}`, undefined, { shallow: true });
+  }, [selected, router]);
+
   return (
     <div className="mt-32">
-      <div className="md:mx-5 mx-1 mt-10 mb-5 flex gap-3">
+      <div className="mx-1 mb-5 mt-10 flex gap-3 md:mx-5">
         <button
           type="button"
           className={classes[selected === "fastest" ? 0 : 1]}
@@ -40,7 +57,7 @@ const Home = ({ props }) => {
           Shortest
         </button>
       </div>
-      <Table props={{ data, selected}} />
+      <Table props={{ data, selected }} />
     </div>
   );
 };

diff --git a/components/ProfilePage.jsx b/components/ProfilePage.jsx
@@ -1,5 +1,8 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+
 import Link from "next/link";
 
 import ProfileBody from "@components/ProfileBody";
@@ -20,6 +23,19 @@ const ProfilePage = ({ props }) => {
   const [userName, setUserName] = useState(props.userName);
   const classes = [Styles.buttons.active, Styles.buttons.inactive];
 
+  const router = useRouter();
+  const query = useSearchParams().get("q");
+
+  useEffect(() => {
+    if (query) {
+      setSelected(query);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    router.push(`?q=${selected}`, undefined, { shallow: true });
+  }, [selected, router]);
+
   return (
     <div className="mt-24">
       <Link