[Fix]: #1849 add useDebouncedValue hook, and fix chars length

Author: iamfaran

client/packages/lowcoder/src/pages/ApplicationV2/FolderView.tsx

@@ -1,7 +1,8 @@
 import { useDispatch, useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 import { HomeBreadcrumbType, HomeLayout } from "./HomeLayout";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
+import { useDebouncedValue } from "util/hooks";
 import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "../../constants/applicationConstants";
 import { buildFolderUrl } from "../../constants/routesURL";
 import { folderElementsSelector, foldersSelector } from "../../redux/selectors/folderSelector";
@@ -100,13 +101,12 @@ export function FolderView() {
         }, [searchValues]
     );
 
-    useEffect(()=> {
-        const timer = setTimeout(() => {
-            if (searchValue.length > 2 || searchValue === "")
-                setSearchValues(searchValue)
-        }, 500);
-        return () => clearTimeout(timer);
-    }, [searchValue])
+    const debouncedSearchValue = useDebouncedValue(searchValue, 500);
+
+    useEffect(() => {
+        if (debouncedSearchValue.trim().length > 0 || debouncedSearchValue === "")
+            setSearchValues(debouncedSearchValue);
+    }, [debouncedSearchValue]);
 
   return (
     <>

client/packages/lowcoder/src/pages/ApplicationV2/HomeView.tsx

@@ -3,7 +3,8 @@ import { HomeLayout } from "./HomeLayout";
 import { getUser } from "../../redux/selectors/usersSelectors";
 import { Helmet } from "react-helmet";
 import { trans } from "i18n";
-import {useState, useEffect } from "react";
+import { useState, useEffect } from "react";
+import { useDebouncedValue } from "util/hooks";
 import {fetchFolderElements} from "@lowcoder-ee/util/pagination/axios";
 import {ApplicationCategoriesEnum, ApplicationMeta, FolderMeta} from "@lowcoder-ee/constants/applicationConstants";
 import {ApplicationPaginationType} from "@lowcoder-ee/util/pagination/type";
@@ -53,13 +54,13 @@ export function HomeView() {
         }, [searchValues]
     );
 
-    useEffect(()=> {
-        const timer = setTimeout(() => {
-            if (searchValue.length > 2 || searchValue === "")
-                setSearchValues(searchValue)
-        }, 500);
-        return () => clearTimeout(timer);
-    }, [searchValue])
+    const debouncedSearchValue = useDebouncedValue(searchValue, 500);
+
+    useEffect(() => {
+        if (debouncedSearchValue.trim().length > 0 || debouncedSearchValue === "") {
+            setSearchValues(debouncedSearchValue);
+        }
+    }, [debouncedSearchValue]);
 
   const user = useSelector(getUser);
 

client/packages/lowcoder/src/pages/ApplicationV2/TrashView.tsx

@@ -1,6 +1,7 @@
 import { HomeLayout } from "./HomeLayout";
 import { TRASH_URL } from "../../constants/routesURL";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
+import { useDebouncedValue } from "util/hooks";
 import { trans } from "../../i18n";
 import { Helmet } from "react-helmet";
 import {fetchApplicationElements} from "@lowcoder-ee/util/pagination/axios";
@@ -46,14 +47,13 @@ export function TrashView() {
         }, [searchValues]
     );
 
-    //debouncing
-    useEffect(()=> {
-        const timer = setTimeout(() => {
-            if (searchValue.length > 2 || searchValue === "")
-                setSearchValues(searchValue)
-        }, 500);
-        return () => clearTimeout(timer);
-    }, [searchValue])
+    const debouncedSearchValue = useDebouncedValue(searchValue, 500);
+
+    useEffect(() => {
+        if (debouncedSearchValue.trim().length > 0 || debouncedSearchValue === "") {
+            setSearchValues(debouncedSearchValue);
+        }
+    }, [debouncedSearchValue]);
 
   return (
     <>

client/packages/lowcoder/src/pages/datasource/datasourceList.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { EditPopover, PointIcon, Search, TacoButton } from "lowcoder-design";
-import {useEffect, useState} from "react";
+import { useState, useEffect } from "react";
+import { useDebouncedValue } from "util/hooks";
 import { useDispatch, useSelector } from "react-redux";
 import { getDataSourceTypesMap } from "../../redux/selectors/datasourceSelectors";
 import { deleteDatasource } from "../../redux/reduxActions/datasourceActions";
@@ -124,13 +125,13 @@ export const DatasourceList = () => {
   const [pageSize, setPageSize] = useState(10);
   const [paginationLoading, setPaginationLoading] = useState(false);
 
-  useEffect(()=> {
-    const timer = setTimeout(() => {
-      if (searchValue.length > 2 || searchValue === "")
-        setSearchValues(searchValue)
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [searchValue])
+  const debouncedSearchValue = useDebouncedValue(searchValue, 500);
+
+  useEffect(() => {
+    if (debouncedSearchValue.trim().length > 0 || debouncedSearchValue === "") {
+      setSearchValues(debouncedSearchValue);
+    }
+  }, [debouncedSearchValue]);
 
   useEffect( () => {
     setPaginationLoading(true);

client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx

@@ -1,4 +1,5 @@
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
+import { useDebouncedValue } from "util/hooks";
 import styled, { css } from "styled-components";
 import {
   BluePlusIcon,
@@ -174,14 +175,13 @@ export const LeftNav = (props: {
   const [searchValue, setSearchValue] = useState("");
   const datasourceTypes = useSelector(getDataSourceTypesMap);
 
-  useEffect(()=> {
-    const timer = setTimeout(() => {
-      if (searchValue.length > 2 || searchValue === "")
-        setSearchValues(searchValue)
-    }, 500);
-    return () => clearTimeout(timer);
-  }, [searchValue])
+  const debouncedSearchValue = useDebouncedValue(searchValue, 500);
 
+  useEffect(() => {
+    if (debouncedSearchValue.trim().length > 0 || debouncedSearchValue === "") {
+      setSearchValues(debouncedSearchValue);
+    }
+  }, [debouncedSearchValue]);
 
 
   return (

client/packages/lowcoder/src/util/hooks.ts

@@ -29,6 +29,7 @@ import { constantColors } from "components/colorSelect/colorUtils";
 import { AppState } from "@lowcoder-ee/redux/reducers";
 import { getOrgUserStats } from "@lowcoder-ee/redux/selectors/orgSelectors";
 import { fetchGroupsAction } from "@lowcoder-ee/redux/reduxActions/orgActions";
+import debounce from "lodash/debounce";
 
 export const ForceViewModeContext = React.createContext<boolean>(false);
 
@@ -282,3 +283,21 @@ export const useOrgUserCount = (orgId: string) => {
 
   return userCount;
 };
+
+/**
+ * Returns a debounced version of the incoming value that only updates
+ */
+export function useDebouncedValue<T>(value: T, delay = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  const updater = useMemo(() => debounce(setDebouncedValue, delay), [delay]);
+
+  useEffect(() => {
+    updater(value);
+    return () => {
+      updater.cancel();
+    };
+  }, [value, updater]);
+
+  return debouncedValue;
+}