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}