feat: implement search URL building and enhance search functionality in Fields and RedirectLink components

components/home/search/Fields.js

@@ -1,6 +1,8 @@
 "use client";
 
 import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { buildSearchUrl } from "@/lib/buildSearchUrl";
 
 import RedirectLink from "./RedirectLink";
 import ModalSearchCity from "./modal";
@@ -9,6 +11,7 @@ import specialtiesData from "@/data/specialties.json";
 import AutoCompleteSearch from "@/components/searchHead/smSearch/AutoCompleteSearch";
 
 function Fields({ city, state }) {
+  const router = useRouter();
   const [open, setOpen] = useState(false);
   const [data, setData] = useState({
     province: state?.name || "",
@@ -33,7 +36,8 @@ function Fields({ city, state }) {
           noneBg={true}
           data={specialtiesData}
           inputValue={data.search}
-          handleSearch={(e) => setData({ data, search: e })}
+          handleSearch={(e) => setData({ ...data, search: e })}
+          onEnter={(value) => router.push(buildSearchUrl({ ...data, search: value }))}
           placeholder="جستجوی نام پزشک، تخصص "
         />
       </div>

components/home/search/RedirectLink.js

@@ -4,7 +4,7 @@ import SearchD from "@/components/icons/SearchD";
 import { Search } from "@mui/icons-material";
 import { Button, CircularProgress } from "@mui/material";
 import { useRouter } from "next/navigation";
-import specialties from "@/data/specialties.json";
+import { buildSearchUrl } from "@/lib/buildSearchUrl";
 import { useState } from "react";
 
 function RedirectLink({ data }) {
@@ -12,24 +12,12 @@ function RedirectLink({ data }) {
   const [loading, setLoading] = useState(false);
 
   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;
-    if (data.search) {
-      const specialtyItem = specialties.find((item) =>
-        item.name.includes(data.search)
-      );
-      if (specialtyItem) {
-        filters.specialty = specialtyItem.name;
-      } else {
-        filters.name = data.search;
-      }
+    if (loading) {
+      e?.preventDefault();
+      return;
     }
-
-    const queryParams = new URLSearchParams(filters).toString();
     setLoading(true);
-    router.push(`/doctors?${queryParams}`);
+    router.push(buildSearchUrl(data));
   };
 
   return (

components/searchHead/smSearch/AutoCompleteSearch.js

@@ -9,6 +9,7 @@ function AutoCompleteSearch({
   handleSearch,
   setInputValue,
   setSelectedOption,
+  onEnter,
 }) {
   const clearIndicatorProps = clearText
     ? {
@@ -57,6 +58,11 @@ function AutoCompleteSearch({
           variant="standard"
           placeholder={placeholder}
           dir="rtl"
+          onKeyDown={(e) => {
+            if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+            e.preventDefault();
+            onEnter && onEnter(e.target.value ?? "");
+          }}
           InputProps={{
             ...params.InputProps,
             disableUnderline: true,

lib/buildSearchUrl.js

@@ -0,0 +1,20 @@
+import specialties from "@/data/specialties.json";
+
+export function buildSearchUrl(data = {}) {
+  const filters = {};
+  if (data.city && data.city !== "نوبت 724") filters.city = data.city;
+  if (data.province) filters.state = data.province;
+  if (data.search) {
+    const specialtyItem = specialties.find((item) =>
+      item.name.includes(data.search)
+    );
+    if (specialtyItem) {
+      filters.specialty = specialtyItem.name;
+    } else {
+      filters.name = data.search;
+    }
+  }
+
+  const queryParams = new URLSearchParams(filters).toString();
+  return `/doctors?${queryParams}`;
+}