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

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]">
-          <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>
+        <TextHeader />
         <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(
-  statesData.map((state) => [state.name, state.id])
-);
-const citiesByProvinceId = citiesData.reduce((acc, city) => {
-  if (!acc[city.province_id]) acc[city.province_id] = [];
-  acc[city.province_id].push(city);
-  return acc;
-}, {});
+// const provinceIdMap = Object.fromEntries(
+//   statesData.map((state) => [state.name, state.id])
+// );
+// const citiesByProvinceId = citiesData.reduce((acc, city) => {
+//   if (!acc[city.province_id]) acc[city.province_id] = [];
+//   acc[city.province_id].push(city);
+//   return acc;
+// }, {});
 
 function SearchBar() {
-  const [selected, setSelected] = useState({
-    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 { matchedCity, matchedState } = getStateInfo()
 
+  // 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
-        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>
+      <Fields city={matchedCity} state={matchedState} />
       <Button
         className="!flex lg:!hidden !rounded-[4px] 
                 !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]