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

components/clinics/list/ItemClinic.js

@@ -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>

components/clinics/list/index.js

@@ -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>
   );