From a88ff1d6f0dc15cd826a831a4c4169ce3b923308 Mon Sep 17 00:00:00 2001 From: Senthil Athiban Date: Thu, 8 Aug 2024 16:01:35 +0530 Subject: [PATCH 1/2] feat(searchbar): add lodash debounce mechanism in searchbar Signed-off-by: Senthil Athiban --- package-lock.json | 22 ++++++++++++++++++---- package.json | 4 ++++ src/custom/SearchBar.tsx | 28 ++++++++++++++++------------ 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 78589c9b..390ca2e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,6 +7,9 @@ "": { "name": "@layer5/sistent", "version": "0.14.11", + "dependencies": { + "lodash": "^4.17.21" + }, "devDependencies": { "@commitlint/cli": "^17.7.2", "@commitlint/config-conventional": "^17.7.0", @@ -14,6 +17,7 @@ "@reduxjs/toolkit": "^2.2.5", "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.11", + "@types/lodash": "^4.17.7", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", "@typescript-eslint/eslint-plugin": "^6.12.0", @@ -2969,6 +2973,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==", + "dev": true + }, "node_modules/@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -9011,8 +9021,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.assignwith": { "version": "4.2.0", @@ -15819,6 +15828,12 @@ "version": "7.0.13", "dev": true }, + "@types/lodash": { + "version": "4.17.7", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz", + "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==", + "dev": true + }, "@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -19966,8 +19981,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.assignwith": { "version": "4.2.0", diff --git a/package.json b/package.json index 5bebb1e1..6f9ca400 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@reduxjs/toolkit": "^2.2.5", "@testing-library/react": "^14.1.2", "@types/jest": "^29.5.11", + "@types/lodash": "^4.17.7", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", "@typescript-eslint/eslint-plugin": "^6.12.0", @@ -106,5 +107,8 @@ }, "publishConfig": { "access": "public" + }, + "dependencies": { + "lodash": "^4.17.21" } } diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 3f68868d..af61ca65 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -1,6 +1,7 @@ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles'; -import React from 'react'; +import debounce from 'lodash/debounce'; +import React, { useCallback } from 'react'; import { ClickAwayListener } from '../base/ClickAwayListener'; import { TextField } from '../base/TextField'; import { CloseIcon, SearchIcon } from '../icons'; @@ -75,11 +76,22 @@ function SearchBar({ const searchRef = React.useRef(null); const theme = useTheme(); + // Debounce the onSearch function + const debouncedOnSearch = useCallback( + debounce((value) => { + onSearch(value); + }, 300), + [onSearch] + ); + const handleSearchChange = (event: React.ChangeEvent): void => { - setSearchText(event.target.value); + const value = event.target.value; + setSearchText(value); + debouncedOnSearch(value); }; const handleClearIconClick = (): void => { + debouncedOnSearch(''); setSearchText(''); setExpanded(false); if (onClear) { @@ -89,6 +101,7 @@ function SearchBar({ const handleSearchIconClick = (): void => { if (expanded) { + debouncedOnSearch(''); setSearchText(''); setExpanded(false); } else { @@ -101,12 +114,6 @@ function SearchBar({ } }; - // const handleClickAway = (): void => { - // if (expanded) { - // setExpanded(false); - // } - // }; - return ( { @@ -125,10 +132,7 @@ function SearchBar({ ) => { - handleSearchChange(e); - onSearch(e.target.value); - }} + onChange={handleSearchChange} // Updated to use the new handler inputRef={searchRef} placeholder={placeholder} style={{ From 0ea46e01d377c5ad7b7ee8a152315d1d523815e3 Mon Sep 17 00:00:00 2001 From: Senthil Athiban Date: Wed, 21 Aug 2024 10:28:48 +0530 Subject: [PATCH 2/2] fix(lint): lint issue Signed-off-by: Senthil Athiban --- src/custom/SearchBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index af61ca65..db72eaf4 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles'; import debounce from 'lodash/debounce';