hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ehsan
2025-05-10 17:05:06 +03:30
parent a89fc4a3f9
commit f2e880c721
10 changed files with 160 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/modalSearchCity/ButtonFilter.js
+5 -12
View File
@@ -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]
md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1
${
selected && selected.province && selected.city ? "" : ""
}`}
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 && selected.province && selected.city
? `${selected.province} | ${selected.city}`
: isProvinceInclude?.name
? isProvinceInclude.name
: "انتخاب شهر"}
{selected.province || 'استان'}
{' | '}
{selected.city || 'شهر'}
</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
View File
@@ -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}
disabled={isProvinceInclude}
value={selected.province}
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={
isProvinceInclude
? !isProvinceInclude ||
!provinceSelected ||
filteredCities.length === 0
: !provinceSelected || filteredCities.length === 0
}
disabled={!selected.province}
/>
</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
+6 -35
View File
@@ -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 }) {
<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
-2
View File
@@ -44,8 +44,6 @@ function DoctorsPage() {
degree: 0,
turn: true,
});
console.log(newCity);
useEffect(() => {
setTimeout(() => {
components/home/TextHeader.js
+25
View File
@@ -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
+2 -21
View File
@@ -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
+71
View File
@@ -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
+17 -73
View File
@@ -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]
helper/index.js
+12 -4
View File
@@ -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
+16
View File
@@ -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 };
}