error handeling on the pagination

2025-10-22 17:38:29 +03:30
parent 74d142e86e
commit 34188ab366
9 changed files with 76 additions and 34 deletions
@@ -1,6 +1,7 @@
 import ItemDoctor from "@/app/component/ItemDoctor";
 import Pagination from "@/app/component/Pagination";
 import { QueryForDoctorsClinicReq } from "@/helper";
+import { getClinicDoctors } from "@/services/clinicApi";
 import { request } from "@/services/response";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -14,6 +15,7 @@ function List({
  setDoctors,
  totalPages,
  slug,
+  setTotalPage,
 }) {
  const [loading, setLoading] = useState(false);
  const router = useRouter();
@@ -31,7 +33,10 @@ function List({
      limit,
    };
    const doctors = await getClinicDoctors(slug, params);
-    setDoctors(doctors);
+    setDoctors(doctors.data); 
+    setTotalPage(doctors?.page?.total_pages || 1);
+    setPage(num);
+    
  };
  const doctorList = Array.isArray(doctors?.data) ? doctors.data : doctors;
  return (
@@ -44,7 +44,7 @@ function Head({ setDoctors, slug, filter, setFilter,setPage,setTotalPage }) {
  };


-  const updateData = (name, value, isReq) => {
+  const updateData = (name, value) => {
    const newFilter = { ...filter, [name]: value };
    setDataInURL(newFilter);
    setFilter(newFilter);
@@ -52,9 +52,11 @@ function Head({ setDoctors, slug, filter, setFilter,setPage,setTotalPage }) {
  };

  const sendReq = async (newFilter) => {
+    try {
    const data = newFilter || filter;
    let params = QueryForDoctorsClinicReq(data);

+    
    if (
      data?.name === data.specialty?.name ||
      data?.name === data.category?.name
@@ -64,12 +66,28 @@ function Head({ setDoctors, slug, filter, setFilter,setPage,setTotalPage }) {

    params.page = 1;
    params.limit = 50;
-    setTotalPage(data?.pages?.total_pages)

-    setPage(data?.pages?.current);
+    // دریافت دکترها از API
    const doctors = await getClinicDoctors(slug, params);
+
+    // تنظیم داده‌ها در state
    setDoctors(doctors);

+    // ✅ حالا که جواب API اومده، مقدار صفحات مشخصه
+    if (doctors?.page) {
+      setPage(doctors.page.current || 1);
+      setTotalPage(doctors.page.total_pages || 1);
+    } else {
+      setPage(1);
+      setTotalPage(1);
+    }
+
+    return doctors;
+  } catch (err) {
+    console.error("❌ خطا در sendReq:", err);
+    throw err;
+  }
+    
  };

  return (
@@ -81,6 +99,8 @@ function Head({ setDoctors, slug, filter, setFilter,setPage,setTotalPage }) {
        setFilter={setFilter}
        updateData={updateData}
        setDataInURL={setDataInURL}
+        setPage={setPage}
+        setTotalPage={setTotalPage}
      />
      <SortList
        filter={filter}
@@ -4,11 +4,12 @@ import { useRouter } from "next/navigation";
 import { clearDoctorClinicParams, clearFilterParams } from "@/helper";
 import { useState } from "react";

-function DeleteAllButton({slug, filter, sendReq, setFilter, handleClose }) {
+function DeleteAllButton({slug, filter, sendReq, setFilter, handleClose, setPage  }) {
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  
-  const resetFilter = () => {
+  const resetFilter = async() => {
+   try{
     setLoading(true);
    clearDoctorClinicParams(router,slug, [
      "category",
@@ -16,6 +17,7 @@ function DeleteAllButton({slug, filter, sendReq, setFilter, handleClose }) {
      "active",
      "gender",
      "degree",
+      "page"
    ]);

    const newFilter = {
@@ -28,11 +30,15 @@ function DeleteAllButton({slug, filter, sendReq, setFilter, handleClose }) {
        degree: "همه موارد",
      },
    };
-    sendReq(newFilter).finally(() => {
-      setLoading(false);
-      handleClose();
+     const res = await sendReq({ ...newFilter});
      setFilter(newFilter);
-    });
+      setPage(1);
+      handleClose(false);
+   }catch (err) {
+      console.error("❌ خطا در ریست فیلترها:", err);
+    } finally {
+      setLoading(false);
+    }
  };

  return (
@@ -1,4 +1,4 @@
-"use client";
+

 import { styleDefault } from "@/mui";
 import { Modal } from "@mui/material";
@@ -6,23 +6,28 @@ import { useState } from "react";
 import Content from "./Content";
 import ButtonApply from "./ButtonApply";
 import DeleteAllButton from "./DeleteAllButton";
+import { useParams } from "next/navigation";

 function FilterModal({
-  slug,
+  slug: propSlug,
  filter,
  sendReq,
  children,
  setFilter,
  updateData,
  setDataInURL,
+  setPage,
+  setTotalPage,
 }) {
  const [open, setOpen] = useState(false);
-
  const handleOpen = () => setOpen(true);
  const handleClose = () => {
    setOpen(false);
  }; 

+
+  const params = useParams()
+  const slug = propSlug || params?.slug;
  return (
    <>
      {/* Button Modal */}
@@ -42,6 +47,8 @@ function FilterModal({
              sendReq={sendReq}
              setFilter={setFilter}
              handleClose={handleClose}
+              setPage={setPage}
+              setTotalPage={setTotalPage}
            />
            <Content
              filter={filter}
@@ -5,7 +5,8 @@ import SendReq from "./SendReq";
 import SearchField from "./SearchField";
 import FilterModal from "../modal/FilterModal";

-function SearchBar({ slug,filter, sendReq, setFilter, updateData, setDataInURL }) {
+function SearchBar({ slug,filter, sendReq, setFilter, updateData, setDataInURL,setPage,setTotalPage }) {
+  
  return (
    <ButtonGroup
      variant="contained"
@@ -20,6 +21,8 @@ function SearchBar({ slug,filter, sendReq, setFilter, updateData, setDataInURL }
        setFilter={setFilter}
        updateData={updateData}
        setDataInURL={setDataInURL}
+        setPage={setPage}
+        setTotalPage={setTotalPage}
      >
        <Button
          color="secondary"
@@ -4,10 +4,12 @@ import FilterModal from "../modal/FilterModal";
 import FilterBtn from "./FilterBtn";
 import SelectSort from "./SelectSort";

-function SortList({ filter, sendReq, setFilter, updateData, setDataInURL }) {
+function SortList({ filter, sendReq, setFilter, updateData, setDataInURL,slug }) {
+
  return (
    <div className="flex flex-wrap items-center lg:!w-[25%] gap-[20px] gap-y-[12px] lg:gap-0">
      <FilterModal
+       slug={slug}
        filter={filter}
        sendReq={sendReq}
        setFilter={setFilter}
@@ -5,10 +5,10 @@ import List from "./List";
 import Head from "./head";
 import page from "@/app/panel/(layout)/turns/page";

-function Doctors({ slug, doctors, data, pages }) {
+function Doctors({ slug, doctors, pages }) {
  const [page, setPage] = useState(pages?.current || 1);

-  const [totalPage, setTotalPage] = useState(pages?.total_pages);
+  const [totalPage, setTotalPage] = useState(pages?.total_pages||1);

  const [filter, setFilter] = useState({});
  const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
@@ -32,6 +32,7 @@ function Doctors({ slug, doctors, data, pages }) {
        page={page}
        limit={50}
        setPage={setPage}
+        setTotalPage={setTotalPage}
      />
    </div>
  );
@@ -153,13 +153,10 @@ export function clearFilterParams(router, listRemove) {

  router.push(newUrl);
 }
-export function clearDoctorClinicParams(router,slug,listRemove){
-  const currentParams=new URLSearchParams(window.location.search);
+export function clearDoctorClinicParams(router,slug){
+ 
  const clinicslug=slug;
-  const keysToRemove=listRemove;
-  keysToRemove.forEach((key)=>currentParams.delete(key));
-  const queryString=currentParams.toString();
-  const newUrl=queryString? `/clinic/${clinicslug}?${queryString}`:`/clinic/${clinicslug}`;
+  const newUrl = `/clinic/${clinicslug}`;
  router.push(newUrl)
 }
 export const filterList = (data) => {
@@ -16,9 +16,10 @@ export async function getClinicDoctors(slug, params = {}) {
    }

    const json = await response.json();
-
-    const doctorsList = json?.data || json || [];
-    return Array.isArray(doctorsList) ? doctorsList : [];
+     return {
+      data: json?.data || [],
+      page: json?.page || json?.pages || { total_pages: 1, current: 1 },
+    };
  } catch (error) {
    console.error("خطا در دریافت دکترهای کلینیک:", error);
    return [];