add loading for redirect button from home to doctors page && change filter for field search in name or specialty and set in url && fix bug select city in home page

app/component/comment/ItemUser.js

@@ -28,9 +28,8 @@ function ItemUser({ update, setUpdate, data }) {
 
     try {
       const res = await request.postCommentsLike(body);
-      console.log(res);
     } catch (err) {
-      console.log(err);
+      // err
     } finally {
       if (type === "like") setLoadingLike(false);
       else setLoadingDislike(false);

app/doctors/page.js

@@ -9,12 +9,23 @@ async function Doctors({ searchParams }) {
   const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
   let doctors = null;
+  const stateParams = searchParams.state;
+  const cityParams = searchParams.city;
+
   try {
     let newSearchParams = searchParams;
-    if (matchedCity && matchedCity.id !== "63")
+
+    // Conditional State
+    if (stateParams) newSearchParams.state = stateParams;
+    else if (matchedState) newSearchParams.state = matchedState.name;
+
+    // Conditional City
+    if (cityParams) newSearchParams.city = cityParams;
+    else if (matchedCity && matchedCity.id !== "63")
       newSearchParams.city = matchedCity.name;
-    if (matchedState) newSearchParams.state = matchedState.name;
+
-    const params = buildDoctorParams(searchParams);
+    const params = buildDoctorParams(newSearchParams);
+
 
     const response = await axios.get(`${API_URL}/api/v1/doctors`, {
       params,

components/doctors/head/index.js

@@ -56,9 +56,17 @@ function Head({ matchedCity, matchedState, setDoctors }) {
   };
   const sendReq = (newFilter) => {
     const params = QueryForDoctorsReq(newFilter || filter);
+    let filteredName = params;
+    if (
+      newFilter.name === newFilter.specialty?.name ||
+      newFilter.name === newFilter.category?.name
+    ) {
+      filteredName.name = "";
+      delete filteredName.name;
+    }
 
     return request
-      .getDoctors(params)
+      .getDoctors(filteredName)
       .then((res) => {
         setDoctors(res.data);
         return res;

components/doctors/search/AutoComplete.js

@@ -19,7 +19,6 @@ function AutoComplete({
         },
       }
     : {};
-  console.log(inputValue);
 
   return (
     <Autocomplete

components/doctors/search/SearchField.js

@@ -20,11 +20,10 @@ function SearchField({ filter, setFilter, updateData, setDataInURL }) {
     // setDataInURL(newFilter);
   };
 
-  console.log(filter);
-
   const handleSearch = (e) => {
     const findName = specialties.find((item) => item.name === e);
-    console.log(findName);
+    const searchParams = new URLSearchParams(window.location.search);
+    let dataUrl = {};
 
     if (findName) {
       let newFilter = { ...filter };
@@ -32,19 +31,43 @@ function SearchField({ filter, setFilter, updateData, setDataInURL }) {
         const itemParent = specialties.find(
           (item) => item.id === findName.parent
         );
+        dataUrl.specialty = findName.name;
         newFilter.category = itemParent;
         newFilter.specialty = findName;
         // updateData("name", e);
       } else {
+        dataUrl.specialty = findName.name;
         newFilter.category = findName;
         newFilter.specialty = "";
       }
-      newFilter.name = e
+
+      searchParams.delete("name");
+      Object.entries(dataUrl).forEach(([key, value]) => {
+        if (value) {
+          searchParams.set(key, value);
+        }
+      });
+      router.push(`?${searchParams.toString()}`);
+      newFilter.name = e;
       setFilter(newFilter);
       // const newFilter = { ...filter, [name]: e };
       // setFilter(newFilter);
     } else {
-      updateData("name", e);
+      let newFilter = filter;
+
+      if (
+        filter.name === filter.specialty?.name ||
+        filter.name === filter.category?.name
+      ) {
+        searchParams.delete("specialty");
+        newFilter.specialty = "";
+        newFilter.category = "";
+        router.push(`?${searchParams.toString()}`);
+      }
+      newFilter.name = e;
+      // updateData("name", e);
+      setFilter(newFilter);
+      setDataInURL(newFilter);
     }
   };
 

components/doctors/search/SendReq.js

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

components/home/search/RedirectLink.js

@@ -2,14 +2,17 @@
 
 import SearchD from "@/components/icons/SearchD";
 import { Search } from "@mui/icons-material";
-import { Button } from "@mui/material";
+import { Button, CircularProgress } from "@mui/material";
 import { useRouter } from "next/navigation";
 import specialties from "@/data/specialties.json";
+import { useState } from "react";
 
 function RedirectLink({ data }) {
   const router = useRouter();
+  const [loading, setLoading] = useState(false);
 
-  const handleRedirect = () => {
+  const handleRedirect = (e) => {
+    loading && e.preventDefault()
     const filters = {};
     if (data.city && data.city !== "نوبت 724") filters.city = data.city;
     if (data.province) filters.state = data.province;
@@ -25,18 +28,28 @@ function RedirectLink({ data }) {
     }
 
     const queryParams = new URLSearchParams(filters).toString();
-
+    setLoading(true);
     router.push(`/doctors?${queryParams}`);
   };
 
   return (
     <>
+      {/* <div className="min-w-[20px] min-h-[20px]">
+        <Search />
+        </div> */}
       <Button
-        className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]"
         onClick={handleRedirect}
+        className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]"
       >
-        <div className="min-w-[20px] min-h-[20px]">
+        <div className="min-w-[20px] min-h-[20px] grid place-items-center">
-          <Search />
+          {loading ? (
+            <CircularProgress
+              className="!w-[24px] !h-[24px]"
+              sx={{ color: "#FFFFFF" }}
+            />
+          ) : (
+            <Search />
+          )}
         </div>
         <p>جستجو</p>
       </Button>

components/home/search/modal/index.js

@@ -45,8 +45,8 @@ function ModalSearchCity({
   }, [provinceSelected]);
 
   const updateData = (event, name) => {
-    if (name === "province" && event !== provinceSelected) {
+    if (name === "province") {
-      setSelected({ province: event, city: "" });
+      setSelected({ ...selected, province: event, city: "" });
     } else {
       setSelected({ ...selected, [name]: event });
     }