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

app/component/element/AutoCompleteSelect.js

@@ -18,7 +18,12 @@ function AutoCompleteSelect({
       disablePortal
       options={list}
       disabled={disabled}
-      ListboxProps={listboxProps}
+      ListboxProps={{
+        style: {
+          maxHeight: 200,
+          overflow: "auto",
+        },
+      }}
       value={value || null}
       getOptionLabel={(option) => {
         if (typeof option === "string") return option;

app/component/modalSearchCity/AddressSelector.js

@@ -0,0 +1,93 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AddressSelector({
+  list,
+  value,
+  isError,
+  updateData,
+  label,
+  disabled,
+  listboxProps,
+  name,
+}) {
+  return (
+    <Autocomplete
+      disablePortal
+      options={list}
+      disabled={disabled}
+      ListboxProps={listboxProps}
+      value={value || null}
+      getOptionLabel={(option) => option?.name || ""}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(_, value) => updateData(name, value)}
+      sx={{
+        ...styleTextSelectRight,
+        // Hide Icon Number
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+        "& input[type=number]": {
+          MozAppearance: "textfield",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+        "& .MuiInputBase-root": {
+          borderRadius: 2,
+          padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #D7D7D7",
+        },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "#D7D7D7 !important",
+          },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            border: "1px solid #5559CE !important",
+          },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: isError ? "1px solid red !important" : "",
+        },
+      }}
+      renderOption={(props, option) => (
+        <Button
+          fullWidth
+          {...props}
+          key={props.id}
+          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+        >
+          {option.name}
+        </Button>
+      )}
+      renderInput={(params) => (
+        <TextField
+          fullWidth
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <div className="absolute left-4">
+                <BottomSelect />
+              </div>
+            ),
+          }}
+          placeholder={label}
+          sx={{
+            borderRadius: "8px",
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default AddressSelector;

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 />

app/component/modalSearchCity/index.js

@@ -6,32 +6,31 @@ import { styleDefault } from "@/mui";
 import { addLabelToList } from "@/helper";
 
 // Data
-import statesData from "@/data/state.json";
-import citiesData from "@/data/city.json";
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
 import Content from "./Content";
 
 function ModalSearchCity({
   open,
   state,
+  filter,
   setOpen,
   children,
-  selected,
-  setDoctors,
-  handleSearch,
-  setSelected,
+  setFilter,
+  modalLocate,
 }) {
-  const provinceSelected = selected.province;
+  const stateSelected = filter?.state?.name;
 
-  const states = addLabelToList(statesData);
-  const cities = addLabelToList(citiesData);
+  // const states = addLabelToList(statesData);
+  // const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
   const handleClose = () => setOpen(false);
 
   useEffect(() => {
-    if (provinceSelected) {
+    if (stateSelected) {
       const selectedState = states.find(
-        (state) => state.label === provinceSelected
+        (state) => state.name === stateSelected
       );
       if (selectedState) {
         const stateId = selectedState.id;
@@ -43,15 +42,15 @@ function ModalSearchCity({
     } else {
       setFilteredCities([]);
     }
-  }, [provinceSelected]);
+  }, [stateSelected]);
 
-  const updateData = (event, name) => {
-    if (name === "province" && event !== provinceSelected) {
-      setSelected({ province: event.name, city: "" });
-    } else {
-      setSelected({ ...selected, [name]: event.name });
-    }
-  };
+  // const updateData = (event, name) => {
+  //   if (name === "province" && event !== stateSelected) {
+  //     setSelected({ province: event.name, city: "" });
+  //   } else {
+  //     setSelected({ ...selected, [name]: event.name });
+  //   }
+  // };
 
   return (
     <>
@@ -64,11 +63,10 @@ function ModalSearchCity({
           <Content
             state={state}
             states={states}
-            selected={selected}
-            setDoctors={setDoctors}
-            updateData={updateData}
+            filter={filter}
+            setFilter={setFilter}
             handleClose={handleClose}
-            handleSearch={handleSearch}
+            modalLocate={modalLocate}
             filteredCities={filteredCities}
           />
         </Box>