paginations ,limit=50

components/clinic/components/doctors/List.js

@@ -1,16 +1,52 @@
 import ItemDoctor from "@/app/component/ItemDoctor";
 import Pagination from "@/app/component/Pagination";
+import { QueryForDoctorsClinicReq } from "@/helper";
+import { request } from "@/services/response";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
-function List({ doctors }) {
+function List({
+  doctors,
+  setPage,
+  limit,
+  page,
+  filter,
+  setDoctors,
+  totalPages,
+  slug,
+}) {
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const changePage = async (_, num) => {
+    setLoading(true);
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set("page", num);
+    router.push(`/clinic/${slug}?${searchParams.toString()}`);
+
+    setPage(num);
+
+    let params = {
+      ...QueryForDoctorsClinicReq(filter),
+      current: num,
+      limit,
+    };
+    const doctors = await getClinicDoctors(slug, params);
+    setDoctors(doctors);
+  };
+  const doctorList = Array.isArray(doctors?.data) ? doctors.data : doctors;
   return (
     <>
       <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[40px] gap-[16px] md:gap-[20px] lg:gap-[24px]">
-        {doctors?.map((doctor) => (
+        {doctorList?.map((doctor) => (
           <ItemDoctor key={doctor.id} doctor={doctor} />
         ))}
       </ul>
       <div className="mt-[56px] flex justify-center">
-        <Pagination list={doctors} itemsPerPage={12} />
+        <Pagination
+          totalPages={totalPages}
+          page={page}
+          onPageChange={changePage}
+        />
       </div>
     </>
   );

components/clinic/components/doctors/head/index.js

@@ -1,5 +1,5 @@
 "use client ";
-import { useState } from "react";
+
 import SearchBar from "./search";
 import SortList from "./sortlist";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -8,9 +8,9 @@ import { QueryForClinicDoctorFilter, QueryForDoctorsClinicReq } from "@/helper";
 import { getClinicDoctors } from "@/services/clinicApi";
 
 
-function Head({ setDoctors, slug, filter, setFilter }) {
+function Head({ setDoctors, slug, filter, setFilter,setPage,setTotalPage }) {
   const searchParams = useSearchParams();
-  const [page, setPage] = useState(1);
+
   const router = useRouter();
 
   const fieldName = searchParams.get("specialty");
@@ -63,8 +63,10 @@ function Head({ setDoctors, slug, filter, setFilter }) {
     }
 
     params.page = 1;
-    params.limit = 12;
-    setPage(1);
+    params.limit =50;
+    setTotalPage(data?.pages?.total_pages)
+    
+    setPage(data?.pages?.current);
      const doctors = await getClinicDoctors(slug, params);
      setDoctors(doctors);
  
@@ -73,6 +75,7 @@ function Head({ setDoctors, slug, filter, setFilter }) {
   return (
     <div className="flex flex-col lg:flex-row items-start lg:items-center justify-center gap-[24px] lg:gap-[32px] w-full">
       <SearchBar
+        slug={slug}
         filter={filter}
         sendReq={sendReq}
         setFilter={setFilter}

components/clinic/components/doctors/head/modal/DeleteAllButton.js

@@ -1,16 +1,16 @@
 import CloseOrangeModal from "@/components/icons/CloseOrangeModal";
 import { Button, CircularProgress } from "@mui/material";
 import { useRouter } from "next/navigation";
-import { clearFilterParams } from "@/helper";
+import { clearDoctorClinicParams, clearFilterParams } from "@/helper";
 import { useState } from "react";
 
-function DeleteAllButton({ filter, sendReq, setFilter, handleClose }) {
+function DeleteAllButton({slug, filter, sendReq, setFilter, handleClose }) {
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
   const resetFilter = () => {
     setLoading(true);
-    clearFilterParams(router, [
+    clearDoctorClinicParams(router,slug, [
       "category",
       "specialty",
       "active",

components/clinic/components/doctors/head/modal/FilterModal.js

@@ -8,6 +8,7 @@ import ButtonApply from "./ButtonApply";
 import DeleteAllButton from "./DeleteAllButton";
 
 function FilterModal({
+  slug,
   filter,
   sendReq,
   children,
@@ -36,6 +37,7 @@ function FilterModal({
         >
           <div>
             <DeleteAllButton
+              slug={slug}
               filter={filter}
               sendReq={sendReq}
               setFilter={setFilter}

components/clinic/components/doctors/head/search/index.js

@@ -5,7 +5,7 @@ import SendReq from "./SendReq";
 import SearchField from "./SearchField";
 import FilterModal from "../modal/FilterModal";
 
-function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
+function SearchBar({ slug,filter, sendReq, setFilter, updateData, setDataInURL }) {
   return (
     <ButtonGroup
       variant="contained"
@@ -14,6 +14,7 @@ function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
         !h-[44px] sm:!h-[50px] md:!h-[57px] lg:!h-[64px]"
     >
       <FilterModal
+        slug={slug}
         filter={filter}
         sendReq={sendReq}
         setFilter={setFilter}

components/clinic/components/doctors/index.js

@@ -1,23 +1,38 @@
 "use client";
 
-import { searchOnList } from "@/helper";
 import { useState } from "react";
 import List from "./List";
 import Head from "./head";
-import { useSearchParams } from "next/navigation";
+import page from "@/app/panel/(layout)/turns/page";
+
+function Doctors({ slug, doctors, data, pages }) {
+  const [page, setPage] = useState(pages?.current || 1);
+
+  const [totalPage, setTotalPage] = useState(pages?.total_pages);
 
-function Doctors({slug , doctors }) {
-  const searchParams =useSearchParams()
-  const fieldName = searchParams.get("specialty");
   const [filter, setFilter] = useState({});
-    const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
-    
+  const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
 
   return (
     <div className="opacity-page">
-      <Head  setDoctors={setFilteredSpecialties} slug={slug } filter={filter}
-        setFilter={setFilter}/>
-      <List doctors={filteredSpecialties} setDoctors={setFilteredSpecialties} />
+      <Head
+        setDoctors={setFilteredSpecialties}
+        slug={slug}
+        filter={filter}
+        setFilter={setFilter}
+        setPage={setPage}
+        setTotalPage={setTotalPage}
+      />
+      <List
+        slug={slug}
+        totalPages={totalPage}
+        filter={filter}
+        doctors={filteredSpecialties}
+        setDoctors={setFilteredSpecialties}
+        page={page}
+        limit={50}
+        setPage={setPage}
+      />
     </div>
   );
 }