Implement debounced search functionality in ApproveHistory component and update API query structure

src/Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker.jsx

@@ -37,6 +37,7 @@ const ApproveHistory = () => {
   const [actionId, setActionId] = useState(false);
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
 
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
   const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
@@ -60,14 +61,31 @@ const ApproveHistory = () => {
     onClose: onRejectClose,
   } = useDisclosure();
 
+  // Debounce the search term to avoid making a request on every keystroke
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 500); // Adjust delay as needed
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchTerm]);
+
   const {
     data,
     isLoading: drawalRequestLoading,
     error,
     refetch,
-  } = useGetApproveHistoryQuery();
-
-  console.log(data?.data?.rows);
+  } = useGetApproveHistoryQuery(
+    {
+      page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
+      size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
+      search: debouncedSearchTerm,
+    },
+    {
+      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
+    }
+  );
 
   // Use useEffect to refetch data when the component mounts
   useEffect(() => {
@@ -172,11 +190,7 @@ const ApproveHistory = () => {
       </Box>
     ),
     "Deposit Date": (
-      <Box
-        w={"100px"}
-        isTruncated={true}
-        display={"flex"}
-      >
+      <Box w={"100px"} isTruncated={true} display={"flex"}>
         <Text as={"span"} color={"teal.900"}>
           {formatDate(item?.transaction_date)}
         </Text>
@@ -202,28 +216,27 @@ const ApproveHistory = () => {
         fontWeight={"500"}
         className="d-flex align-items-center web-text-small"
       >
-        {item?.spportFile_path&&<Badge
-          px={2}
-          py={0.5}
-          textTransform={"inherit"}
-          fontWeight={500}
-          colorScheme={"forestGreen"}
-        >
-          <Link
-            href={import.meta.env.VITE_IMAGE_URL + item?.spportFile_path}
-            isExternal
-            display={"flex"}
-            alignItems={"center"}
+        {item?.spportFile_path && (
+          <Badge
+            px={2}
+            py={0.5}
+            textTransform={"inherit"}
+            fontWeight={500}
+            colorScheme={"forestGreen"}
           >
-            <Box me={"1px"}
-              as="span"
-              cursor={"pointer"}
+            <Link
+              href={import.meta.env.VITE_IMAGE_URL + item?.spportFile_path}
+              isExternal
+              display={"flex"}
+              alignItems={"center"}
             >
-              View
-            </Box>
-            <ExternalLinkIcon />
-          </Link>
-        </Badge>}
+              <Box me={"1px"} as="span" cursor={"pointer"}>
+                View
+              </Box>
+              <ExternalLinkIcon />
+            </Link>
+          </Badge>
+        )}
       </Text>
     ),
     Status: (
@@ -236,12 +249,12 @@ const ApproveHistory = () => {
           rounded={4}
           colorScheme={
             item?.transactionStatus === "Approved"
-            ? "green"
-            : item?.transactionStatus === "Pending"
-            ? "yellow"
-            : item?.transactionStatus === "Reject"
-            ? "red"
-            : "gray" // default border color if status doesn't match any condition
+              ? "green"
+              : item?.transactionStatus === "Pending"
+              ? "yellow"
+              : item?.transactionStatus === "Reject"
+              ? "red"
+              : "gray" // default border color if status doesn't match any condition
           }
         >
           {item.transactionStatus}

src/Services/fawateer.request.service.js

@@ -9,7 +9,7 @@ import { baseQuery } from "./token.serivce";
 export const fawateerRequest = createApi({
   reducerPath: "fawateerRequest",
   baseQuery: baseQuery,
-  tagTypes: ["getFawateerRequest" ,"getApproveHistory","getApproveComment","getRejectComment","getFawateerMakerRequest"],
+  tagTypes: ["getFawateerRequest", "getApproveHistory", "getApproveComment", "getRejectComment", "getFawateerMakerRequest"],
   endpoints: (builder) => ({
 
 
@@ -51,7 +51,14 @@ export const fawateerRequest = createApi({
     }),
 
     getApproveHistory: builder.query({
-      query: () => `/fawateer/admin/getAll`,
+      query: ({ page, size, searchTerm }) => {
+        let baseURL = `/fawateer/admin/getAll?search=${searchTerm || ""}`;
+        if (page !== undefined && size !== undefined) {
+          baseURL += `&page=${page}&size=${size}`; // Only add pagination if both are defined
+        }
+        return baseURL;
+
+      },
       providesTags: ["getApproveHistory"],
     }),
 
@@ -78,10 +85,10 @@ export const fawateerRequest = createApi({
 
 // Export hooks for usage in functional components
 export const {
-    useGetFawateerRequestQuery,
-    useGetApproveHistoryQuery,
-    useApproveCommentMutation,
-    useRejectCommentMutation,
-    useGetFawateerForMakerRequestQuery,
-    useGetFawateerInvestorsQuery
+  useGetFawateerRequestQuery,
+  useGetApproveHistoryQuery,
+  useApproveCommentMutation,
+  useRejectCommentMutation,
+  useGetFawateerForMakerRequestQuery,
+  useGetFawateerInvestorsQuery
 } = fawateerRequest;