handel filter clinic and added changenumber function

components/clinic/components/doctors/List.js

@@ -5,7 +5,7 @@ function List({ 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) => (
+        {doctors?.map((doctor) => (
           <ItemDoctor key={doctor.id} doctor={doctor} />
         ))}
       </ul>

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

@@ -1,20 +1,22 @@
+"use client ";
 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 { QueryForDoctorsFilter } from "@/helper";
+import { QueryForClinicDoctorFilter, QueryForDoctorsClinicReq } from "@/helper";
+import { getClinicDoctors } from "@/services/clinicApi";
 
-function Head() {
+
+function Head({ setDoctors, slug, filter, setFilter }) {
   const searchParams = useSearchParams();
   const [page, setPage] = useState(1);
-  const [doctors, setDoctors] = useState();
   const router = useRouter();
 
   const fieldName = searchParams.get("specialty");
 
   const setDataInURL = (newFilter) => {
-    const query = QueryForDoctorsFilter(newFilter);
+    const query = QueryForClinicDoctorFilter(newFilter);
 
     const searchParams = new URLSearchParams(query).toString();
     router.push(`?${searchParams}`);
@@ -40,38 +42,32 @@ function Head() {
     name:
       searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
   };
-  const [filter, setFilter] = useState(defaultFilter);
+
 
   const updateData = (name, value, isReq) => {
     const newFilter = { ...filter, [name]: value };
     setDataInURL(newFilter);
     setFilter(newFilter);
-    isReq && sendReq(newFilter);
+    sendReq(newFilter);
   };
 
-  const sendReq = (newFilter) => {
-    // const data = newFilter || filter;
-    // const params = QueryForDoctorsReq(data);
-    // let filteredName = params;
-    // if (
-    //   data?.name === data.specialty?.name ||
-    //   data?.name === data.category?.name
-    // ) {
-    //   filteredName.name = "";
-    //   delete filteredName.name;
-    // }
-    // filteredName.page = 1;
-    // filteredName.limit = 12;
-    // setPage(1);
-    // return request
-    //   .getDoctors(filteredName)
-    //   .then((res) => {
-    //     setDoctors(res.data);
-    //     return res;
-    //   })
-    //   .catch((err) => {
-    //     throw err;
-    //   });
+  const sendReq = async (newFilter) => {
+    const data = newFilter || filter;
+    let params = QueryForDoctorsClinicReq(data);
+
+    if (
+      data?.name === data.specialty?.name ||
+      data?.name === data.category?.name
+    ) {
+      delete params.name;
+    }
+
+    params.page = 1;
+    params.limit = 12;
+    setPage(1);
+     const doctors = await getClinicDoctors(slug, params);
+     setDoctors(doctors);
+ 
   };
 
   return (

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

@@ -5,15 +5,12 @@ function ButtonApply({ sendReq, setOpen }) {
   const [loading, setLoading] = useState(false);
 
   const handleClick = () => {
-    setLoading(false);
-    setOpen(false);
-    
-    // setLoading(true);
+    setLoading(true);
 
-    // sendReq().finally(() => {
-    //   setOpen(false);
-    //   setLoading(false);
-    // });
+    setOpen(false);
+    sendReq().finally(() => {
+      setLoading(false);
+    });
   };
 
   return (

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

@@ -48,6 +48,7 @@ function FilterModal({
               setDataInURL={setDataInURL}
             />
           </div>
+          
           <ButtonApply sendReq={sendReq} setOpen={setOpen} />
         </div>
       </Modal>

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

@@ -26,16 +26,16 @@ function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
   // };
 
   const filterData = () => {
-    setLoading(false);
+    setLoading(true);
     
     // setLoading(true);
     // // const newFilter = checkName();
     // // setFilter(filter);
     // // setDataInURL(filter);
 
-    // sendReq(filter).finally(() => {
-    //   setLoading(false);
-    // });
+    sendReq(filter).finally(() => {
+      setLoading(false);
+    });
   };
 
   return (

components/clinic/components/doctors/index.js

@@ -4,25 +4,20 @@ import { searchOnList } from "@/helper";
 import { useState } from "react";
 import List from "./List";
 import Head from "./head";
+import { useSearchParams } from "next/navigation";
 
-function Doctors({ doctors }) {
-  const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
-
-  const handleSearch = (value) =>
-    setFilteredSpecialties(searchOnList(doctors, value, "name"));
+function Doctors({slug , doctors }) {
+  const searchParams =useSearchParams()
+  const fieldName = searchParams.get("specialty");
+  const [filter, setFilter] = useState({});
+    const [filteredSpecialties, setFilteredSpecialties] = useState(doctors);
+    
 
   return (
     <div className="opacity-page">
-      {/* <div className="flex justify-center">
-        <SmSearch
-          data={doctors}
-          handleSearch={handleSearch}
-          placeholder="جستجوی پزشک یا تخصص"
-        />
-      </div> */}
-
-      <Head />
-      <List doctors={filteredSpecialties} />
+      <Head  setDoctors={setFilteredSpecialties} slug={slug } filter={filter}
+        setFilter={setFilter}/>
+      <List doctors={filteredSpecialties} setDoctors={setFilteredSpecialties} />
     </div>
   );
 }

components/clinic/index.js

@@ -9,14 +9,14 @@ import Tabs from "@/app/component/Tabs";
 
 const listTab = ["درباره کلینیک", "اطلاعات تماس", "پزشک ها"];
 
-function ClinicPage({ data, doctors }) {
+function ClinicPage({ data, doctors,slug }) {
   const [value, setValue] = useState(0);
   const handleChange = (_, newValue) => setValue(newValue);
 
   const Components = [
     <About data={data} />,
     <Contact data={data} />,
-    <Doctors doctors={doctors} />,
+    <Doctors doctors={doctors} slug={slug} />,
   ];
 
   return (