handle download poster and qrcode, fix to show timestamp, add pagination to doctors page

components/doctors/listDoctors/index.js

@@ -1,8 +1,57 @@
-import doctorList from "@/data/doctors.json";
-import Pagination from "@/app/component/Pagination";
+import { useState } from "react";
 import ItemDoctor from "@/app/component/ItemDoctor";
+import PaginationContent from "@/app/component/PaginationContent";
+import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
+import { request } from "@/services/response";
+import { useRouter } from "next/navigation";
+
+function ListDoctors({
+  data,
+  page,
+  limit,
+  filter,
+  doctors,
+  setPage,
+  setDoctors,
+}) {
+  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);
+    let params = {
+      ...QueryForDoctorsReq(filter),
+      page: num,
+      limit,
+    };
+    if (
+      data?.name === data.specialty?.name ||
+      data?.name === data.category?.name
+    ) {
+      params.name = "";
+      delete params.name;
+    }
+
+    console.log(params);
+
+    request
+      .getDoctors(params)
+      .then((res) => {
+        console.log(res);
+
+        if (res.data) setDoctors(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+      .finally(() => setLoading(false));
+  };
 
-function ListDoctors({ doctors, setDoctors }) {
   return (
     <>
       <div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
@@ -12,6 +61,7 @@ function ListDoctors({ doctors, setDoctors }) {
               <ItemDoctor
                 key={doctor.id}
                 doctor={doctor}
+                loading={loading}
                 setDoctors={setDoctors}
               />
             ))}
@@ -22,8 +72,13 @@ function ListDoctors({ doctors, setDoctors }) {
           </p>
         )}
       </div>
-      <div className="mt-[56px] flex justify-center">
-        <Pagination list={doctorList} itemsPerPage={12} />
+      <div className="mt-[48px] flex justify-center">
+        <PaginationContent
+          page={page}
+          limit={limit}
+          changePage={changePage}
+          pageDetail={data?.page || []}
+        />
       </div>
     </>
   );