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

app/component/modalSearchCity/Content.js

@@ -5,32 +5,44 @@ import CloseModalD from "@/components/icons/CloseModalD";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
 import { useState } from "react";
 import AddressSelector from "./AddressSelector";
+import { getStateInfoClient } from "@/lib/getStateInfoClient";
 
 function Content({
-  state,
   states,
   filter,
+  sendReq,
   setFilter,
   handleClose,
-  modalLocate,
+  setDataInURL,
   filteredCities,
 }) {
   const [loading, setLoading] = useState(false);
+  const { matchedState } = getStateInfoClient();
+  const handleClick = () => {
+    setLoading(true);
+    sendReq().finally(() => {
+      console.log("asd");
+
+      setLoading(false);
+      handleClose();
+    });
+  };
 
   const updateData = (name, value) => {
-    setFilter((prev) => {
-      if (name === "state") {
-        return {
-          ...prev,
-          state: value,
-          city: null,
-        };
-      }
-      return {
-        ...prev,
-        [name]: value,
-      };
-    });
+    const newFilter =
+      name === "state"
+        ? {
+            ...filter,
+            state: value,
+            city: null,
+          }
+        : {
+            ...filter,
+            [name]: value,
+          };
+
+    setDataInURL(newFilter);
+    setFilter(newFilter);
   };
 
   return (
@@ -49,7 +61,7 @@ function Content({
             name="state"
             list={states}
             label="استان"
-            disabled={state}
+            disabled={matchedState}
             value={filter.state}
             updateData={updateData}
           />
@@ -66,7 +78,7 @@ function Content({
           <Button
             loading={loading}
             className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
-            onClick={modalLocate}
+            onClick={handleClick}
             variant="contained"
             color="primary"
             disabled={!filter.city || !filter.state}

app/component/modalSearchCity/index.js

@@ -3,7 +3,6 @@
 import { useState, useEffect } from "react";
 import { Modal, Box } from "@mui/material";
 import { styleDefault } from "@/mui";
-import { addLabelToList } from "@/helper";
 
 // Data
 import states from "@/data/state.json";
@@ -12,17 +11,15 @@ import Content from "./Content";
 
 function ModalSearchCity({
   open,
-  state,
   filter,
+  sendReq,
   setOpen,
   children,
   setFilter,
-  modalLocate,
+  setDataInURL,
 }) {
   const stateSelected = filter?.state?.name;
 
-  // const states = addLabelToList(statesData);
-  // const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
   const handleClose = () => setOpen(false);
@@ -44,14 +41,6 @@ function ModalSearchCity({
     }
   }, [stateSelected]);
 
-  // const updateData = (event, name) => {
-  //   if (name === "province" && event !== stateSelected) {
-  //     setSelected({ province: event.name, city: "" });
-  //   } else {
-  //     setSelected({ ...selected, [name]: event.name });
-  //   }
-  // };
-
   return (
     <>
       {/* Button Modal */}
@@ -61,12 +50,12 @@ function ModalSearchCity({
       <Modal open={open} onClose={handleClose}>
         <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
           <Content
-            state={state}
             states={states}
             filter={filter}
+            sendReq={sendReq}
             setFilter={setFilter}
             handleClose={handleClose}
-            modalLocate={modalLocate}
+            setDataInURL={setDataInURL}
             filteredCities={filteredCities}
           />
         </Box>

app/doctors/page.js

@@ -3,6 +3,10 @@ import Layout from "@/components/layout/StLayout";
 import { getStateInfo } from "@/lib/getStateInfo";
 import axios from "axios";
 
+// Data
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
+
 async function Doctors({ searchParams }) {
   const { matchedCity, matchedState } = getStateInfo();
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -10,9 +14,19 @@ async function Doctors({ searchParams }) {
   let doctors = null;
   try {
     const params = {};
+    const state = searchParams.state;
+    const city = searchParams.city;
+    console.log(state);
+    console.log(city);
 
-    if (matchedCity) params.city = matchedCity?.id || null;
-    if (matchedState) params.state = matchedState?.id || null;
+    if (matchedCity)
+      params.city = city
+        ? cities.find((item) => item.name === city)?.id
+        : matchedCity?.id || null;
+    if (matchedState)
+      params.state = state
+        ? states.find((item) => item.name === state)?.id
+        : matchedState?.id || null;
     if (searchParams.search) params.name = searchParams.search;
 
     const response = await axios.get(`${API_URL}/api/v1/doctors`, {