send filter degree, gender and speciality with en name, handle set url in doctors page with searchbar home for key field or search, set value of province in url with id, change filter stars with ASC and DESC, bg-color of field in spcialties

app/component/modalSearchCity/Content.js

@@ -4,17 +4,21 @@ import { Button } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
+import { useState } from "react";
+import { request } from "@/services/response";
 
 function Content({
   state,
   states,
   selected,
+  setDoctors,
   updateData,
   handleClose,
   filteredCities,
   handleSearch,
 }) {
   const citySelected = selected.city;
+  const [loading, setLoading] = useState(false);
   const listboxProps = {
     style: {
       maxHeight: 200,
@@ -22,12 +26,7 @@ function Content({
     },
   };
 
-  const handleFilter = () => {
-    const city =
-      selected &&
-      citySelected &&
-      filteredCities.find((item) => item.name === citySelected);
-
+  const handleFilter = (city) => {
     const current = new URLSearchParams(window.location.search);
     current.set("province", city.id);
     const newUrl = `${window.location.pathname}?${current.toString()}`;
@@ -37,6 +36,45 @@ function Content({
     handleClose();
   };
 
+  const sendReq = () => {
+    setLoading(true);
+    const itemCity =
+      selected &&
+      citySelected &&
+      filteredCities.find((item) => item.name === citySelected);
+
+    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 city =
+      states.find((item) => item.name === selected.province)?.id || null;
+    const state =
+      filteredCities.find((item) => item.name === selected.city)?.id || null;
+
+    const requestData = {
+      specialty: specialty === "null" ? null : specialty,
+      gender,
+      degree,
+      active,
+      city,
+      state,
+    };
+
+    request
+      .getDoctors(requestData)
+      .then((res) => {
+        if (res && res.data) setDoctors(res.data);
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+        handleFilter(itemCity);
+      });
+  };
+
   const valState =
     selected &&
     citySelected &&
@@ -78,8 +116,9 @@ function Content({
         </div>
         <div className="w-full flex justify-end">
           <Button
+            loading={loading}
             className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
-            onClick={handleFilter}
+            onClick={sendReq}
             variant="contained"
             color="primary"
             disabled={!selected.city || !selected.province}

app/component/modalSearchCity/index.js

@@ -11,20 +11,20 @@ import citiesData from "@/data/city.json";
 import Content from "./Content";
 
 function ModalSearchCity({
+  open,
+  state,
+  setOpen,
   children,
   selected,
+  setDoctors,
   handleSearch,
-  state,
   setSelected,
-  open,
-  setOpen,
 }) {
   const provinceSelected = selected.province;
 
   const states = addLabelToList(statesData);
   const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
-  state;
 
   const handleClose = () => setOpen(false);
 
@@ -65,6 +65,7 @@ function ModalSearchCity({
             state={state}
             states={states}
             selected={selected}
+            setDoctors={setDoctors}
             updateData={updateData}
             handleClose={handleClose}
             handleSearch={handleSearch}