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) => {
+    const newFilter =
-      if (name === "state") {
+      name === "state"
-        return {
+        ? {
-          ...prev,
+            ...filter,
-          state: value,
+            state: value,
-          city: null,
+            city: null,
-        };
+          }
-      }
+        : {
-      return {
+            ...filter,
-        ...prev,
+            [name]: value,
-        [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 (matchedCity)
-    if (matchedState) params.state = matchedState?.id || null;
+      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`, {

components/doctors/head/index.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import SearchBar from "../search";
 import SortList from "../sortlist";
 import { Button } from "@mui/material";
-import { useParams } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import LocationD from "../../icons/LocationD";
 import specialties from "@/data/specialties.json";
 import ModalSearchCity from "@/app/component/modalSearchCity";
@@ -11,15 +11,15 @@ import ModalSearchCity from "@/app/component/modalSearchCity";
 // Data
 import states from "@/data/state.json";
 import cities from "@/data/city.json";
+import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
+import { request } from "@/services/response";
 
 function Head({ matchedCity, matchedState, setDoctors }) {
   const params = useParams();
-  const fieldName = params.field;
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const fieldName = searchParams.get("specialty");
   const [open, setOpen] = useState(false);
-  const [fields, setFields] = useState({
-    search: params.search || "",
-    stars: "",
-  });
 
   const findItem = (key, name) =>
     specialties.find((item) => item[key] === name);
@@ -34,45 +34,62 @@ function Head({ matchedCity, matchedState, setDoctors }) {
     degree: params.degree || "همه موارد",
   };
 
-  const selectedState = matchedState?.name || params?.state;
+  const selectedState = searchParams.get("state") || matchedState?.name;
   const selectedCity =
-    (matchedCity?.name && matchedCity?.id !== "63"
+    searchParams.get("city") ||
-      ? matchedCity?.name
+    (matchedCity?.name && matchedCity?.id !== "63" ? matchedCity?.name : false);
-      : false) || params?.city;
 
   const defaultFilter = {
     state: selectedState && states.find((item) => item.name === selectedState),
     city: selectedCity && cities.find((item) => item.name === selectedCity),
     category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
     specialty: isParent && findItem("name", fieldName),
-    active: params.active || 0,
+    active: searchParams.get("active") || 0,
-    gender: params.gender || "هر دو",
+    gender: searchParams.get("gender") || "هر دو",
-    degree: params.degree || "همه موارد",
+    degree: searchParams.get("degree") || "همه موارد",
-    sort: "",
+    sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
-    name: "",
+    name: searchParams.get("name") || "",
-  };
-  const modalLocate = () => {
-    setOpen(false);
   };
 
   const [data, setData] = useState(defaultData);
-  const [confirmedData, setConfirmedData] = useState(defaultData);
   const [filter, setFilter] = useState(defaultFilter);
 
-  console.log(filter);
+  const setDataInURL = (newFilter) => {
-  
+    const query = QueryForDoctorsFilter(newFilter);
 
-  const updateData = (name, value) => setFilter({ ...filter, [name]: value });
+    const searchParams = new URLSearchParams(query).toString();
+    router.push(`?${searchParams}`);
+  };
+
+  const updateData = (name, value, isReq) => {
+    const newFilter = { ...filter, [name]: value };
+    setDataInURL(newFilter);
+    setFilter(newFilter);
+    isReq && sendReq(newFilter);
+  };
+  const sendReq = (newFilter) => {
+    const params = QueryForDoctorsReq(newFilter || filter);
+
+    return request
+      .getDoctors(params)
+      .then((res) => {
+        setDoctors(res.data);
+        return res;
+      })
+      .catch((err) => {
+        throw err;
+      });
+  };
 
   return (
     <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
       <ModalSearchCity
         open={open}
         filter={filter}
+        sendReq={sendReq}
         setOpen={setOpen}
-        state={matchedState}
         setFilter={setFilter}
-        modalLocate={modalLocate}
+        setDataInURL={setDataInURL}
       >
         <Button
           className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
@@ -89,28 +106,17 @@ function Head({ matchedCity, matchedState, setDoctors }) {
       </ModalSearchCity>
       <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
         <SearchBar
-          data={data}
-          fields={fields}
           filter={filter}
-          setData={setData}
+          sendReq={sendReq}
           setFilter={setFilter}
-          setDoctors={setDoctors}
           updateData={updateData}
-          matchedCity={matchedCity}
+          setDataInURL={setDataInURL}
-          matchedState={matchedState}
-          confirmedData={confirmedData}
-          setConfirmedData={setConfirmedData}
         />
         <SortList
           data={data}
-          fields={fields}
           filter={filter}
           setData={setData}
-          setFields={setFields}
           updateData={updateData}
-          setDoctors={setDoctors}
-          matchedCity={matchedCity}
-          matchedState={matchedState}
         />
       </div>
     </div>

components/doctors/modal/ButtonApply.js

@@ -1,97 +1,16 @@
 import { Button } from "@mui/material";
-import specialties from "@/data/specialties.json";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { request } from "@/services/response";
-import { degreeVal } from "@/helper";
 
-function ButtonApply({
+function ButtonApply({ sendReq, setOpen }) {
-  data,
-  setConfirmedData,
-  matchedCity,
-  matchedState,
-  setOpen,
-  setDoctors,
-}) {
-  const router = useRouter();
   const [loading, setLoading] = useState(false);
 
-  const sendReq = (requestData) => {
+  const handleClick = () => {
     setLoading(true);
 
-    request
+    sendReq().finally(() => {
-      .getDoctors(requestData)
+      setOpen(false);
-      .then((res) => {
+      setLoading(false);
-        if (res && res.data) setDoctors(res.data);
-      })
-      .catch(() => {})
-      .finally(() => {
-        setOpen(false);
-        setLoading(false);
-      });
-  };
-
-  const applyFilters = () => {
-    const current = new URLSearchParams();
-
-    const mappings = [
-      {
-        key: "field",
-        getValue: (name) => {
-          if (data.category) {
-            const children = specialties.filter(
-              (item) => item.parent === data.category.id
-            );
-            return children.length > 0
-              ? children.find((item) => item.name === data.specialties.name)[
-                  name || "id"
-                ]
-              : data.category[name || "id"];
-          }
-          return null;
-        },
-      },
-      {
-        key: "gender",
-        getValue: () => (data.gender === "زن" ? "woman" : "man" || null),
-      },
-      {
-        key: "degree",
-        getValue: (name) => {
-          const item = degreeVal.find((item) => item.name === data.degree);
-
-          return (item && item[name || "val"]) || null;
-        },
-      },
-      { key: "turn", getValue: () => data.turn },
-    ];
-
-    let requestData = {
-      city: matchedCity?.id || null,
-      state: matchedState?.id || null,
-    };
-
-    mappings.forEach(({ key, getValue }) => {
-      let value;
-      if (key === "field") {
-        value = getValue("name");
-      } else if (key === "gender") {
-        value = data.gender;
-      } else if ("degree") {
-        value = getValue("name");
-      }
-      current.set(key, value);
     });
-
-    mappings.forEach(({ key, getValue }) => {
-      let value = getValue();
-      requestData[key === "field" ? "specialty" : key] = value;
-    });
-
-    const queryString = current.toString();
-    setConfirmedData(data);
-    sendReq(requestData);
-    router.push(`/doctors?${queryString}`);
   };
 
   return (
@@ -99,7 +18,7 @@ function ButtonApply({
       <Button
         loading={loading}
         variant="contained"
-        onClick={applyFilters}
+        onClick={handleClick}
         className="!px-3 !py-2 !text-[16px] !font-medium"
       >
         اعمال تغییرات

components/doctors/modal/Content.js

@@ -1,7 +1,7 @@
 import specialties from "@/data/specialties.json";
 import Form from "./form";
 
-function Content({ filter, setFilter, updateData }) {
+function Content({ filter, setFilter, updateData, setDataInURL }) {
   const changeSpecialty = (name, value) => {
     const newFilter = { ...filter, [name]: value };
 
@@ -16,6 +16,7 @@ function Content({ filter, setFilter, updateData }) {
     }
 
     setFilter(newFilter);
+    setDataInURL(newFilter);
     return newFilter;
   };
 

components/doctors/modal/FilterModal.js

@@ -10,17 +10,12 @@ import { clearFilterParams } from "@/helper";
 import ButtonApply from "./ButtonApply";
 
 function FilterModal({
-  data,
   filter,
-  setData,
+  sendReq,
   children,
   setFilter,
-  setDoctors,
   updateData,
-  matchedCity,
+  setDataInURL,
-  matchedState,
-  confirmedData,
-  setConfirmedData,
 }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -28,19 +23,16 @@ function FilterModal({
   const handleOpen = () => setOpen(true);
   const handleClose = () => {
     setOpen(false);
-    setData(confirmedData);
   };
 
   const resetFilter = () => {
-    clearFilterParams(router, ["turn", "field", "degree", "gender"]);
+    clearFilterParams(router, [
-
+      "category",
-    const defaultData = {
+      "specialty",
-      category: "",
+      "active",
-      specialties: "",
+      "gender",
-      turn: true,
+      "degree",
-      gender: "هر دو",
+    ]);
-      degree: "متخصص",
-    };
 
     const newFilter = {
       category: undefined,
@@ -49,9 +41,6 @@ function FilterModal({
       gender: "هر دو",
       degree: "همه موارد",
     };
-
-    setData({ ...defaultData });
-    setConfirmedData({ ...defaultData });
     setFilter({
       ...filter,
       ...newFilter,
@@ -90,16 +79,10 @@ function FilterModal({
               filter={filter}
               setFilter={setFilter}
               updateData={updateData}
+              setDataInURL={setDataInURL}
             />
           </div>
-          <ButtonApply
+          <ButtonApply sendReq={sendReq} setOpen={setOpen} />
-            data={data}
-            setOpen={setOpen}
-            setDoctors={setDoctors}
-            matchedCity={matchedCity}
-            matchedState={matchedState}
-            setConfirmedData={setConfirmedData}
-          />
         </div>
       </Modal>
     </>

components/doctors/search/SendReq.js

@@ -1,55 +1,16 @@
 import { Button } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
 import { useState } from "react";
-import { request } from "@/services/response";
 
-// Data
+function SendReq({ sendReq }) {
-import cities from "@/data/city.json";
-import states from "@/data/state.json";
-
-function SendReq({ fields, setDoctors, matchedCity, matchedState }) {
   const [loading, setLoading] = useState(false);
 
   const filterData = () => {
     setLoading(true);
 
-    const params = new URLSearchParams(window.location.search);
+    sendReq().finally(() => {
-    const specialty = params.get("specialty");
+      setLoading(false);
-    const gender = params.get("gender");
+    });
-    const degree = params.get("degree");
-    const active = params.get("turn");
-    const province = params.get("province");
-    const sort = fields.stars;
-
-    let city = matchedCity?.id || null;
-    let state = matchedState?.id || null;
-    if (province) {
-      const findCity = cities.find((item) => item.id === province);
-      const findState = states.find((item) => item.id === findCity?.province_id);
-      if (findCity) city = findCity.id;
-      if (findState) state = findState.id;
-    }
-
-    const requestData = {
-      specialty: specialty === "null" ? null : specialty,
-      gender,
-      degree,
-      active,
-      city,
-      state,
-      sort,
-      name: fields.search,
-    };
-
-    request
-      .getDoctors(requestData)
-      .then((res) => {
-        if (res && res.data) setDoctors(res.data);
-      })
-      .catch(() => {})
-      .finally(() => {
-        setLoading(false);
-      });
   };
 
   return (

components/doctors/search/index.js

@@ -6,17 +6,11 @@ import SendReq from "./SendReq";
 import SearchField from "./SearchField";
 
 function SearchBar({
-  data,
-  fields,
   filter,
-  setData,
+  sendReq,
   setFilter,
-  setDoctors,
   updateData,
-  matchedCity,
+  setDataInURL,
-  matchedState,
-  confirmedData,
-  setConfirmedData,
 }) {
   return (
     <ButtonGroup
@@ -26,16 +20,11 @@ function SearchBar({
         !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
       <FilterModal
-        data={data}
         filter={filter}
-        setData={setData}
+        sendReq={sendReq}
         setFilter={setFilter}
-        setDoctors={setDoctors}
         updateData={updateData}
-        matchedCity={matchedCity}
+        setDataInURL={setDataInURL}
-        matchedState={matchedState}
-        confirmedData={confirmedData}
-        setConfirmedData={setConfirmedData}
       >
         <Button
           color="secondary"
@@ -54,12 +43,7 @@ function SearchBar({
         </Button>
       </FilterModal>
       <SearchField filter={filter} updateData={updateData} />
-      <SendReq
+      <SendReq sendReq={sendReq} />
-        fields={fields}
-        setDoctors={setDoctors}
-        matchedCity={matchedCity}
-        matchedState={matchedState}
-      />
     </ButtonGroup>
   );
 }

components/doctors/sortlist/SelectSort.js

@@ -11,42 +11,16 @@ const listSort = [
   { label: 5, id: 5 },
 ];
 
-function SelectSort({
+function SelectSort({ filter, updateData }) {
-  data,
+  const handleClick = (e) => {
-  fields,
+    updateData("sort", Number(e.target.value), true);
-  filter,
-  setFields,
-  updateData,
-  setDoctors,
-  matchedCity,
-  matchedState,
-}) {
-  const handleChange = (event) => {
-    const valSort = Number(event.target.value);
-    setFields({ ...fields, stars: valSort });
-    const params = { sort: valSort === 3 ? "ASC" : "DESC", active: data.turn };
-    if (data.specialties) params.specialty = data.specialties.id;
-    else if (data.category) params.specialty = data.category.id;
-    if (data.gender !== "هر دو")
-      params.gender = data.gender === "مرد" ? "man" : "woman";
-    if (data.degree && data.degree !== "همه موارد")
-      params.degree = degreeVal.find((item) => item.name === data.degree)?.val;
-    if (matchedCity) params.city = matchedCity.id;
-    if (matchedState) params.state = matchedState.id;
-
-    request
-      .getDoctors(params)
-      .then((res) => {
-        if (res && res.data) setDoctors(res.data);
-      })
-      .catch(() => {});
   };
 
   return (
     <Select
       displayEmpty
       value={filter.sort}
-      onChange={(e) => updateData("sort", Number(e.target.value))}
+      onChange={handleClick}
       className="!w-[198px] !max-w-[305px] lg:!w-full text-[14px] md:text-[16px] !bg-transparent lg:!bg-[#FFF] !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
       renderValue={(value) => {
         return (

components/doctors/sortlist/index.js

@@ -4,32 +4,13 @@ import FilterModal from "../modal/FilterModal";
 import FilterBtn from "./FilterBtn";
 import SelectSort from "./SelectSort";
 
-function SortList({
+function SortList({ data, filter, setData, updateData }) {
-  data,
-  fields,
-  filter,
-  setData,
-  setFields,
-  updateData,
-  setDoctors,
-  matchedCity,
-  matchedState,
-}) {
   return (
     <div className="flex flex-wrap items-center lg:!w-[25%] gap-[20px] gap-y-[12px] lg:gap-0">
       <FilterModal data={data} setData={setData}>
         <FilterBtn />
       </FilterModal>
-      <SelectSort
+      <SelectSort filter={filter} updateData={updateData} />
-        data={data}
-        filter={filter}
-        fields={fields}
-        setFields={setFields}
-        updateData={updateData}
-        setDoctors={setDoctors}
-        matchedCity={matchedCity}
-        matchedState={matchedState}
-      />
     </div>
   );
 }

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) {
+    if (data.city && data.city !== "نوبت 724") filters.city = data.city;
-      const item = cities.find((item) => item.name === data.city);
+    if (data.province) filters.state = data.province;
-      filters.province = item.id;
-    }
     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";
+import { Modal, Box } from "@mui/material";
-
-// Icon
-import ArrowBottomH from "@/components/icons/ArrowBottomH";
-import Location from "@/components/icons/Location";
 import { styleDefault } from "@/mui";
-import CloseModalD from "@/components/icons/CloseModalD";
+import { addLabelToList } from "@/helper";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import ArrowLeftM from "@/components/icons/ArrowLeftM";
 
 // Data
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
+import Content from "./Content";
 
-function ModalSearchCity() {
+function ModalSearchCity({
-  const [states, setStates] = useState([]);
+  open,
-  const [cities, setCities] = useState([]);
+  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) => ({
+    if (provinceSelected) {
-      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) {
       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) {
+    if (name === "province" && event !== provinceSelected) {
-      setSelected({ first: event, second: "" });
+      setSelected({ province: event, city: "" });
     } else {
       setSelected({ ...selected, [name]: event });
     }
@@ -74,68 +55,20 @@ function ModalSearchCity() {
   return (
     <>
       {/* Button Modal */}
-      <Button
+      {children}
-        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>
       {/* 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">
+          <Content
-            <div className="cursor-pointer" onClick={handleClose}>
+            state={state}
-              <CloseModalD />
+            states={states}
-            </div>
+            selected={selected}
-          </div>
+            updateData={updateData}
-          <div className="md:p-[24px] pt-0">
+            handleClose={handleClose}
-            <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
+            handleSearch={handleSearch}
-              شهر یا استان مورد نظر را انتخاب نمایید:
+            filteredCities={filteredCities}
-            </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>
         </Box>
       </Modal>
     </>

components/searchHead/smSearch/AutoCompleteSearch.js

@@ -23,6 +23,11 @@ function AutoCompleteSearch({
         setSelectedOption(newValue);
         handleSearch(newValue ? newValue.name : "");
       }}
+      sx={{
+        "& .MuiAutocomplete-input": {
+          background: "#ffffff !important",
+        },
+      }}
       renderInput={(params) => (
         <TextField
           {...params}

helper/index.js

@@ -263,3 +263,82 @@ export const degreeVal = [
   { name: "پزشک متخصص", val: "specialist" },
   { name: "پزشک فوق تخصص", val: "subspecialistplus" },
 ];
+
+export const QueryForDoctorsFilter = (newFilter) => {
+  const query = {};
+
+  // 🔹 active => only when value === 1
+  if (newFilter.active === 1) {
+    query.active = 1;
+  }
+
+  // 🔹 specialty or category
+
+  if (newFilter.specialty) {
+    query.specialty = newFilter.specialty.name;
+  } else if (newFilter.category) {
+    query.specialty = newFilter.category.name;
+  }
+
+  // 🔹 city
+  if (newFilter.city) {
+    query.city = newFilter.city.name;
+  }
+
+  // 🔹 state
+  if (newFilter.state) {
+    query.state = newFilter.state.name;
+  }
+
+  // 🔹 degree (only if not "همه موارد")
+  if (newFilter.degree && newFilter.degree !== "همه موارد") {
+    query.degree = newFilter.degree;
+  }
+
+  // 🔹 gender (only if not "هر دو")
+  if (newFilter.gender && newFilter.gender !== "هر دو") {
+    query.gender = newFilter.gender;
+  }
+
+  // 🔹 name (only if has value)
+  if (newFilter.name && newFilter.name.trim() !== "") {
+    query.name = newFilter.name;
+  }
+
+  // 🔹 sort => only if value is 3,4,5
+  if ([3, 4, 5].includes(Number(newFilter.sort))) {
+    // query.sort = newFilter.sort === 3 ? "ASC" : "DESC";
+    query.sort = newFilter.sort;
+  }
+
+  return query;
+};
+
+export const QueryForDoctorsReq = (newFilter) => {
+  const params = {};
+
+  if (newFilter.active === 1) params.active = 1;
+
+  if (newFilter.specialty?.id) {
+    params.specialty = newFilter.specialty.id;
+  } else if (newFilter.category?.id) {
+    params.specialty = newFilter.category.id;
+  }
+
+  if (newFilter.city?.id) params.city = newFilter.city.id;
+  if (newFilter.state?.id) params.state = newFilter.state.id;
+
+  if (newFilter.degree && newFilter.degree !== "همه موارد")
+    params.degree = newFilter.degree;
+  if (newFilter.gender && newFilter.gender !== "هر دو")
+    params.gender = newFilter.gender;
+
+  if (newFilter.name) params.name = newFilter.name;
+
+  if (newFilter.sort) {
+    if (newFilter.sort === 3) params.sort = "ASC";
+    else if (newFilter.sort === 4 || newFilter.sort === 5) params.sort = "DESC";
+  }
+
+  return params;
+};

lib/getStateInfoClient.js

@@ -0,0 +1,21 @@
+// lib/getStateInfoClient.js
+import citiesData from "@/data/city.json";
+import statesData from "@/data/state.json";
+
+export function getStateInfoClient() {
+  if (typeof window === "undefined")
+    return { matchedCity: null, matchedState: null };
+
+  const host = window.location.host || "";
+  const subdomain = host.split(".")[0];
+
+  const matchedCity = citiesData.find((city) =>
+    city.domain.includes(subdomain)
+  );
+
+  const matchedState =
+    matchedCity &&
+    statesData.find((state) => state.id === matchedCity.province_id);
+
+  return { matchedCity, matchedState };
+}