update field doctors, cities, states and specialties

components/clinic/components/about/images/List.js

@@ -4,6 +4,8 @@ import Img from "./Img";
 
 function List({ data }) {
   const images_clinic = data.images_clinic;
+  console.log(data);
+  
 
   return (
     <div className="hidden w-full md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">

components/clinics/head/AutoSearch.js

@@ -0,0 +1,105 @@
+import { Autocomplete, TextField } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+
+function AutoSearch({
+  data,
+  noneBg,
+  inputValue,
+  placeholder,
+  handleSearch,
+  setInputValue,
+  setSelectedOption,
+  debounce = 500,
+}) {
+  const typingTimeoutRef = useRef(null);
+  const [localInput, setLocalInput] = useState(inputValue || "");
+
+  useEffect(() => {
+    setLocalInput(inputValue || "");
+  }, [inputValue]);
+
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    };
+  }, []);
+
+  const onInputChange = (_, newInputValue) => {
+    setLocalInput(newInputValue);
+
+    if (setInputValue) setInputValue(newInputValue);
+
+    if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    typingTimeoutRef.current = setTimeout(() => {
+      handleSearch(newInputValue);
+    }, debounce);
+  };
+
+  const onChange = (_, newValue) => {
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = null;
+    }
+
+    const val = newValue
+      ? typeof newValue === "string"
+        ? newValue
+        : newValue.name
+      : "";
+    setLocalInput(val);
+    setSelectedOption && setSelectedOption(newValue);
+    handleSearch(val);
+    if (setInputValue) setInputValue(val);
+  };
+
+  return (
+    <Autocomplete
+      freeSolo
+      options={data}
+      getOptionLabel={(option) =>
+        typeof option === "string" ? option : option.name
+      }
+      disableClearable
+      inputValue={localInput}
+      className="!w-full"
+      onInputChange={onInputChange}
+      onChange={onChange}
+      renderOption={(props, option) => (
+        <li {...props} key={option.id}>
+          {option.name}
+        </li>
+      )}
+      sx={{
+        "& .MuiAutocomplete-input": {
+          background: noneBg ? "" : "#ffffff !important",
+        },
+      }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          variant="standard"
+          placeholder={placeholder}
+          dir="rtl"
+          InputProps={{
+            ...params.InputProps,
+            disableUnderline: true,
+            style: { height: "100%" },
+          }}
+          sx={{
+            background: "transparent !important",
+            "& .MuiInputBase-input": {
+              background: "#FAFAFA",
+              color: "#6C757D",
+              padding: "0 16px",
+              fontSize: "14px",
+              fontFamily: "inherit",
+            },
+          }}
+          className="!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal"
+        />
+      )}
+    />
+  );
+}
+
+export default AutoSearch;

components/clinics/head/FilterButton.js

@@ -0,0 +1,33 @@
+import SearchD from "@/components/icons/SearchD";
+import { Button } from "@mui/material";
+import { useState } from "react";
+
+function FilterButton({ setFilteredClinics }) {
+  const [loading, setLoading] = useState(false);
+  const filterData = () => {
+    setLoading(true)
+  };
+
+  return (
+    <Button
+      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] 
+        "
+    >
+      <div className="w-[24px] h-[24px] min-w-[24px] min-h-[24px] grid place-items-center">
+        {!loading && <SearchD />}
+      </div>
+      <SearchD />
+    </Button>
+  );
+}
+
+export default FilterButton;

components/clinics/head/SearchBar.js

@@ -1,18 +1,34 @@
-import { Button, ButtonGroup, TextField } from "@mui/material";
-import SearchD from "@/components/icons/SearchD";
+import { ButtonGroup } from "@mui/material";
 import { useState } from "react";
 import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
-import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
 import ModalSearchCity from "@/components/home/search/modal";
+import AutoSearch from "./AutoSearch";
+import { useRouter } from "next/navigation";
+import FilterButton from "./FilterButton";
 
 function SearchBar({
-  selected,
-  setSelected,
-  specialties,
   state,
-  handleSearch,
+  selected,
+  specialties,
+  setSelected,
+  setFilteredClinics,
 }) {
   const [open, setOpen] = useState(false);
+  const router = useRouter();
+
+  const handleSearch = (e) => {
+    const specialty = specialties.find((item) => item.name === e);
+    const searchParams = new URLSearchParams(window.location.search);
+
+    if (specialty) {
+      searchParams.set("specialty", specialty.name);
+      setSelected({ ...selected, specialty: specialty.name });
+    } else {
+      e ? searchParams.set("specialty", e) : searchParams.delete("specialty");
+      setSelected({ ...selected, specialty: e });
+    }
+    router.push(`?${searchParams.toString()}`);
+  };
 
   return (
     <ButtonGroup
@@ -28,29 +44,16 @@ function SearchBar({
         setOpen={setOpen}
         selected={selected}
         setSelected={setSelected}
-        // handleSearch={handleSearch}
       >
         <ButtonFilter setOpen={setOpen} selected={selected} />
       </ModalSearchCity>
-      <AutoCompleteSearch
+      <AutoSearch
         data={specialties}
+        inputValue={selected.specialty}
         placeholder="جستجوی تخصص"
         handleSearch={handleSearch}
       />
-      <Button
-        onClick={handleSearch}
-        className="
-          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
-          !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] 
-        "
-      >
-        <SearchD />
-      </Button>
+      <FilterButton setFilteredClinics={setFilteredClinics} />
     </ButtonGroup>
   );
 }

components/clinics/index.js

@@ -5,25 +5,17 @@ import { useState } from "react";
 import List from "./list";
 import SearchBar from "./head/SearchBar";
 import HeadPageList from "@/app/component/head";
-import { useRouter } from "next/navigation";
 import specialtiesData from "@/data/specialties.json";
 
 function ClinicsPage({ clinics, matchedCity, matchedState }) {
-  const router = useRouter();
   const [filteredClinics, setFilteredClinics] = useState(clinics);
 
   const [selected, setSelected] = useState({
     province: matchedState?.name || "",
     city: matchedCity?.name || "",
+    specialty: "",
   });
 
-  const handleSearch = (value) => {
-    // const current = new URLSearchParams(window.location.search);
-    // current.set("search", value);
-    // const queryString = current.toString();
-    // router.push(`/clinics?${queryString}`);
-  };
-
   return (
     <div>
       <HeadPageList
@@ -34,8 +26,8 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
           selected={selected}
           state={matchedState}
           setSelected={setSelected}
-          handleSearch={handleSearch}
           specialties={specialtiesData}
+          setFilteredClinics={setFilteredClinics}
         />
       </HeadPageList>
       <List selected={selected} clinics={filteredClinics} />

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -55,7 +55,7 @@ function Chart({ comments, doctor }) {
         <ul className="flex w-full flex-col items-start justify-start gap-1.5 lg:w-fit">
           {Object.values(doctor?.average_rate?.averages).map((item, idx) => (
             <TextLoading width="full" key={idx} height={20}>
-              <ProgressDetail data={item} />
+              <ProgressDetail data={item} idx={idx} />
             </TextLoading>
           ))}
         </ul>

components/doctors/search/AutoComplete.js

@@ -5,22 +5,20 @@ function AutoComplete({
   data,
   noneBg,
   clearText,
-  inputValue, // مقدار کنترل‌شده از والد (اختیاری)
+  inputValue,
   placeholder,
-  handleSearch, // تابعی که باید با مقدار جستجو صدا زده بشه
-  setInputValue, // اختیاری: اگه والد دوست داره همون‌وقت مقدار رو بگیره
+  handleSearch,
+  setInputValue,
   setSelectedOption,
-  debounce = 500, // قابل تنظیم
+  debounce = 500,
 }) {
   const typingTimeoutRef = useRef(null);
   const [localInput, setLocalInput] = useState(inputValue || "");
 
-  // همگام‌سازی وقتی والد مقدار کنترل‌شده رو تغییر میده (مثلاً بعد از انتخاب گزینه)
   useEffect(() => {
     setLocalInput(inputValue || "");
   }, [inputValue]);
 
-  // پاک‌کردن تایمر هنگام unmount
   useEffect(() => {
     return () => {
       if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
@@ -28,13 +26,10 @@ function AutoComplete({
   }, []);
 
   const onInputChange = (_, newInputValue) => {
-    // نمایش آنی تایپ کاربر
     setLocalInput(newInputValue);
 
-    // اختیاری: اگر والد خواست همون‌جا مقدار رو بگیره
     if (setInputValue) setInputValue(newInputValue);
 
-    // پاک کردن تایمر قبلی و ست کردن تایمر جدید برای debounce
     if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
     typingTimeoutRef.current = setTimeout(() => {
       handleSearch(newInputValue);
@@ -42,7 +37,6 @@ function AutoComplete({
   };
 
   const onChange = (_, newValue) => {
-    // انتخاب از لیست — مقدار رو فوراً پردازش کن
     if (typingTimeoutRef.current) {
       clearTimeout(typingTimeoutRef.current);
       typingTimeoutRef.current = null;
@@ -55,7 +49,7 @@ function AutoComplete({
       : "";
     setLocalInput(val);
     setSelectedOption && setSelectedOption(newValue);
-    handleSearch(val); // اجرای فوری روی انتخاب
+    handleSearch(val);
     if (setInputValue) setInputValue(val);
   };
 
@@ -67,7 +61,7 @@ function AutoComplete({
         typeof option === "string" ? option : option.name
       }
       disableClearable
-      inputValue={localInput} // ← نمایش آنی از local state
+      inputValue={localInput}
       className="!w-full"
       onInputChange={onInputChange}
       onChange={onChange}

components/doctors/search/SearchField.js

@@ -3,7 +3,7 @@ import { useRouter } from "next/navigation";
 import specialties from "@/data/specialties.json";
 import AutoComplete from "./AutoComplete";
 
-function SearchField({ filter, setFilter, updateData, setDataInURL }) {
+function SearchField({ filter, setFilter, setDataInURL }) {
   const router = useRouter();
 
   const clearText = () => {
@@ -17,7 +17,6 @@ function SearchField({ filter, setFilter, updateData, setDataInURL }) {
       },
     };
     setFilter(newFilter);
-    // setDataInURL(newFilter);
   };
 
   const handleSearch = (e) => {
@@ -34,7 +33,6 @@ function SearchField({ filter, setFilter, updateData, setDataInURL }) {
         dataUrl.specialty = findName.name;
         newFilter.category = itemParent;
         newFilter.specialty = findName;
-        // updateData("name", e);
       } else {
         dataUrl.specialty = findName.name;
         newFilter.category = findName;
@@ -50,8 +48,6 @@ function SearchField({ filter, setFilter, updateData, setDataInURL }) {
       router.push(`?${searchParams.toString()}`);
       newFilter.name = e;
       setFilter(newFilter);
-      // const newFilter = { ...filter, [name]: e };
-      // setFilter(newFilter);
     } else {
       let newFilter = filter;
 
@@ -65,7 +61,6 @@ function SearchField({ filter, setFilter, updateData, setDataInURL }) {
         router.push(`?${searchParams.toString()}`);
       }
       newFilter.name = e;
-      // updateData("name", e);
       setFilter(newFilter);
       setDataInURL(newFilter);
     }
@@ -78,7 +73,6 @@ function SearchField({ filter, setFilter, updateData, setDataInURL }) {
         clearText={clearText}
         inputValue={filter.name}
         handleSearch={handleSearch}
-        // handleSearch={(e) => updateData("name", e)}
         placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
       />
     </div>

components/doctors/search/index.js

@@ -39,7 +39,6 @@ function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
       <SearchField
         filter={filter}
         setFilter={setFilter}
-        updateData={updateData}
         setDataInURL={setDataInURL}
       />
       <SendReq

components/home/search/modal/index.js

@@ -9,6 +9,7 @@ import { addLabelToList } from "@/helper";
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
 import Content from "./Content";
+import { useRouter } from "next/navigation";
 
 function ModalSearchCity({
   open,
@@ -20,6 +21,7 @@ function ModalSearchCity({
   setSelected,
 }) {
   const provinceSelected = selected.province;
+  const router = useRouter();
 
   const states = addLabelToList(statesData);
   const cities = addLabelToList(citiesData);
@@ -45,11 +47,16 @@ function ModalSearchCity({
   }, [provinceSelected]);
 
   const updateData = (event, name) => {
+    const searchParams = new URLSearchParams(window.location.search);
+
     if (name === "province") {
       setSelected({ ...selected, province: event, city: "" });
+      searchParams.set("state", event);
     } else {
       setSelected({ ...selected, [name]: event });
+      searchParams.set("city", event);
     }
+    router.push(`?${searchParams.toString()}`);
   };
 
   return (