fix: correct fetch services using search

src/hooks/useServices.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useRef } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { getServices } from "@/api/Service";
 import { Service } from "@/types/Service";
 
@@ -12,26 +12,20 @@ const useServices = (
   const [total, setTotal] = useState<number>(0);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
-  const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const fetchServices = useCallback(async () => {
-    if (debounceTimeout.current) {
-      clearTimeout(debounceTimeout.current);
+    try {
+      setIsLoading(true);
+      const data = await getServices(keyword, tags, page, limit);
+      setServices(data.services);
+      setTotal(data.total);
+      setError(null);
+    } catch (error) {
+      setError("An error occurred while fetching services.");
+      console.error("An error occurred: ", error);
+    } finally {
+      setIsLoading(false);
     }
-    debounceTimeout.current = setTimeout(async () => {
-      try {
-        setIsLoading(true);
-        const data = await getServices(keyword, tags, page, limit);
-        setServices(data.services);
-        setTotal(data.total);
-        setError(null);
-      } catch (error) {
-        setError("An error occurred while fetching services.");
-        console.error("An error occurred: ", error);
-      } finally {
-        setIsLoading(false);
-      }
-    }, 300);
   }, [keyword, tags, page, limit]);
 
   useEffect(() => {

src/pages/ServicePage.tsx

@@ -5,20 +5,22 @@ import { useMediaQuery } from "@/hooks/useMediaQuery";
 import useServices from "@/hooks/useServices";
 import { PlusOutlined } from "@ant-design/icons";
 import { Button, Empty, Input, Pagination, Select, SelectProps } from "antd";
-import { Suspense, useCallback, useEffect, useState } from "react";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 const ServicePage = () => {
   const navigate = useNavigate();
   const isMobile = useMediaQuery();
   const [keyword, setKeyword] = useState<string>("");
+  const [debouncedKeyword, setDebouncedKeyword] = useState(keyword);
+  const debounceTimeoutRef = useRef<number | null>(null);
   const [page, setPage] = useState<number>(1);
   const [limit, setLimit] = useState<number>(10);
   const [tags, setTags] = useState<string[]>([]);
   const [options, setOptions] = useState<SelectProps["options"]>([]);
   const [searchParams] = useSearchParams();
   const { services, total, fetchServices } = useServices(
-    keyword,
+    debouncedKeyword,
     tags,
     page,
     limit
@@ -51,6 +53,14 @@ const ServicePage = () => {
         pathname: window.location.pathname,
         search: searchParams.toString(),
       });
+
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+
+      debounceTimeoutRef.current = window.setTimeout(() => {
+        setDebouncedKeyword(newKeyword);
+      }, 300);
     },
     [navigate]
   );