remove additional code && fix bug select city and state && alert success and error message for comment in doctors page && handle set data after user searched in field doctors page && set data appointment from doctor data && set value in field search after user reload in doctors page

components/doctors/head/index.js

@@ -27,16 +27,22 @@ function Head({ matchedCity, matchedState, setDoctors }) {
     searchParams.get("city") ||
     (matchedCity?.name && matchedCity?.id !== "63" ? matchedCity?.name : false);
 
+  const valCategory = isParent
+    ? findItem("id", isParent)
+    : findItem("name", fieldName);
+  const valSpecialty = isParent && findItem("name", fieldName);
+
   const defaultFilter = {
     state: selectedState && states.find((item) => item.name === selectedState),
     city: selectedCity && cities.find((item) => item.name === selectedCity),
-    category: isParent ? findItem("id", isParent) : findItem("name", fieldName),
-    specialty: isParent && findItem("name", fieldName),
+    category: valCategory,
+    specialty: valSpecialty,
     active: searchParams.get("active") || 0,
     gender: searchParams.get("gender") || "هر دو",
     degree: searchParams.get("degree") || "همه موارد",
     sort: (searchParams.get("sort") && Number(searchParams.get("sort"))) || "",
-    name: searchParams.get("name") || "",
+    name:
+      searchParams.get("name") || valSpecialty?.name || valCategory?.name || "",
   };
 
   const [filter, setFilter] = useState(defaultFilter);
@@ -55,11 +61,12 @@ function Head({ matchedCity, matchedState, setDoctors }) {
     isReq && sendReq(newFilter);
   };
   const sendReq = (newFilter) => {
-    const params = QueryForDoctorsReq(newFilter || filter);
+    const data = newFilter || filter;
+    const params = QueryForDoctorsReq(data);
     let filteredName = params;
     if (
-      newFilter.name === newFilter.specialty?.name ||
-      newFilter.name === newFilter.category?.name
+      data?.name === data.specialty?.name ||
+      data?.name === data.category?.name
     ) {
       filteredName.name = "";
       delete filteredName.name;

components/doctors/search/AutoComplete.js

@@ -1,42 +1,76 @@
 import { Autocomplete, TextField } from "@mui/material";
+import { useRef, useState, useEffect } from "react";
 
 function AutoComplete({
   data,
   noneBg,
   clearText,
-  inputValue,
+  inputValue, // مقدار کنترل‌شده از والد (اختیاری)
   placeholder,
-  handleSearch,
-  setInputValue,
+  handleSearch, // تابعی که باید با مقدار جستجو صدا زده بشه
+  setInputValue, // اختیاری: اگه والد دوست داره همون‌وقت مقدار رو بگیره
   setSelectedOption,
+  debounce = 500, // قابل تنظیم
 }) {
-  const clearIndicatorProps = clearText
-    ? {
-        clearIndicator: {
-          onClick: () => {
-            clearText();
-          },
-        },
-      }
-    : {};
+  const typingTimeoutRef = useRef(null);
+  const [localInput, setLocalInput] = useState(inputValue || "");
+
+  // همگام‌سازی وقتی والد مقدار کنترل‌شده رو تغییر میده (مثلاً بعد از انتخاب گزینه)
+  useEffect(() => {
+    setLocalInput(inputValue || "");
+  }, [inputValue]);
+
+  // پاک‌کردن تایمر هنگام unmount
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) clearTimeout(typingTimeoutRef.current);
+    };
+  }, []);
+
+  const onInputChange = (_, newInputValue) => {
+    // نمایش آنی تایپ کاربر
+    setLocalInput(newInputValue);
+
+    // اختیاری: اگر والد خواست همون‌جا مقدار رو بگیره
+    if (setInputValue) setInputValue(newInputValue);
+
+    // پاک کردن تایمر قبلی و ست کردن تایمر جدید برای debounce
+    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) => option.name}
+      getOptionLabel={(option) =>
+        typeof option === "string" ? option : option.name
+      }
       disableClearable
-      inputValue={inputValue || ""}
+      inputValue={localInput} // ← نمایش آنی از local state
       className="!w-full"
-      onInputChange={(_, newInputValue) => {
-        setInputValue && setInputValue(newInputValue);
-        handleSearch(newInputValue);
-      }}
-      onChange={(_, newValue) => {
-        setSelectedOption && setSelectedOption(newValue);
-        handleSearch(newValue ? newValue.name : "");
-      }}
-      // componentsProps={clearIndicatorProps}
+      onInputChange={onInputChange}
+      onChange={onChange}
       renderOption={(props, option) => (
         <li {...props} key={option.id}>
           {option.name}