diff --git a/app/component/modalSearchCity/ButtonFilter.js b/app/component/modalSearchCity/ButtonFilter.js index 9d488cf..57160c0 100644 --- a/app/component/modalSearchCity/ButtonFilter.js +++ b/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 (
@@ -20,17 +18,12 @@ function ButtonFilter({ selected, setOpen }) {

- {selected && selected.province && selected.city - ? `${selected.province} | ${selected.city}` - : isProvinceInclude?.name - ? isProvinceInclude.name - : "انتخاب شهر"} + {selected.province || 'استان'} + {' | '} + {selected.city || 'شهر'}

diff --git a/app/component/modalSearchCity/Content.js b/app/component/modalSearchCity/Content.js index dcb7c68..321caa4 100644 --- a/app/component/modalSearchCity/Content.js +++ b/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({

item.label === citySelected) && + filteredCities.find((item) => item.name === citySelected) && citySelected } list={filteredCities} name="city" label="شهر" - disabled={ - isProvinceInclude - ? !isProvinceInclude || - !provinceSelected || - filteredCities.length === 0 - : !provinceSelected || filteredCities.length === 0 - } + disabled={!selected.province} />
@@ -70,7 +63,7 @@ function Content({ onClick={handleClose} variant="contained" color="primary" - disabled={!provinceSelected || !citySelected} + disabled={!selected.city || !selected.province} > تایید و ادامه diff --git a/app/component/modalSearchCity/index.js b/app/component/modalSearchCity/index.js index dac8e7f..183e436 100644 --- a/app/component/modalSearchCity/index.js +++ b/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 [cities, setCities] = useState([]); + const states = addLabelToList(statesData); + 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 }) { diff --git a/components/doctors/index.js b/components/doctors/index.js index 5ceda62..828230c 100644 --- a/components/doctors/index.js +++ b/components/doctors/index.js @@ -44,8 +44,6 @@ function DoctorsPage() { degree: 0, turn: true, }); - console.log(newCity); - useEffect(() => { setTimeout(() => { diff --git a/components/home/TextHeader.js b/components/home/TextHeader.js new file mode 100644 index 0000000..ca75aa3 --- /dev/null +++ b/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 ( +
+

+ با {matchedCity?.site_name} +

+

+ + {matchedCity?.slogan} + +

+
+ ) +} + +export default TextHeader \ No newline at end of file diff --git a/components/home/index.js b/components/home/index.js index 71987aa..4d8d040 100644 --- a/components/home/index.js +++ b/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 (
-
-

- با {isProvinceInclude?.site_name} -

-

- - {isProvinceInclude?.slogan} - -

-
+
diff --git a/components/home/search/Fields.js b/components/home/search/Fields.js new file mode 100644 index 0000000..f2211a9 --- /dev/null +++ b/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 ( + <> + + + + + + + + + + ) +} + +export default Fields \ No newline at end of file diff --git a/components/home/search/index.js b/components/home/search/index.js index 9e3e8ae..c3ff72a 100644 --- a/components/home/search/index.js +++ b/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 ( - - - - - - - - +
, { prop } ); }; + +export const addLabelToList = (list) => + list.map(item => { + return { + ...item, + label: item.name + } + }) \ No newline at end of file diff --git a/lib/getStateInfo.js b/lib/getStateInfo.js new file mode 100644 index 0000000..6245119 --- /dev/null +++ b/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 }; +}