127 lines
4.2 KiB
JavaScript
127 lines
4.2 KiB
JavaScript
import { useState } from "react";
|
|
|
|
import SearchBar from "../search";
|
|
import SortList from "../sortlist";
|
|
import { Button } from "@mui/material";
|
|
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
|
import LocationD from "../../icons/LocationD";
|
|
import specialties from "@/data/specialties.json";
|
|
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 searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const fieldName = searchParams.get("specialty");
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const findItem = (key, name) =>
|
|
specialties.find((item) => item[key] === name);
|
|
const isParent =
|
|
findItem("name", fieldName) && findItem("name", fieldName).parent;
|
|
|
|
const defaultData = {
|
|
category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
|
|
specialties: isParent && findItem("name", fieldName),
|
|
turn: params && params.hasOwnProperty("turn") ? JSON.parse(params.turn) : 1,
|
|
gender: params.gender || "هر دو",
|
|
degree: params.degree || "همه موارد",
|
|
};
|
|
|
|
const selectedState = searchParams.get("state") || matchedState?.name;
|
|
const selectedCity =
|
|
searchParams.get("city") ||
|
|
(matchedCity?.name && matchedCity?.id !== "63" ? matchedCity?.name : false);
|
|
|
|
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: searchParams.get("active") || 0,
|
|
gender: searchParams.get("gender") || "هر دو",
|
|
degree: searchParams.get("degree") || "همه موارد",
|
|
sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
|
|
name: searchParams.get("name") || "",
|
|
};
|
|
|
|
const [data, setData] = useState(defaultData);
|
|
const [filter, setFilter] = useState(defaultFilter);
|
|
|
|
const setDataInURL = (newFilter) => {
|
|
const query = QueryForDoctorsFilter(newFilter);
|
|
|
|
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}
|
|
setFilter={setFilter}
|
|
setDataInURL={setDataInURL}
|
|
>
|
|
<Button
|
|
className="!flex !ml-auto !w-fit !px-3 !py-1 !items-center !justify-start !gap-2 !cursor-pointer"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<LocationD />
|
|
<h1 className="text-[#525252] text-[16px] font-semibold">
|
|
{" "}
|
|
{filter?.state?.name || "استان"}
|
|
{" / "}
|
|
{filter?.city?.name || "شهر"}
|
|
</h1>
|
|
</Button>
|
|
</ModalSearchCity>
|
|
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
|
|
<SearchBar
|
|
filter={filter}
|
|
sendReq={sendReq}
|
|
setFilter={setFilter}
|
|
updateData={updateData}
|
|
setDataInURL={setDataInURL}
|
|
/>
|
|
<SortList
|
|
data={data}
|
|
filter={filter}
|
|
setData={setData}
|
|
updateData={updateData}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Head;
|