79 lines
2.0 KiB
JavaScript
79 lines
2.0 KiB
JavaScript
import { useState } from "react";
|
|
import ItemClinic from "./ItemClinic";
|
|
import { QueryForClinicsFilter } from "@/helper";
|
|
import Pageguide from "@/app/component/Pageguide";
|
|
import PaginationContent from "@/app/component/PaginationContent";
|
|
import { request } from "@/services/response";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
function List({
|
|
page,
|
|
limit,
|
|
pages,
|
|
setPage,
|
|
clinics,
|
|
selected,
|
|
setFilteredClinics,
|
|
}) {
|
|
const listPage = ["کلینیک ها", selected?.city?.name || ""];
|
|
const [loading, setLoading] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const changePage = (_, num) => {
|
|
setLoading(true);
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
searchParams.set("page", num);
|
|
router.push(`?${searchParams.toString()}`);
|
|
|
|
setPage(num);
|
|
const params = {
|
|
...QueryForClinicsFilter(selected),
|
|
page: num,
|
|
limit,
|
|
};
|
|
|
|
request
|
|
.getClinicList(params)
|
|
.then((res) => {
|
|
if (res.data) setFilteredClinics(res.data);
|
|
})
|
|
.catch(() => {})
|
|
//
|
|
.finally(() => setLoading(false));
|
|
};
|
|
|
|
return (
|
|
<div className="padding-responsive pt-[20px]">
|
|
<Pageguide list={listPage} />
|
|
{clinics && clinics.length ? (
|
|
<ul
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px] 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}
|
|
loading={loading}
|
|
setFilteredClinics={setFilteredClinics}
|
|
/>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<div className="text-center py-10 text-gray-500">
|
|
کلینیکی با این عنوان یافت نشد!
|
|
</div>
|
|
)}
|
|
<div className="mt-[48px] flex justify-center">
|
|
<PaginationContent
|
|
page={page}
|
|
limit={limit}
|
|
pageDetail={pages}
|
|
changePage={changePage}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default List;
|