handle request in modal filters, selector sort, search city with one function and field-search & handle change all data in doctors filter with one function & change modal search location in home page & set data with diffrent key in url of page doctors

components/doctors/head/index.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import SearchBar from "../search";
 import SortList from "../sortlist";
 import { Button } from "@mui/material";
-import { useParams } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import LocationD from "../../icons/LocationD";
 import specialties from "@/data/specialties.json";
 import ModalSearchCity from "@/app/component/modalSearchCity";
@@ -11,15 +11,15 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 // Data
 import states from "@/data/state.json";
 import cities from "@/data/city.json";
+import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
+import { request } from "@/services/response";
 
 function Head({ matchedCity, matchedState, setDoctors }) {
   const params = useParams();
-  const fieldName = params.field;
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const fieldName = searchParams.get("specialty");
   const [open, setOpen] = useState(false);
-  const [fields, setFields] = useState({
-    search: params.search || "",
-    stars: "",
-  });
 
   const findItem = (key, name) =>
     specialties.find((item) => item[key] === name);
@@ -34,45 +34,62 @@ function Head({ matchedCity, matchedState, setDoctors }) {
     degree: params.degree || "همه موارد",
   };
 
-  const selectedState = matchedState?.name || params?.state;
+  const selectedState = searchParams.get("state") || matchedState?.name;
   const selectedCity =
-    (matchedCity?.name && matchedCity?.id !== "63"
-      ? matchedCity?.name
-      : false) || params?.city;
+    searchParams.get("city") ||
+    (matchedCity?.name && matchedCity?.id !== "63" ? matchedCity?.name : false);
 
   const defaultFilter = {
     state: selectedState && states.find((item) => item.name === selectedState),
     city: selectedCity && cities.find((item) => item.name === selectedCity),
     category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
     specialty: isParent && findItem("name", fieldName),
-    active: params.active || 0,
-    gender: params.gender || "هر دو",
-    degree: params.degree || "همه موارد",
-    sort: "",
-    name: "",
-  };
-  const modalLocate = () => {
-    setOpen(false);
+    active: searchParams.get("active") || 0,
+    gender: searchParams.get("gender") || "هر دو",
+    degree: searchParams.get("degree") || "همه موارد",
+    sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
+    name: searchParams.get("name") || "",
   };
 
   const [data, setData] = useState(defaultData);
-  const [confirmedData, setConfirmedData] = useState(defaultData);
   const [filter, setFilter] = useState(defaultFilter);
 
-  console.log(filter);
-  
+  const setDataInURL = (newFilter) => {
+    const query = QueryForDoctorsFilter(newFilter);
 
-  const updateData = (name, value) => setFilter({ ...filter, [name]: value });
+    const searchParams = new URLSearchParams(query).toString();
+    router.push(`?${searchParams}`);
+  };
+
+  const updateData = (name, value, isReq) => {
+    const newFilter = { ...filter, [name]: value };
+    setDataInURL(newFilter);
+    setFilter(newFilter);
+    isReq && sendReq(newFilter);
+  };
+  const sendReq = (newFilter) => {
+    const params = QueryForDoctorsReq(newFilter || filter);
+
+    return request
+      .getDoctors(params)
+      .then((res) => {
+        setDoctors(res.data);
+        return res;
+      })
+      .catch((err) => {
+        throw err;
+      });
+  };
 
   return (
     <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
       <ModalSearchCity
         open={open}
         filter={filter}
+        sendReq={sendReq}
         setOpen={setOpen}
-        state={matchedState}
         setFilter={setFilter}
-        modalLocate={modalLocate}
+        setDataInURL={setDataInURL}
       >
         <Button
           className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
@@ -89,28 +106,17 @@ function Head({ matchedCity, matchedState, setDoctors }) {
       </ModalSearchCity>
       <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
         <SearchBar
-          data={data}
-          fields={fields}
           filter={filter}
-          setData={setData}
+          sendReq={sendReq}
           setFilter={setFilter}
-          setDoctors={setDoctors}
           updateData={updateData}
-          matchedCity={matchedCity}
-          matchedState={matchedState}
-          confirmedData={confirmedData}
-          setConfirmedData={setConfirmedData}
+          setDataInURL={setDataInURL}
         />
         <SortList
           data={data}
-          fields={fields}
           filter={filter}
           setData={setData}
-          setFields={setFields}
           updateData={updateData}
-          setDoctors={setDoctors}
-          matchedCity={matchedCity}
-          matchedState={matchedState}
         />
       </div>
     </div>