From a6386e693fa8dad0db6a8c73c1bd644892bd54a9 Mon Sep 17 00:00:00 2001
From: ehsan <ehsanahmadi8338@gmail.com>
Date: Wed, 17 Sep 2025 20:08:42 +0330
Subject: [PATCH] change bg of auto-selector, remove value of search from url
 when click on x button on autoselector, remove to set data of search field in
 clinics page, fix remove data and update state filter after click on clearAll
 text in autoselector of doctors age

---
 components/clinics/head/SearchBar.js          | 16 --------------
 components/clinics/index.js                   |  8 +++----
 components/doctors/head/index.js              |  1 +
 components/doctors/search/SearchField.js      | 20 ++++++++++++++++-
 components/doctors/search/SendReq.js          | 22 +++++++------------
 components/doctors/search/index.js            |  7 +++++-
 components/home/search/Fields.js              |  3 ++-
 .../searchHead/smSearch/AutoCompleteSearch.js | 21 ++++++++++++++----
 8 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/components/clinics/head/SearchBar.js b/components/clinics/head/SearchBar.js
index 2b6bd3c..8ae2b4c 100644
--- a/components/clinics/head/SearchBar.js
+++ b/components/clinics/head/SearchBar.js
@@ -37,22 +37,6 @@ function SearchBar({
         placeholder="جستجوی تخصص"
         handleSearch={handleSearch}
       />
-      {/* <TextField
-        variant="standard"
-        onChange={(e) => handleSearch(e.target.value)}
-        InputProps={{
-          disableUnderline: true,
-        }}
-        sx={{
-          background: "transparent !important",
-          "& .MuiInputBase-input": { color: "#7E7E7E" },
-          "& .MuiInput-root": { borderBottom: "none" },
-          "& .MuiInputBase-root": { height: "100%" },
-        }}
-        placeholder="جستجوی تخصص"
-        dir="rtl"
-        className={`!shadow-none !w-full !min-w-3 !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] lg:!min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
-      /> */}
       <Button
         onClick={handleSearch}
         className="
diff --git a/components/clinics/index.js b/components/clinics/index.js
index 2baa2bb..04e9e8e 100644
--- a/components/clinics/index.js
+++ b/components/clinics/index.js
@@ -18,10 +18,10 @@ function ClinicsPage({ clinics, matchedCity, matchedState }) {
   });
 
   const handleSearch = (value) => {
-    const current = new URLSearchParams(window.location.search);
-    current.set("search", value);
-    const queryString = current.toString();
-    router.push(`/clinics?${queryString}`);
+    // const current = new URLSearchParams(window.location.search);
+    // current.set("search", value);
+    // const queryString = current.toString();
+    // router.push(`/clinics?${queryString}`);
   };
 
   return (
diff --git a/components/doctors/head/index.js b/components/doctors/head/index.js
index ff8702a..246c133 100644
--- a/components/doctors/head/index.js
+++ b/components/doctors/head/index.js
@@ -67,6 +67,7 @@ function Head({ matchedCity, matchedState, setDoctors }) {
         throw err;
       });
   };
+  console.log(filter);
 
   return (
     <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]">
diff --git a/components/doctors/search/SearchField.js b/components/doctors/search/SearchField.js
index f22e38f..bf8753f 100644
--- a/components/doctors/search/SearchField.js
+++ b/components/doctors/search/SearchField.js
@@ -1,11 +1,29 @@
 import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
 import specialties from "@/data/specialties.json";
+import { clearFilterParams } from "@/helper";
+import { useRouter } from "next/navigation";
 
-function SearchField({ filter, updateData }) {
+function SearchField({ filter, setFilter, updateData, setDataInURL }) {
+  const router = useRouter();
+
+  const clearText = () => {
+    clearFilterParams(router, ["name", "category", "specialty"]);
+    const newFilter = {
+      ...filter,
+      ...{
+        name: "",
+        category: undefined,
+        specialty: undefined,
+      },
+    };
+    setFilter(newFilter);
+    // setDataInURL(newFilter);
+  };
   return (
     <div className="!min-w-[50%] !w-[524px]">
       <AutoCompleteSearch
         data={specialties}
+        clearText={clearText}
         inputValue={filter.name}
         handleSearch={(e) => updateData("name", e)}
         placeholder="جستجوی نام پزشک، تخصص، بیماری ..."
diff --git a/components/doctors/search/SendReq.js b/components/doctors/search/SendReq.js
index e4463c9..2710028 100644
--- a/components/doctors/search/SendReq.js
+++ b/components/doctors/search/SendReq.js
@@ -7,10 +7,9 @@ function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
   const [loading, setLoading] = useState(false);
   const checkName = () => {
     let newFilter = filter;
-    let reqData = filter;
-    const specialtyItem = specialties.find((item) =>
-      item.name.includes(filter.name)
-    );
+    const specialtyItem =
+      filter.name &&
+      specialties.find((item) => item.name.includes(filter.name));
 
     if (specialtyItem) {
       if (specialtyItem.parent) {
@@ -21,23 +20,18 @@ function SendReq({ filter, setFilter, setDataInURL, sendReq }) {
       } else {
         newFilter.specialty = specialtyItem;
       }
-      reqData = newFilter;
-      reqData.name = "";
-    } else {
-      reqData = newFilter;
     }
 
-    setFilter(newFilter);
-    setDataInURL(newFilter);
-
-    return reqData;
+    return newFilter;
   };
 
   const filterData = () => {
     setLoading(true);
-    const reqData = checkName();
+    const newFilter = checkName();
+    setFilter(newFilter);
+    setDataInURL(newFilter);
 
-    sendReq(reqData).finally(() => {
+    sendReq(newFilter).finally(() => {
       setLoading(false);
     });
   };
diff --git a/components/doctors/search/index.js b/components/doctors/search/index.js
index 4e1d6b4..eef89cc 100644
--- a/components/doctors/search/index.js
+++ b/components/doctors/search/index.js
@@ -36,7 +36,12 @@ function SearchBar({ filter, sendReq, setFilter, updateData, setDataInURL }) {
           </div>
         </Button>
       </FilterModal>
-      <SearchField filter={filter} updateData={updateData} />
+      <SearchField
+        filter={filter}
+        setFilter={setFilter}
+        updateData={updateData}
+        setDataInURL={setDataInURL}
+      />
       <SendReq
         filter={filter}
         sendReq={sendReq}
diff --git a/components/home/search/Fields.js b/components/home/search/Fields.js
index ef0828c..fa73fba 100644
--- a/components/home/search/Fields.js
+++ b/components/home/search/Fields.js
@@ -28,8 +28,9 @@ function Fields({ city, state }) {
         <ButtonFilter setOpen={setOpen} selected={data} />
       </ModalSearchCity>
       <span className="black w-px bg-[#EFEFEF]"></span>
-      <div className=" !w-full lg:!w-[524px]">
+      <div className="!w-full lg:!w-[524px] flex items-center justify-start">
         <AutoCompleteSearch
+          noneBg={true}
           data={specialtiesData}
           inputValue={data.search}
           handleSearch={(e) => setData({ data, search: e })}
diff --git a/components/searchHead/smSearch/AutoCompleteSearch.js b/components/searchHead/smSearch/AutoCompleteSearch.js
index 1b1c511..f575894 100644
--- a/components/searchHead/smSearch/AutoCompleteSearch.js
+++ b/components/searchHead/smSearch/AutoCompleteSearch.js
@@ -2,12 +2,25 @@ import { Autocomplete, TextField } from "@mui/material";
 
 function AutoCompleteSearch({
   data,
+  noneBg,
+  clearText,
   inputValue,
   placeholder,
   handleSearch,
   setInputValue,
   setSelectedOption,
 }) {
+  // ایجاد props شرطی برای clearIndicator
+  const clearIndicatorProps = clearText
+    ? {
+        clearIndicator: {
+          onClick: () => {
+            clearText();
+          },
+        },
+      }
+    : {};
+
   return (
     <Autocomplete
       freeSolo
@@ -15,23 +28,23 @@ function AutoCompleteSearch({
       getOptionLabel={(option) => option.name}
       inputValue={inputValue}
       className="!w-full"
-      onInputChange={(event, newInputValue) => {
+      onInputChange={(_, newInputValue) => {
         setInputValue && setInputValue(newInputValue);
         handleSearch(newInputValue);
       }}
-      onChange={(event, newValue) => {
+      onChange={(_, newValue) => {
         setSelectedOption && setSelectedOption(newValue);
         handleSearch(newValue ? newValue.name : "");
       }}
+      componentsProps={clearIndicatorProps}
       renderOption={(props, option) => (
         <li {...props} key={option.id}>
-          {" "}
           {option.name}
         </li>
       )}
       sx={{
         "& .MuiAutocomplete-input": {
-          background: "#ffffff !important",
+          background: noneBg ? "" : "#ffffff !important",
         },
       }}
       renderInput={(params) => (