add: url state for menu list

src/app/[name]/page.tsx

@@ -18,6 +18,7 @@ import { DropdownOption } from "@/components/combobox/Combobox";
 import { Switch } from "@/components/ui/switch";
 import { TicketPercentIcon } from "lucide-react";
 import { MedalStar } from 'iconsax-react'
+import { useQueryState } from 'next-usequerystate'
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -141,20 +142,22 @@ const shippings: Array<DropdownOption> = [
 
 
 const MenuIndex = () => {
-  const [search, setSearch] = useState("");
-  const [selectedCategory, setSelectedCategory] = useState(0);
   const [filterModal, setFilterModal] = useState(false);
   const [sortingModal, setSortingModal] = useState(false);
-  const [, setSorting] = useState(0);
-  const [selectedContentId, setSelectedContentId] = useState('0');
-  const [selectedShippingId, setSelectedShippingId] = useState('0');
+  const [, setSorting] = useQueryState('sortBy', { defaultValue: '0' });
+  const [search, setSearch] = useQueryState("q", { defaultValue: '' });
+  const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' });
+  const [selectedContentId, setSelectedContentId] = useQueryState('contentType', { defaultValue: '0' });
+  const [selectedShippingId, setSelectedShippingId] = useQueryState('shippingType', { defaultValue: '0' });
 
   const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const updateCategory = useCallback((id: number) => {
-    setSelectedCategory(id);
+    setSelectedCategory(String(id));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const toggleFilterModal = useCallback(() => {
@@ -166,7 +169,7 @@ const MenuIndex = () => {
   }, []);
 
   const changeSorting = (index: number) => {
-    setSorting(() => index);
+    setSorting(() => String(index));
   }
 
   const changeSelectedContent = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
@@ -181,7 +184,7 @@ const MenuIndex = () => {
     const lowerSearch = search.toLowerCase();
     return foods.filter(
       (item) =>
-        item.category === selectedCategory &&
+        item.category === +selectedCategory &&
         item.name.toLowerCase().includes(lowerSearch)
     );
   }, [selectedCategory, search]);
@@ -194,7 +197,7 @@ const MenuIndex = () => {
         {categories.map((item, index) => (
           <CategoryItemRenderer
             key={index}
-            className={`${index === selectedCategory ? "bg-white!" : ""}`}
+            className={`${index === +selectedCategory ? "bg-white!" : ""}`}
             onClick={() => updateCategory(index)}
           >
             <Image
@@ -212,7 +215,7 @@ const MenuIndex = () => {
       <section className="w-full">
         <div className="flex justify-between items-center">
           <span className="text-base font-medium">
-            {categories[selectedCategory]?.title}
+            {categories[+selectedCategory]?.title}
           </span>
           <div className="inline-flex gap-2 justify-around items-center">
             <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
@@ -266,7 +269,7 @@ const MenuIndex = () => {
             <Switch />
           </div>
         </div>
-          <hr className="text-white/40  mt-12" />
+        <hr className="text-white/40  mt-12" />
         <div className="px-9 pt-6 flex justify-between gap-[22px]">
           <div className="w-full">
             <Button>اعمال فیلتر</Button>