remove context && change design & modals & function && add folder lib

app/component/modalSearchCity/ButtonFilter.js

@@ -1,12 +1,10 @@
 // Icons
 import ArrowBottomH from "@/components/icons/ArrowBottomH";
 import Location from "@/components/icons/Location";
-import { useProvince } from "@/context/ProvinceProvider";
 import { Button } from "@mui/material";
 
 function ButtonFilter({ selected, setOpen }) {
   const handleOpen = () => setOpen(true);
-  const { isProvinceInclude } = useProvince();
 
   return (
     <div>
@@ -20,17 +18,12 @@ function ButtonFilter({ selected, setOpen }) {
           <Location />
         </div>
         <p
-          className={`text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+          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
+                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1'
-                    ${
-                      selected && selected.province && selected.city ? "" : ""
-                    }`}
         >
-          {selected && selected.province && selected.city
+          {selected.province || 'استان'}
-            ? `${selected.province} | ${selected.city}`
+          {' | '}
-            : isProvinceInclude?.name
+          {selected.city || 'شهر'}
-            ? isProvinceInclude.name
-            : "انتخاب شهر"}
         </p>
         <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
           <ArrowBottomH />

app/component/modalSearchCity/Content.js

@@ -6,13 +6,12 @@ import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
 
 function Content({
+  state,
   states,
   selected,
   updateData,
   handleClose,
   filteredCities,
-  provinceSelected,
-  isProvinceInclude,
 }) {
   const citySelected = selected.city;
   const listboxProps = {
@@ -35,8 +34,8 @@ 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 && provinceSelected}
+            value={selected.province}
-            disabled={isProvinceInclude}
+            disabled={state}
             listboxProps={listboxProps}
             updateData={updateData}
             list={states}
@@ -49,19 +48,13 @@ function Content({
             value={
               selected &&
               citySelected &&
-              filteredCities.find((item) => item.label === citySelected) &&
+              filteredCities.find((item) => item.name === citySelected) &&
               citySelected
             }
             list={filteredCities}
             name="city"
             label="شهر"
-            disabled={
+            disabled={!selected.province}
-              isProvinceInclude
-                ? !isProvinceInclude ||
-                !provinceSelected ||
-                filteredCities.length === 0
-                : !provinceSelected || filteredCities.length === 0
-            }
           />
         </div>
         <div className="w-full flex justify-end">
@@ -70,7 +63,7 @@ function Content({
             onClick={handleClose}
             variant="contained"
             color="primary"
-            disabled={!provinceSelected || !citySelected}
+            disabled={!selected.city || !selected.province}
           >
             تایید و ادامه
             <ArrowLeftM />

app/component/modalSearchCity/index.js

@@ -3,44 +3,24 @@
 import { useState, useEffect } from "react";
 import { Modal, Box } from "@mui/material";
 import { styleDefault } from "@/mui";
+import { addLabelToList } from "@/helper";
 
 // Data
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
 import Content from "./Content";
-import { useProvince } from "@/context/ProvinceProvider";
 
-function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
+function ModalSearchCity({ children, selected, state, setSelected, open, setOpen }) {
   const provinceSelected = selected.province;
-  const { isProvinceInclude } = useProvince();
-  const newProvinceData =
-    isProvinceInclude && isProvinceInclude.id === "63"
-      ? false
-      : isProvinceInclude;
 
-  const [states, setStates] = useState([]);
+  const states = addLabelToList(statesData);
-  const [cities, setCities] = useState([]);
+  const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
   const handleClose = () => setOpen(false);
 
   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 (provinceSelected) {
       const selectedState = states.find(
         (state) => state.label === provinceSelected
@@ -52,18 +32,10 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
         );
         setFilteredCities(filteredCities);
       }
-    } else if (newProvinceData) {
-      setSelected({
-        ...selected,
-        province: statesData.find(
-          (state) => state.id === newProvinceData.province_id
-        )?.name,
-      });
     } else {
       setFilteredCities([]);
-      setSelected({ ...selected, city: "" });
     }
-  }, [provinceSelected, cities, states]);
+  }, [provinceSelected]);
 
   const updateData = (event, name) => {
     if (name === "province" && event !== provinceSelected) {
@@ -82,13 +54,12 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
       <Modal open={open} onClose={handleClose}>
         <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
           <Content
+            state={state}
             states={states}
             selected={selected}
             updateData={updateData}
             handleClose={handleClose}
             filteredCities={filteredCities}
-            provinceSelected={provinceSelected}
-            isProvinceInclude={newProvinceData}
           />
         </Box>
       </Modal>

components/doctors/index.js

@@ -44,8 +44,6 @@ function DoctorsPage() {
     degree: 0,
     turn: true,
   });
-  console.log(newCity);
-
 
   useEffect(() => {
     setTimeout(() => {

components/home/TextHeader.js

@@ -0,0 +1,25 @@
+import { getStateInfo } from "@/lib/getStateInfo";
+import AText from "../icons/AText";
+import BText from "../icons/BText";
+
+function TextHeader() {
+    const { matchedCity } = getStateInfo();
+
+    return (
+        <div className="z-[50]">
+            <p className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
+                با {matchedCity?.site_name}
+            </p>
+            <p
+                className="text-[#525252] text-center mt-2.5 font-kalame text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px] 
+            font-bold flex items-center gap-1 sm:gap-2"
+            >
+                <BText />
+                {matchedCity?.slogan}
+                <AText />
+            </p>
+        </div>
+    )
+}
+
+export default TextHeader

components/home/index.js

@@ -1,32 +1,13 @@
-"use client";
-
-import AText from "../icons/AText";
-import BText from "../icons/BText";
-
 // Components
 import SearchBar from "./search";
+import TextHeader from "./TextHeader";
 import FrequentSearches from "./FrequentSearches";
-import { useProvince } from "@/context/ProvinceProvider";
 
 function HomePage() {
-  const { isProvinceInclude } = useProvince();
-
   return (
     <div className="bg-banner-home after:z-[2] !bg-bottom !bg-no-repeat !bg-cover md:!min-h-[115vh]">
       <div className="padding-responsive z-20 min-h-screen py-[120px] flex items-center justify-center flex-col gap-[40px]">
-        <div className="z-[50]">
+        <TextHeader />
-          <p className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold">
-            با {isProvinceInclude?.site_name}
-          </p>
-          <p
-            className="text-[#525252] text-center mt-2.5 font-kalame text-[16px] sm:text-[25px] md:text-[31px] lg:text-[36px] 
-            font-bold flex items-center gap-1 sm:gap-2"
-          >
-            <BText />
-            {isProvinceInclude?.slogan}
-            <AText />
-          </p>
-        </div>
         <SearchBar />
         <FrequentSearches />
       </div>

components/home/search/Fields.js

@@ -0,0 +1,71 @@
+"use client"
+
+import { useState } from "react";
+
+import { Button, TextField } from "@mui/material";
+import ModalSearchCity from "@/app/component/modalSearchCity";
+import Search from "@/components/icons/Search";
+import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
+import Link from "next/link";
+
+function Fields({ city, state }) {
+    const [open, setOpen] = useState(false);
+    const [selected, setSelected] = useState({
+        province: state?.name || '',
+        city: city?.name || '',
+    });
+
+    return (
+        <>
+            <ModalSearchCity
+                open={open}
+                state={state}
+                setOpen={setOpen}
+                selected={selected}
+                setSelected={setSelected}
+            >
+                <ButtonFilter setOpen={setOpen} selected={selected} />
+            </ModalSearchCity>
+            <span className="black w-px bg-[#EFEFEF]"></span>
+            <TextField
+                variant="standard"
+                InputProps={{
+                    disableUnderline: true,
+                }}
+                sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    "& .MuiInput-root": {
+                        padding: "0",
+                        borderBottom: "none",
+                    },
+                    "& .MuiInputBase-input": {
+                        color: "#6C757D",
+                    },
+                }}
+                placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
+                dir="rtl"
+                className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
+            />
+            <Link
+                href={{
+                    pathname: "/doctors",
+                    query: {
+                        province: selected.province,
+                        city: selected.city,
+                    },
+                }}
+            >
+                <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
+                    <div className="min-w-[20px] min-h-[20px]">
+                        <Search />
+                    </div>
+                    <p>جستجو</p>
+                </Button>
+            </Link>
+        </>
+    )
+}
+
+export default Fields

components/home/search/index.js

@@ -1,40 +1,29 @@
-"use client";
-
-import Search from "@/components/icons/Search";
 import { Button, ButtonGroup, TextField } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
-import ModalSearchCity from "@/app/component/modalSearchCity";
-import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
-import { useState, useCallback } from "react";
 import Link from "next/link";
 
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
+import Fields from "./Fields";
+import { getStateInfo } from "@/lib/getStateInfo";
 
-const provinceIdMap = Object.fromEntries(
+// const provinceIdMap = Object.fromEntries(
-  statesData.map((state) => [state.name, state.id])
+//   statesData.map((state) => [state.name, state.id])
-);
+// );
-const citiesByProvinceId = citiesData.reduce((acc, city) => {
+// const citiesByProvinceId = citiesData.reduce((acc, city) => {
-  if (!acc[city.province_id]) acc[city.province_id] = [];
+//   if (!acc[city.province_id]) acc[city.province_id] = [];
-  acc[city.province_id].push(city);
+//   acc[city.province_id].push(city);
-  return acc;
+//   return acc;
-}, {});
+// }, {});
 
 function SearchBar() {
-  const [selected, setSelected] = useState({
+  const { matchedCity, matchedState } = getStateInfo()
-    province: "",
-    city: "",
-  });
-  const [open, setOpen] = useState(false);
-  const getDefaultCityForProvince = useCallback((provinceName) => {
-    if (!provinceName) return undefined;
-    const provinceId = provinceIdMap[provinceName];
-    return citiesByProvinceId[provinceId]?.[0]?.name;
-  }, []);
-  console.log(getDefaultCityForProvince(selected.province));
-  console.log(selected.province);
-
 
+  // const getDefaultCityForProvince = useCallback((provinceName) => {
+  //   if (!provinceName) return undefined;
+  //   const provinceId = provinceIdMap[provinceName];
+  //   return citiesByProvinceId[provinceId]?.[0]?.name;
+  // }, []);
 
   return (
     <ButtonGroup
@@ -45,52 +34,7 @@ function SearchBar() {
         !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
       "
     >
-      <ModalSearchCity
+      <Fields city={matchedCity} state={matchedState} />
-        open={open}
-        setOpen={setOpen}
-        selected={selected}
-        setSelected={setSelected}
-      >
-        <ButtonFilter setOpen={setOpen} selected={selected} />
-      </ModalSearchCity>
-      <span className="black w-px bg-[#EFEFEF]"></span>
-      <TextField
-        variant="standard"
-        InputProps={{
-          disableUnderline: true,
-        }}
-        sx={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "center",
-          "& .MuiInput-root": {
-            padding: "0",
-            borderBottom: "none",
-          },
-          "& .MuiInputBase-input": {
-            color: "#6C757D",
-          },
-        }}
-        placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
-        dir="rtl"
-        className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
-      />
-      <Link
-        href={{
-          pathname: "/doctors",
-          query: {
-            province: selected.province,
-            city: selected.city || getDefaultCityForProvince(selected.province),
-          },
-        }}
-      >
-        <Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
-          <div className="min-w-[20px] min-h-[20px]">
-            <Search />
-          </div>
-          <p>جستجو</p>
-        </Button>
-      </Link>
       <Button
         className="!flex lg:!hidden !rounded-[4px] 
                 !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]

helper/index.js

@@ -88,13 +88,21 @@ export const alert = (type, text, prop) => {
         {type === "error"
           ? "خطا"
           : type === "warning"
-          ? "هشدار"
+            ? "هشدار"
-          : type === "info"
+            : type === "info"
-          ? "اعلام"
+              ? "اعلام"
-          : "موفقیت"}
+              : "موفقیت"}
       </p>
       <p className="text-[14px] font-normal">{text}</p>
     </div>,
     { prop }
   );
 };
+
+export const addLabelToList = (list) =>
+  list.map(item => {
+    return {
+      ...item,
+      label: item.name
+    }
+  })

lib/getStateInfo.js

@@ -0,0 +1,16 @@
+import { headers } from "next/headers";
+
+// Data
+import citiesData from "@/data/city.json";
+import statesData from "@/data/state.json";
+
+export function getStateInfo() {
+    const headersList = headers();
+    const host = headersList.get("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 };
+}