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>

components/doctors/modal/ButtonApply.js

@@ -1,97 +1,16 @@
 import { Button } from "@mui/material";
-import specialties from "@/data/specialties.json";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { request } from "@/services/response";
-import { degreeVal } from "@/helper";
 
-function ButtonApply({
-  data,
-  setConfirmedData,
-  matchedCity,
-  matchedState,
-  setOpen,
-  setDoctors,
-}) {
-  const router = useRouter();
+function ButtonApply({ sendReq, setOpen }) {
   const [loading, setLoading] = useState(false);
 
-  const sendReq = (requestData) => {
+  const handleClick = () => {
     setLoading(true);
 
-    request
-      .getDoctors(requestData)
-      .then((res) => {
-        if (res && res.data) setDoctors(res.data);
-      })
-      .catch(() => {})
-      .finally(() => {
-        setOpen(false);
-        setLoading(false);
-      });
-  };
-
-  const applyFilters = () => {
-    const current = new URLSearchParams();
-
-    const mappings = [
-      {
-        key: "field",
-        getValue: (name) => {
-          if (data.category) {
-            const children = specialties.filter(
-              (item) => item.parent === data.category.id
-            );
-            return children.length > 0
-              ? children.find((item) => item.name === data.specialties.name)[
-                  name || "id"
-                ]
-              : data.category[name || "id"];
-          }
-          return null;
-        },
-      },
-      {
-        key: "gender",
-        getValue: () => (data.gender === "زن" ? "woman" : "man" || null),
-      },
-      {
-        key: "degree",
-        getValue: (name) => {
-          const item = degreeVal.find((item) => item.name === data.degree);
-
-          return (item && item[name || "val"]) || null;
-        },
-      },
-      { key: "turn", getValue: () => data.turn },
-    ];
-
-    let requestData = {
-      city: matchedCity?.id || null,
-      state: matchedState?.id || null,
-    };
-
-    mappings.forEach(({ key, getValue }) => {
-      let value;
-      if (key === "field") {
-        value = getValue("name");
-      } else if (key === "gender") {
-        value = data.gender;
-      } else if ("degree") {
-        value = getValue("name");
-      }
-      current.set(key, value);
+    sendReq().finally(() => {
+      setOpen(false);
+      setLoading(false);
     });
-
-    mappings.forEach(({ key, getValue }) => {
-      let value = getValue();
-      requestData[key === "field" ? "specialty" : key] = value;
-    });
-
-    const queryString = current.toString();
-    setConfirmedData(data);
-    sendReq(requestData);
-    router.push(`/doctors?${queryString}`);
   };
 
   return (
@@ -99,7 +18,7 @@ function ButtonApply({
       <Button
         loading={loading}
         variant="contained"
-        onClick={applyFilters}
+        onClick={handleClick}
         className="!px-3 !py-2 !text-[16px] !font-medium"
       >
         اعمال تغییرات

components/doctors/modal/Content.js

@@ -1,7 +1,7 @@
 import specialties from "@/data/specialties.json";
 import Form from "./form";
 
-function Content({ filter, setFilter, updateData }) {
+function Content({ filter, setFilter, updateData, setDataInURL }) {
   const changeSpecialty = (name, value) => {
     const newFilter = { ...filter, [name]: value };
 
@@ -16,6 +16,7 @@ function Content({ filter, setFilter, updateData }) {
     }
 
     setFilter(newFilter);
+    setDataInURL(newFilter);
     return newFilter;
   };
 

components/doctors/modal/FilterModal.js

@@ -10,17 +10,12 @@ import { clearFilterParams } from "@/helper";
 import ButtonApply from "./ButtonApply";
 
 function FilterModal({
-  data,
   filter,
-  setData,
+  sendReq,
   children,
   setFilter,
-  setDoctors,
   updateData,
-  matchedCity,
-  matchedState,
-  confirmedData,
-  setConfirmedData,
+  setDataInURL,
 }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -28,19 +23,16 @@ function FilterModal({
   const handleOpen = () => setOpen(true);
   const handleClose = () => {
     setOpen(false);
-    setData(confirmedData);
   };
 
   const resetFilter = () => {
-    clearFilterParams(router, ["turn", "field", "degree", "gender"]);
-
-    const defaultData = {
-      category: "",
-      specialties: "",
-      turn: true,
-      gender: "هر دو",
-      degree: "متخصص",
-    };
+    clearFilterParams(router, [
+      "category",
+      "specialty",
+      "active",
+      "gender",
+      "degree",
+    ]);
 
     const newFilter = {
       category: undefined,
@@ -49,9 +41,6 @@ function FilterModal({
       gender: "هر دو",
       degree: "همه موارد",
     };
-
-    setData({ ...defaultData });
-    setConfirmedData({ ...defaultData });
     setFilter({
       ...filter,
       ...newFilter,
@@ -90,16 +79,10 @@ function FilterModal({
               filter={filter}
               setFilter={setFilter}
               updateData={updateData}
+              setDataInURL={setDataInURL}
             />
           </div>
-          <ButtonApply
-            data={data}
-            setOpen={setOpen}
-            setDoctors={setDoctors}
-            matchedCity={matchedCity}
-            matchedState={matchedState}
-            setConfirmedData={setConfirmedData}
-          />
+          <ButtonApply sendReq={sendReq} setOpen={setOpen} />
         </div>
       </Modal>
     </>

components/doctors/search/SendReq.js

@@ -1,55 +1,16 @@
 import { Button } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
 import { useState } from "react";
-import { request } from "@/services/response";
 
-// Data
-import cities from "@/data/city.json";
-import states from "@/data/state.json";
-
-function SendReq({ fields, setDoctors, matchedCity, matchedState }) {
+function SendReq({ sendReq }) {
   const [loading, setLoading] = useState(false);
 
   const filterData = () => {
     setLoading(true);
 
-    const params = new URLSearchParams(window.location.search);
-    const specialty = params.get("specialty");
-    const gender = params.get("gender");
-    const degree = params.get("degree");
-    const active = params.get("turn");
-    const province = params.get("province");
-    const sort = fields.stars;
-
-    let city = matchedCity?.id || null;
-    let state = matchedState?.id || null;
-    if (province) {
-      const findCity = cities.find((item) => item.id === province);
-      const findState = states.find((item) => item.id === findCity?.province_id);
-      if (findCity) city = findCity.id;
-      if (findState) state = findState.id;
-    }
-
-    const requestData = {
-      specialty: specialty === "null" ? null : specialty,
-      gender,
-      degree,
-      active,
-      city,
-      state,
-      sort,
-      name: fields.search,
-    };
-
-    request
-      .getDoctors(requestData)
-      .then((res) => {
-        if (res && res.data) setDoctors(res.data);
-      })
-      .catch(() => {})
-      .finally(() => {
-        setLoading(false);
-      });
+    sendReq().finally(() => {
+      setLoading(false);
+    });
   };
 
   return (

components/doctors/search/index.js

@@ -6,17 +6,11 @@ import SendReq from "./SendReq";
 import SearchField from "./SearchField";
 
 function SearchBar({
-  data,
-  fields,
   filter,
-  setData,
+  sendReq,
   setFilter,
-  setDoctors,
   updateData,
-  matchedCity,
-  matchedState,
-  confirmedData,
-  setConfirmedData,
+  setDataInURL,
 }) {
   return (
     <ButtonGroup
@@ -26,16 +20,11 @@ function SearchBar({
         !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
       <FilterModal
-        data={data}
         filter={filter}
-        setData={setData}
+        sendReq={sendReq}
         setFilter={setFilter}
-        setDoctors={setDoctors}
         updateData={updateData}
-        matchedCity={matchedCity}
-        matchedState={matchedState}
-        confirmedData={confirmedData}
-        setConfirmedData={setConfirmedData}
+        setDataInURL={setDataInURL}
       >
         <Button
           color="secondary"
@@ -54,12 +43,7 @@ function SearchBar({
         </Button>
       </FilterModal>
       <SearchField filter={filter} updateData={updateData} />
-      <SendReq
-        fields={fields}
-        setDoctors={setDoctors}
-        matchedCity={matchedCity}
-        matchedState={matchedState}
-      />
+      <SendReq sendReq={sendReq} />
     </ButtonGroup>
   );
 }

components/doctors/sortlist/SelectSort.js

@@ -11,42 +11,16 @@ const listSort = [
   { label: 5, id: 5 },
 ];
 
-function SelectSort({
-  data,
-  fields,
-  filter,
-  setFields,
-  updateData,
-  setDoctors,
-  matchedCity,
-  matchedState,
-}) {
-  const handleChange = (event) => {
-    const valSort = Number(event.target.value);
-    setFields({ ...fields, stars: valSort });
-    const params = { sort: valSort === 3 ? "ASC" : "DESC", active: data.turn };
-    if (data.specialties) params.specialty = data.specialties.id;
-    else if (data.category) params.specialty = data.category.id;
-    if (data.gender !== "هر دو")
-      params.gender = data.gender === "مرد" ? "man" : "woman";
-    if (data.degree && data.degree !== "همه موارد")
-      params.degree = degreeVal.find((item) => item.name === data.degree)?.val;
-    if (matchedCity) params.city = matchedCity.id;
-    if (matchedState) params.state = matchedState.id;
-
-    request
-      .getDoctors(params)
-      .then((res) => {
-        if (res && res.data) setDoctors(res.data);
-      })
-      .catch(() => {});
+function SelectSort({ filter, updateData }) {
+  const handleClick = (e) => {
+    updateData("sort", Number(e.target.value), true);
   };
 
   return (
     <Select
       displayEmpty
       value={filter.sort}
-      onChange={(e) => updateData("sort", Number(e.target.value))}
+      onChange={handleClick}
       className="!w-[198px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
       renderValue={(value) => {
         return (

components/doctors/sortlist/index.js

@@ -4,32 +4,13 @@ import FilterModal from "../modal/FilterModal";
 import FilterBtn from "./FilterBtn";
 import SelectSort from "./SelectSort";
 
-function SortList({
-  data,
-  fields,
-  filter,
-  setData,
-  setFields,
-  updateData,
-  setDoctors,
-  matchedCity,
-  matchedState,
-}) {
+function SortList({ data, filter, setData, updateData }) {
   return (
     <div className="flex flex-wrap items-center lg:!w-[25%] gap-[20px] gap-y-[12px] lg:gap-0">
       <FilterModal data={data} setData={setData}>
         <FilterBtn />
       </FilterModal>
-      <SelectSort
-        data={data}
-        filter={filter}
-        fields={fields}
-        setFields={setFields}
-        updateData={updateData}
-        setDoctors={setDoctors}
-        matchedCity={matchedCity}
-        matchedState={matchedState}
-      />
+      <SelectSort filter={filter} updateData={updateData} />
     </div>
   );
 }