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

components/doctors/head/index.js

@@ -1,53 +1,14 @@
-import { useState } from "react";
-
 import SearchBar from "../search";
 import SortList from "../sortlist";
-import { useRouter, useSearchParams } from "next/navigation";
-import specialties from "@/data/specialties.json";
+import { useRouter } from "next/navigation";
 
 // Data
-import states from "@/data/state.json";
-import cities from "@/data/city.json";
 import { QueryForDoctorsFilter, QueryForDoctorsReq } from "@/helper";
 import { request } from "@/services/response";
 import FilterLocate from "./FilterLocate";
 
-function Head({ matchedCity, matchedState, setDoctors }) {
-  const searchParams = useSearchParams();
+function Head({ filter, setFilter, setPage, setDoctors }) {
   const router = useRouter();
-  const fieldName = searchParams.get("specialty");
-
-  const findItem = (key, name) =>
-    specialties.find((item) => item[key] === name);
-  const isParent =
-    findItem("name", fieldName) && findItem("name", fieldName).parent;
-
-  const selectedState = searchParams.get("state") || matchedState?.name;
-  const selectedCity =
-    searchParams.get("city") ||
-    (matchedCity?.name && matchedCity?.id !== "600"
-      ? matchedCity?.name
-      : false);
-
-  const valCategory = isParent
-    ? findItem("id", isParent)
-    : findItem("name", fieldName);
-  const valSpecialty = isParent && findItem("name", fieldName);
-
-  const defaultFilter = {
-    state: selectedState && states.find((item) => item.name === selectedState),
-    city: selectedCity && cities.find((item) => item.name === selectedCity),
-    category: valCategory,
-    specialty: valSpecialty,
-    active: searchParams.get("active") || 0,
-    gender: searchParams.get("gender") || "هر دو",
-    degree: searchParams.get("degree") || "همه موارد",
-    sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
-    name:
-      searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
-  };
-
-  const [filter, setFilter] = useState(defaultFilter);
 
   const setDataInURL = (newFilter) => {
     const query = QueryForDoctorsFilter(newFilter);
@@ -74,6 +35,10 @@ function Head({ matchedCity, matchedState, setDoctors }) {
       delete filteredName.name;
     }
 
+    filteredName.page = 1;
+    filteredName.limit = 12;
+    setPage(1);
+
     return request
       .getDoctors(filteredName)
       .then((res) => {
@@ -89,6 +54,7 @@ function Head({ matchedCity, matchedState, setDoctors }) {
     <div className="flex justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px] flex-col items-center mt-0 md:mt-[40px] lg:mt-[90px]">
       <FilterLocate
         filter={filter}
+        setPage={setPage}
         sendReq={sendReq}
         setFilter={setFilter}
         setDataInURL={setDataInURL}

components/doctors/index.js

@@ -2,21 +2,70 @@
 
 import { useState } from "react";
 import ListDoctors from "./listDoctors";
-
-// Data
+import { useSearchParams } from "next/navigation";
 import Head from "./head";
+import specialties from "@/data/specialties.json";
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
 
 function DoctorsPage({ matchedCity, matchedState, list }) {
-  const [doctors, setDoctors] = useState(list);
+  const searchParams = useSearchParams();
+  const [page, setPage] = useState(list?.page?.currentPage);
+  const [doctors, setDoctors] = useState(list.data);
+  const fieldName = searchParams.get("specialty");
+
+  const findItem = (key, name) =>
+    specialties.find((item) => item[key] === name);
+  const isParent =
+    findItem("name", fieldName) && findItem("name", fieldName).parent;
+
+  const selectedState = searchParams.get("state") || matchedState?.name;
+  const selectedCity =
+    searchParams.get("city") ||
+    (matchedCity?.name && matchedCity?.id !== "600"
+      ? matchedCity?.name
+      : false);
+
+  const valCategory = isParent
+    ? findItem("id", isParent)
+    : findItem("name", fieldName);
+  const valSpecialty = isParent && findItem("name", fieldName);
+
+  const defaultFilter = {
+    state: selectedState && states.find((item) => item.name === selectedState),
+    city: selectedCity && cities.find((item) => item.name === selectedCity),
+    category: valCategory,
+    specialty: valSpecialty,
+    active: searchParams.get("active") || 0,
+    gender: searchParams.get("gender") || "هر دو",
+    degree: searchParams.get("degree") || "همه موارد",
+    sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
+    name:
+      searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
+  };
+
+  const [filter, setFilter] = useState(defaultFilter);
 
   return (
     <div className="pt-[95px] sm:pt-[120px] padding-responsive">
       <Head
+        limit={12}
+        filter={filter}
+        setPage={setPage}
+        setFilter={setFilter}
         setDoctors={setDoctors}
         matchedCity={matchedCity}
         matchedState={matchedState}
       />
-      <ListDoctors doctors={doctors} setDoctors={setDoctors} />
+      <ListDoctors
+        limit={12}
+        data={list}
+        page={page}
+        filter={filter}
+        setPage={setPage}
+        doctors={doctors}
+        setDoctors={setDoctors}
+      />
     </div>
   );
 }

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