round img of doctors && fix remove 'nobat724' value in city data for all pages && handle send req for filter clinics && filter list clinic for first time on load page && add component loading and handle it in page clinics
This commit is contained in:
ehsan
@@ -1,11 +1,27 @@
|
||||
import SearchD from "@/components/icons/SearchD";
|
||||
import { QueryForClinicsFilter } from "@/helper";
|
||||
import { request } from "@/services/response";
|
||||
import { Button } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
|
||||
function FilterButton({ setFilteredClinics }) {
|
||||
function FilterButton({ selected, setFilteredClinics }) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const filterData = () => {
|
||||
setLoading(true)
|
||||
setLoading(true);
|
||||
const params = QueryForClinicsFilter(selected);
|
||||
|
||||
request
|
||||
.getClinicList(params)
|
||||
.then((res) => {
|
||||
if (res.data) setFilteredClinics(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -13,14 +29,14 @@ function FilterButton({ setFilteredClinics }) {
|
||||
onClick={filterData}
|
||||
loading={loading}
|
||||
className="
|
||||
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
|
||||
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
|
||||
!h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px]
|
||||
!min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px]
|
||||
!min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px]
|
||||
!max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px]
|
||||
!max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px]
|
||||
"
|
||||
!rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
|
||||
!w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px]
|
||||
!h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px]
|
||||
!min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px]
|
||||
!min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px]
|
||||
!max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px]
|
||||
!max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px]
|
||||
"
|
||||
>
|
||||
<div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px] grid place-items-center">
|
||||
{!loading && <SearchD />}
|
||||
|
||||
@@ -53,7 +53,10 @@ function SearchBar({
|
||||
placeholder="جستجوی تخصص"
|
||||
handleSearch={handleSearch}
|
||||
/>
|
||||
<FilterButton setFilteredClinics={setFilteredClinics} />
|
||||
<FilterButton
|
||||
selected={selected}
|
||||
setFilteredClinics={setFilteredClinics}
|
||||
/>
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,14 +6,28 @@ import List from "./list";
|
||||
import SearchBar from "./head/SearchBar";
|
||||
import HeadPageList from "@/app/component/head";
|
||||
import specialtiesData from "@/data/specialties.json";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
// Data
|
||||
import states from "@/data/state.json";
|
||||
import cities from "@/data/city.json";
|
||||
|
||||
function ClinicsPage({ clinics, matchedCity, matchedState }) {
|
||||
const [filteredClinics, setFilteredClinics] = useState(clinics);
|
||||
const searchParams = useSearchParams();
|
||||
const [filteredClinics, setFilteredClinics] = useState(clinics.data);
|
||||
|
||||
const selectedState = searchParams.get("state") || matchedState?.name;
|
||||
const selectedCity =
|
||||
searchParams.get("city") ||
|
||||
(matchedCity?.name && matchedCity?.id !== "600"
|
||||
? matchedCity?.name
|
||||
: false);
|
||||
|
||||
const [selected, setSelected] = useState({
|
||||
province: matchedState?.name || "",
|
||||
city: matchedCity?.name || "",
|
||||
specialty: "",
|
||||
province:
|
||||
selectedState && states.find((item) => item.name === selectedState),
|
||||
city: selectedCity && cities.find((item) => item.name === selectedCity),
|
||||
specialty: searchParams.get("specialty") || "",
|
||||
});
|
||||
|
||||
return (
|
||||
@@ -30,7 +44,13 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
|
||||
setFilteredClinics={setFilteredClinics}
|
||||
/>
|
||||
</HeadPageList>
|
||||
<List selected={selected} clinics={filteredClinics} />
|
||||
<List
|
||||
limit={12}
|
||||
selected={selected}
|
||||
pages={clinics.page}
|
||||
clinics={filteredClinics}
|
||||
setFilteredClinics={setFilteredClinics}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,25 +7,26 @@ import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function ItemClinic({ data }) {
|
||||
function ItemClinic({ data, loading }) {
|
||||
return (
|
||||
<li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<CircularLoading width={60} height={60}>
|
||||
<CircularLoading loading={loading} width={60} height={60}>
|
||||
<Image
|
||||
width={60}
|
||||
height={60}
|
||||
className="object-cover rounded-full w-[64px] md:w-[68px] lg:w-[72px] h-[64px] md:h-[68px] lg:h-[72px]"
|
||||
src={data.clinic_logo[0].url || ""}
|
||||
alt="img clinic"
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-2">
|
||||
<TextLoading width={100} height={18}>
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<h3 className="text-[#3B3B3B] text-[14px] font-bold">
|
||||
{data.title}
|
||||
</h3>
|
||||
</TextLoading>
|
||||
<TextLoading width={60} height={18}>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.doctors} پزشک
|
||||
</p>
|
||||
@@ -35,7 +36,7 @@ function ItemClinic({ data }) {
|
||||
<div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
|
||||
<div className="flex items-start justify-start gap-0.5">
|
||||
<LocationClinic />
|
||||
<TextLoading width={150} height={18}>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
{data.location}
|
||||
</p>
|
||||
@@ -43,7 +44,7 @@ function ItemClinic({ data }) {
|
||||
</div>
|
||||
<div className="flex items-start justify-start gap-0.5 ml-[64px]">
|
||||
<ClockClinic />
|
||||
<TextLoading width={120} height={18}>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
ساعت کاری: {data.hours_of_work}
|
||||
</p>
|
||||
|
||||
@@ -1,9 +1,35 @@
|
||||
import Pageguide from "@/app/component/Pageguide";
|
||||
import { useState } from "react";
|
||||
import ItemClinic from "./ItemClinic";
|
||||
import Pagination from "@/app/component/Pagination";
|
||||
import { QueryForClinicsFilter } from "@/helper";
|
||||
import Pageguide from "@/app/component/Pageguide";
|
||||
import PaginationContent from "@/app/component/PaginationContent";
|
||||
import { request } from "@/services/response";
|
||||
|
||||
function List({ selected, clinics }) {
|
||||
const listPage = ["کلینیک ها", selected?.city || ""];
|
||||
function List({ limit, selected, clinics, pages, setFilteredClinics }) {
|
||||
const listPage = ["کلینیک ها", selected?.city?.name || ""];
|
||||
const [page, setPage] = useState(pages?.currentPage);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const changePage = (_, num) => {
|
||||
setLoading(true);
|
||||
|
||||
setPage(num);
|
||||
const params = {
|
||||
...QueryForClinicsFilter(selected),
|
||||
page: num,
|
||||
limit,
|
||||
};
|
||||
|
||||
request
|
||||
.getClinicList(params)
|
||||
.then((res) => {
|
||||
if (res.data) setFilteredClinics(res.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="padding-responsive pt-[20px]">
|
||||
@@ -14,7 +40,7 @@ function List({ selected, clinics }) {
|
||||
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
|
||||
>
|
||||
{clinics.map((item) => (
|
||||
<ItemClinic data={item} key={item.id} />
|
||||
<ItemClinic loading={loading} data={item} key={item.id} />
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
@@ -23,7 +49,15 @@ function List({ selected, clinics }) {
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-[48px] flex justify-center">
|
||||
<Pagination list={clinics} itemsPerPage={12} />
|
||||
<PaginationContent
|
||||
page={page}
|
||||
limit={limit}
|
||||
list={clinics}
|
||||
itemsPerPage={12}
|
||||
setPage={setPage}
|
||||
pageDetail={pages}
|
||||
changePage={changePage}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user