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