fix search bar ,logic and add empty search component

src/Components/HOC/SearchWithDrawer.tsx

@@ -9,8 +9,7 @@ import Empty from '../Utils/Search/Empty';
 const SearchWithDrawer = () => {
   const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
-  const [noDataFound, setNoDataFound] = useState(true);
-  console.log(noDataFound);
+  const [noDataFound, setNoDataFound] = useState(false);
   
   return (
     <>
@@ -35,7 +34,7 @@ const SearchWithDrawer = () => {
           <span className='delete_icon' onClick={() => setOpen(false)}><TiDeleteOutline /></span>
         </div>
         <div className='not_found_section'>
-          {noDataFound && <Empty />}
+          {noDataFound ? <Empty />:"" }
         </div>
       </Drawer>
     </>

src/Components/Utils/Search/SearchButton.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Select, Spin } from 'antd';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { LuSearch } from 'react-icons/lu';
 import { useGetBaseProduct } from '../../../api/baseProduct';
 import { Product } from '../../../types/item';
+import _ from 'lodash';
 
 interface SearchButtonProps {
   setOpen: (open: boolean) => void;
@@ -18,24 +19,34 @@ const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound })
   const [query, setQuery] = useState<string | null>(searchParams.get('search'));
   
   const { data, isLoading } = useGetBaseProduct({
-    name: query,
+    search: query,
   });
+  console.log(query ,"query");
+  
   const BaseProducts = (data?.products as Product[]) || [];
   
   useEffect(() => {
-    setNoDataFound(!isLoading && BaseProducts.length <= 0);
+    setNoDataFound(!isLoading && BaseProducts.length < 1);
   }, [isLoading, BaseProducts, setNoDataFound]);
 
   const options = BaseProducts.map((product: any) => ({
     value: product.base_product_id,
     label: product?.name as string,
   }));
+  console.log(BaseProducts?.length, "base_products");
+  
+  const debouncedSearchChange = useCallback(
+    _.debounce((value: string) => {
+      setQuery(value);
+      navigate(`${window.location.pathname}?search=${value}`, {
+        replace: true,
+      });
+    }, 500), // Adjust the debounce delay (in milliseconds) as needed
+    []
+  );
 
   const handleSearchChange = (value: string) => {    
-    setQuery(value);
-    navigate(`${window.location.pathname}?search=${value}`, {
-      replace: true,
-    });
+    debouncedSearchChange(value);
   };
 
   const handleSelectChange = (value: number) => {

src/Components/Utils/SearchBar/SearchBar.scss

@@ -99,6 +99,9 @@
         @include Flex;
         .Empty{
           @include Flex; flex-direction: column;
+          p,h1{
+            font-size: 20px;
+          }
         }
       }
 .ViewSearch{
@@ -115,3 +118,15 @@
   display: flex;
   flex-direction: column;
 }
+
+
+@media screen and (max-width:600px) {
+  .not_found_section{
+    .Empty{
+      h1 , p{
+        text-align: center;
+        font-size: 12px !important;
+      }
+    }
+  }
+}

src/api/helper/useGetQuery.ts

@@ -34,6 +34,7 @@ function useGetQuery(
       return response?.data ?? [];
     },
     options,
+    
   );
 }
 

src/lib/ReactQueryProvider.tsx

@@ -2,7 +2,13 @@ import React from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 
 function QueryProvider({ children }: any) {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus:false,
+      },
+    },
+  });
 
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>

src/translate/ar.json

@@ -388,6 +388,8 @@
 "sub_categories": "الفئات الفرعية",
 "Clear_All": "مسح الكل",
 "Track, return or purchase items":"تتبع أو إرجاع أو شراء العناصر",
-"Order History":"تاريخ الطلب"
+"Order History":"تاريخ الطلب",
+"Please try using other keywords to find the product name":"يرجى محاولة استخدام كلمات رئيسية أخرى للعثور على اسم المنتج",
+"There are no suitable products":"لا توجد منتجات مناسبة"
 
 }

src/translate/ch.json

@@ -374,5 +374,7 @@
     "sub_categories": "子类别",
     "Clear_All": "清除所有",
     "Track, return or purchase items":"跟踪、退货或购买物品",
-    "Order History":"订单历史"
+    "Order History":"订单历史",
+    "Please try using other keywords to find the product name":"请尝试使用其他关键字来查找产品名称",
+    "There are no suitable products":"没有合适的产品"
 }

src/translate/en.json

@@ -385,7 +385,9 @@
   "sub_categories": "sub categories",
   "Clear_All": "Clear All",
   "Track, return or purchase items":"Track, return or purchase items",
-  "Order History":"Order History"
+  "Order History":"Order History",
+  "Please try using other keywords to find the product name":"Please try using other keywords to find the product name",
+  "There are no suitable products":"There are no suitable products"
   
 
 }