round img of doctors && fix remove 'nobat724' value in city data for all pages && handle send req for filter clinics && filter list clinic for first time on load page && add component loading and handle it in page clinics

components/clinics/head/FilterButton.js

@@ -1,11 +1,27 @@
 import SearchD from "@/components/icons/SearchD";
+import { QueryForClinicsFilter } from "@/helper";
+import { request } from "@/services/response";
 import { Button } from "@mui/material";
 import { useState } from "react";
 
-function FilterButton({ setFilteredClinics }) {
+function FilterButton({ selected, setFilteredClinics }) {
   const [loading, setLoading] = useState(false);
+
   const filterData = () => {
-    setLoading(true)
+    setLoading(true);
+    const params = QueryForClinicsFilter(selected);
+
+    request
+      .getClinicList(params)
+      .then((res) => {
+        if (res.data) setFilteredClinics(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
   };
 
   return (
@@ -13,14 +29,14 @@ function FilterButton({ setFilteredClinics }) {
       onClick={filterData}
       loading={loading}
       className="
-          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
-          !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
-          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
-          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
-          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
-          !max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px] 
-          !max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px] 
-        "
+        !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center
+        !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
+        !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
+        !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
+        !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
+        !max-w-[38px] sm:!max-w-[44px] md:!max-w-[50px] lg:!max-w-[56px] 
+        !max-h-[38px] sm:!max-h-[44px] md:!max-h-[50px] lg:!max-h-[56px] 
+      "
     >
       <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px] grid place-items-center">
         {!loading && <SearchD />}

components/clinics/head/SearchBar.js

@@ -53,7 +53,10 @@ function SearchBar({
         placeholder="جستجوی تخصص"
         handleSearch={handleSearch}
       />
-      <FilterButton setFilteredClinics={setFilteredClinics} />
+      <FilterButton
+        selected={selected}
+        setFilteredClinics={setFilteredClinics}
+      />
     </ButtonGroup>
   );
 }