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/home/search/Fields.js

@@ -2,10 +2,10 @@
 
 import { useState } from "react";
 
-import ModalSearchCity from "@/app/component/modalSearchCity";
-import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
 import FilterText from "./FilterText";
 import RedirectLink from "./RedirectLink";
+import ModalSearchCity from "./modal";
+import ButtonFilter from "./modal/ButtonFilter";
 
 function Fields({ city, state }) {
   const [open, setOpen] = useState(false);

components/home/search/RedirectLink.js

@@ -5,23 +5,20 @@ import { Search } from "@mui/icons-material";
 import { Button } from "@mui/material";
 import { useRouter } from "next/navigation";
 import specialties from "@/data/specialties.json";
-import cities from "@/data/city.json";
 
 function RedirectLink({ data }) {
   const router = useRouter();
 
   const handleRedirect = () => {
     const filters = {};
-    if (data.province) {
-      const item = cities.find((item) => item.name === data.city);
-      filters.province = item.id;
-    }
+    if (data.city && data.city !== "نوبت 724") filters.city = data.city;
+    if (data.province) filters.state = data.province;
     if (data.search) {
       const specialtyItem = specialties.find((item) =>
         item.name.includes(data.search)
       );
       if (specialtyItem) {
-        filters.field = specialtyItem.name;
+        filters.specialty = specialtyItem.name;
       } else {
         filters.search = data.search;
       }

components/home/search/modal/ButtonFilter.js

@@ -0,0 +1,34 @@
+// Icons
+import ArrowBottomH from "@/components/icons/ArrowBottomH";
+import Location from "@/components/icons/Location";
+import { Button } from "@mui/material";
+
+function ButtonFilter({ selected, setOpen }) {
+  const handleOpen = () => setOpen(true);
+
+  return (
+    <div>
+      <Button
+        className="!border-none hover:!bg-transparent !shadow-none !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
+        onClick={handleOpen}
+        variant="contained"
+        color="secondary"
+      >
+        <div className="min-w-[20px] min-h-[20px] hidden md:flex">
+          <Location />
+        </div>
+        <p
+          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
+        >
+          {(selected.city !== "نوبت 724" ? selected.city : false) || "شهر"}
+        </p>
+        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
+          <ArrowBottomH />
+        </div>
+      </Button>
+    </div>
+  );
+}
+
+export default ButtonFilter;

components/home/search/modal/Content.js

@@ -0,0 +1,83 @@
+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";
+
+function Content({
+  state,
+  states,
+  selected,
+  updateData,
+  handleClose,
+  filteredCities,
+  handleSearch,
+}) {
+  const citySelected = selected.city;
+  const listboxProps = {
+    style: {
+      maxHeight: 200,
+      overflow: "auto",
+    },
+  };
+
+  const handleFilter = () => {
+    handleSearch && handleSearch("");
+    handleClose();
+  };
+
+  return (
+    <div>
+      <div className="flex justify-end w-full">
+        <div className="cursor-pointer" onClick={handleClose}>
+          <CloseModalD />
+        </div>
+      </div>
+      <div className="md:p-[24px] pt-0">
+        <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
+          شهر یا استان مورد نظر را انتخاب نمایید:
+        </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}
+            listboxProps={listboxProps}
+            updateData={updateData}
+            list={states}
+            label="استان"
+            name="province"
+          />
+          <AutoCompleteSelect
+            updateData={updateData}
+            listboxProps={listboxProps}
+            value={
+              selected &&
+              citySelected &&
+              filteredCities.find((item) => item.name === citySelected) &&
+              citySelected
+            }
+            list={filteredCities}
+            name="city"
+            label="شهر"
+            disabled={!selected.province}
+          />
+        </div>
+        <div className="w-full flex justify-end">
+          <Button
+            className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
+            onClick={handleFilter}
+            variant="contained"
+            color="primary"
+            disabled={!selected.city || !selected.province}
+          >
+            تایید و ادامه
+            <ArrowLeftM />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Content;

components/home/search/modal/index.js

@@ -1,54 +1,36 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Box, Button, Modal } from "@mui/material";
-
-// Icon
-import ArrowBottomH from "@/components/icons/ArrowBottomH";
-import Location from "@/components/icons/Location";
+import { Modal, Box } from "@mui/material";
 import { styleDefault } from "@/mui";
-import CloseModalD from "@/components/icons/CloseModalD";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import ArrowLeftM from "@/components/icons/ArrowLeftM";
+import { addLabelToList } from "@/helper";
 
 // Data
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
+import Content from "./Content";
 
-function ModalSearchCity() {
-  const [states, setStates] = useState([]);
-  const [cities, setCities] = useState([]);
+function ModalSearchCity({
+  open,
+  state,
+  setOpen,
+  children,
+  selected,
+  handleSearch,
+  setSelected,
+}) {
+  const provinceSelected = selected.province;
+
+  const states = addLabelToList(statesData);
+  const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
-  const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
-  const [selected, setSelected] = useState({
-    first: "",
-    second: "",
-  });
-
   useEffect(() => {
-    const formattedStates = statesData.map((state) => ({
-      label: state.name,
-      id: state.id,
-    }));
-
-    const formattedCities = citiesData.map((city) => ({
-      label: city.name,
-      id: city.id,
-      province_id: city.province_id,
-    }));
-
-    setStates(formattedStates);
-    setCities(formattedCities);
-  }, []);
-
-  useEffect(() => {
-    if (selected.first) {
+    if (provinceSelected) {
       const selectedState = states.find(
-        (state) => state.label === selected.first
+        (state) => state.label === provinceSelected
       );
       if (selectedState) {
         const stateId = selectedState.id;
@@ -59,13 +41,12 @@ function ModalSearchCity() {
       }
     } else {
       setFilteredCities([]);
-      setSelected({ ...selected, second: "" });
     }
-  }, [selected.first, cities, states]);
+  }, [provinceSelected]);
 
   const updateData = (event, name) => {
-    if (name === "first" && event !== selected.first) {
-      setSelected({ first: event, second: "" });
+    if (name === "province" && event !== provinceSelected) {
+      setSelected({ province: event, city: "" });
     } else {
       setSelected({ ...selected, [name]: event });
     }
@@ -74,68 +55,20 @@ function ModalSearchCity() {
   return (
     <>
       {/* Button Modal */}
-      <Button
-        className="!border-none hover:!bg-transparent !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
-        onClick={handleOpen}
-        variant="contained"
-        color="secondary"
-      >
-        <div className="min-w-[20px] min-h-[20px] hidden md:flex">
-          <Location />
-        </div>
-        <p
-          className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
-          md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
-          ${selected.first && selected.second ? "" : ""}`}
-        >
-          {selected.first && selected.second
-            ? `${selected.first} | ${selected.second}`
-            : "انتخاب شهر"}
-        </p>
-        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
-          <ArrowBottomH />
-        </div>
-      </Button>
+      {children}
+
       {/* Content Modal */}
       <Modal open={open} onClose={handleClose}>
         <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
-          <div className="flex justify-end w-full">
-            <div className="cursor-pointer" onClick={handleClose}>
-              <CloseModalD />
-            </div>
-          </div>
-          <div className="md:p-[24px] pt-0">
-            <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
-              شهر یا استان مورد نظر را انتخاب نمایید:
-            </p>
-            <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
-              <AutoCompleteSelect
-                updateData={updateData}
-                list={states}
-                label="استان"
-                name="first"
-              />
-              <AutoCompleteSelect
-                updateData={updateData}
-                list={filteredCities}
-                name="second"
-                label="شهر"
-                disabled={!selected.first || filteredCities.length === 0}
-              />
-            </div>
-            <div className="w-full flex justify-end">
-              <Button
-                className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
-                onClick={handleClose}
-                variant="contained"
-                color="primary"
-                disabled={!selected.first || !selected.second}
-              >
-                تایید و ادامه
-                <ArrowLeftM />
-              </Button>
-            </div>
-          </div>
+          <Content
+            state={state}
+            states={states}
+            selected={selected}
+            updateData={updateData}
+            handleClose={handleClose}
+            handleSearch={handleSearch}
+            filteredCities={filteredCities}
+          />
         </Box>
       </Modal>
     </>