add state of page in url, add location and working_days on list in clinics page, fix update list clinic with page and limit value, hide pagination when list of clinic is empty, round image of doctor and appo in doctor item

components/clinics/head/FilterButton.js

@@ -1,13 +1,21 @@
 import { useState } from "react";
 import { Button } from "@mui/material";
 import SearchD from "@/components/icons/SearchD";
+import { useRouter } from "next/navigation";
 
-function FilterButton({ filterData }) {
+function FilterButton({ limit, selected, filterData }) {
+  const router = useRouter();
   const [loading, setLoading] = useState(false);
 
   const sendReq = () => {
     setLoading(true);
-    filterData().finally(() => setLoading(false));
+    const newSelected = { ...selected, page: 1, limit };
+    filterData(newSelected).finally(() => {
+      setLoading(false);
+      const searchParams = new URLSearchParams(window.location.search);
+      searchParams.set("page", 1);
+      router.push(`?${searchParams.toString()}`);
+    });
   };
 
   return (

components/clinics/head/SearchBar.js

@@ -12,6 +12,7 @@ import { request } from "@/services/response";
 
 function SearchBar({
   state,
+  limit,
   selected,
   specialties,
   setSelected,
@@ -59,6 +60,7 @@ function SearchBar({
     >
       <ModalSearchCity
         open={open}
+        limit={limit}
         state={state}
         setOpen={setOpen}
         selected={selected}
@@ -73,7 +75,7 @@ function SearchBar({
         placeholder="جستجوی تخصص"
         handleSearch={handleSearch}
       />
-      <FilterButton filterData={filterData} />
+      <FilterButton limit={limit} selected={selected} filterData={filterData} />
     </ButtonGroup>
   );
 }

components/clinics/head/filter/Content.js

@@ -1,13 +1,14 @@
-import { Button } from "@mui/material";
+import { useState } from "react";
 
-// Icon
+import { Button } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
 import AutoComplete from "./AutoComplete";
-import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 function Content({
   state,
+  limit,
   states,
   selected,
   updateData,
@@ -16,6 +17,7 @@ function Content({
   filteredCities,
   handleSearch,
 }) {
+  const router = useRouter();
   const [loading, setLoading] = useState(false);
   const listboxProps = {
     style: {
@@ -27,8 +29,12 @@ function Content({
   const handleFilter = () => {
     handleSearch && handleSearch("");
     setLoading(true);
-    filterData().finally(() => {
+    const newSelected = { ...selected, page: 1, limit };
+    filterData(newSelected).finally(() => {
       handleClose();
+      const searchParams = new URLSearchParams(window.location.search);
+      searchParams.set("page", 1);
+      router.push(`?${searchParams.toString()}`);
       setLoading(false);
     });
   };

components/clinics/head/filter/index.js

@@ -13,6 +13,7 @@ import { useRouter } from "next/navigation";
 function ModalSearchCity({
   open,
   state,
+  limit,
   setOpen,
   children,
   selected,
@@ -67,6 +68,7 @@ function ModalSearchCity({
       <Modal open={open} onClose={handleClose}>
         <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
           <Content
+            limit={limit}
             state={state}
             states={states}
             selected={selected}

components/clinics/index.js

@@ -14,7 +14,7 @@ import cities from "@/data/city.json";
 
 function ClinicsPage({ clinics, matchedCity, matchedState }) {
   const searchParams = useSearchParams();
-  const [filteredClinics, setFilteredClinics] = useState(clinics.data);
+  const [filteredClinics, setFilteredClinics] = useState(clinics?.data);
 
   const selectedState = searchParams.get("state") || matchedState?.name;
   const selectedCity =
@@ -37,6 +37,7 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
         detail="در قسمت زیر می توانید کلینیک مورد نظر خود را جستجو نمایید"
       >
         <SearchBar
+          limit={12}
           selected={selected}
           state={matchedState}
           setSelected={setSelected}
@@ -47,7 +48,7 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
       <List
         limit={12}
         selected={selected}
-        pages={clinics.page}
+        pages={clinics?.page || []}
         clinics={filteredClinics}
         setFilteredClinics={setFilteredClinics}
       />

components/clinics/list/ItemClinic.js

@@ -48,7 +48,7 @@ function ItemClinic({ setFilteredClinics, data, loading }) {
           <LocationClinic />
           <TextLoading loading={loading} width={150} height={18}>
             <p className="text-[#7E7E7E] text-[12px] font-normal">
-              {data.location}
+              {data.address}
             </p>
           </TextLoading>
         </div>
@@ -56,7 +56,7 @@ function ItemClinic({ setFilteredClinics, data, loading }) {
           <ClockClinic />
           <TextLoading loading={loading} width={120} height={18}>
             <p className="text-[#7E7E7E] text-[12px] font-normal">
-              ساعت کاری: {data.hours_of_work}
+              ساعت کاری: {data.field_working_days}
             </p>
           </TextLoading>
         </div>

components/clinics/list/index.js

@@ -4,14 +4,19 @@ import { QueryForClinicsFilter } from "@/helper";
 import Pageguide from "@/app/component/Pageguide";
 import PaginationContent from "@/app/component/PaginationContent";
 import { request } from "@/services/response";
+import { useRouter } from "next/navigation";
 
 function List({ limit, selected, clinics, pages, setFilteredClinics }) {
   const listPage = ["کلینیک ها", selected?.city?.name || ""];
   const [page, setPage] = useState(pages?.currentPage);
   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);
     const params = {