change function of fliter sort, modal and locate set new data and change it and update

app/component/modalSearchCity/Content.js

@@ -2,85 +2,37 @@ import { Button } from "@mui/material";
 
 // Icon
 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";
+import AddressSelector from "./AddressSelector";
 
 function Content({
   state,
   states,
-  selected,
-  setDoctors,
-  updateData,
+  filter,
+  setFilter,
   handleClose,
+  modalLocate,
   filteredCities,
-  handleSearch,
 }) {
-  const citySelected = selected.city;
   const [loading, setLoading] = useState(false);
-  const listboxProps = {
-    style: {
-      maxHeight: 200,
-      overflow: "auto",
-    },
+
+  const updateData = (name, value) => {
+    setFilter((prev) => {
+      if (name === "state") {
+        return {
+          ...prev,
+          state: value,
+          city: null,
+        };
+      }
+      return {
+        ...prev,
+        [name]: value,
+      };
+    });
   };
 
-  const handleFilter = (city) => {
-    const current = new URLSearchParams(window.location.search);
-    current.set("province", city.id);
-    const newUrl = `${window.location.pathname}?${current.toString()}`;
-    window.history.replaceState({}, "", newUrl);
-
-    handleSearch && handleSearch("");
-    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 &&
-    filteredCities.find((item) => item.name === citySelected) &&
-    citySelected;
-
   return (
     <div>
       <div className="flex justify-end w-full">
@@ -93,35 +45,31 @@ function Content({
           شهر یا استان مورد نظر را انتخاب نمایید:
         </p>
         <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
-          <AutoCompleteSelect
-            value={selected.province}
-            disabled={state}
-            sendAll={true}
-            listboxProps={listboxProps}
-            updateData={updateData}
+          <AddressSelector
+            name="state"
             list={states}
             label="استان"
-            name="province"
-          />
-          <AutoCompleteSelect
+            disabled={state}
+            value={filter.state}
             updateData={updateData}
-            listboxProps={listboxProps}
-            sendAll={true}
-            value={valState}
-            list={filteredCities}
+          />
+          <AddressSelector
             name="city"
             label="شهر"
-            disabled={!selected.province}
+            value={filter.city}
+            list={filteredCities}
+            updateData={updateData}
+            disabled={!filter.state}
           />
         </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={sendReq}
+            onClick={modalLocate}
             variant="contained"
             color="primary"
-            disabled={!selected.city || !selected.province}
+            disabled={!filter.city || !filter.state}
           >
             تایید و ادامه
             <ArrowLeftM />