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/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>
   );
 }