updating tests and adding debounce

package.json

@@ -20,6 +20,8 @@
   "dependencies": {
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
+    "@types/lodash": "^4.17.9",
+    "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "react-router-dom": "^6.26.1"
   }

packages/transaction-log/src/components/filters/basic.component.tsx

@@ -1,9 +1,10 @@
-import React, {useEffect} from 'react'
+import React, {useCallback, useEffect} from 'react'
 import {Box, TextField, MenuItem, Grid, Button, Card} from '@mui/material'
 import {DateTimePicker} from '@mui/x-date-pickers/DateTimePicker'
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider'
 import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns'
 import {BasicFilterProps} from '../../interfaces/index.interface'
+import {debounce} from 'lodash'
 
 const BasicFilters: React.FC<BasicFilterProps> = ({
   status,
@@ -23,6 +24,12 @@ const BasicFilters: React.FC<BasicFilterProps> = ({
   channels,
   fetchTransactionLogs
 }) => {
+
+  const debounceFetchTransactionLogs = useCallback(
+    debounce(() => fetchTransactionLogs(null, true), 500),
+    [fetchTransactionLogs]
+  );
+
   const handleStatusChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setStatus(event.target.value)
   }
@@ -44,7 +51,11 @@ const BasicFilters: React.FC<BasicFilterProps> = ({
   }
 
   useEffect(() => {
-    fetchTransactionLogs(null, true)
+    (async () => {
+      await debounceFetchTransactionLogs()
+    })()
+
+    return () => debounceFetchTransactionLogs.cancel()
   }, [status, searchQuery, channel, limit, startDate, endDate, reruns])
 
   const handleClearFilters = () => {

packages/transaction-log/src/components/filters/custom.component.tsx

@@ -5,6 +5,7 @@ import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider'
 import {AdapterDateFns} from '@mui/x-date-pickers/AdapterDateFns'
 import CustomizeDialog from '../dialogs/customize.dialog.component'
 import {CustomFilterProps} from '../../interfaces/index.interface'
+import {debounce} from 'lodash'
 
 const CustomFilters: React.FC<CustomFilterProps> = ({
   status,
@@ -38,6 +39,7 @@ const CustomFilters: React.FC<CustomFilterProps> = ({
   fetchTransactionLogs
 }) => {
   const [open, setOpen] = useState(false)
+  const debounceFetchTransactionLogs = debounce(fetchTransactionLogs, 10000)
 
   const [visibleFilters, setVisibleFilters] = useState({
     status: true,
@@ -141,8 +143,22 @@ const CustomFilters: React.FC<CustomFilterProps> = ({
   }
 
   useEffect(() => {
-    fetchTransactionLogs(null, true)
-  }, [status, channel, limit, startDate, endDate, reruns, statusCode, port, path, param, client, method])
+    debounceFetchTransactionLogs(null, true)
+    return () => debounceFetchTransactionLogs.cancel()
+  }, [
+    status,
+    channel,
+    limit,
+    startDate,
+    endDate,
+    reruns,
+    statusCode,
+    port,
+    path,
+    param,
+    client,
+    method
+  ])
 
   return (
     <Box sx={{padding: '16px'}}>

packages/transaction-log/src/interfaces/index.interface.spec.ts

@@ -86,13 +86,18 @@ describe('Interface Conformance Tests', () => {
     expect(typeof basicFilterProps.setStatus).toBe('function')
     expect(Array.isArray(basicFilterProps.channels)).toBe(true)
     expect(basicFilterProps.channels[0]._id).toBe('1')
+    expect(typeof basicFilterProps.fetchTransactionLogs).toBe('function')
+    expect(basicFilterProps.fetchTransactionLogs()).resolves.toBe(undefined)
+
   })
 
   it('should conform to CustomFilterProps interface', () => {
     expect(customFilterProps.statusCode).toBe(200)
     expect(customFilterProps.host).toBe('localhost')
     expect(customFilterProps.clients[0].name).toBe('Test Client')
     expect(typeof customFilterProps.setClient).toBe('function')
+    expect(typeof customFilterProps.fetchTransactionLogs).toBe('function')
+    expect(customFilterProps.fetchTransactionLogs()).resolves.toBe(undefined)
   })
 
   it('should conform to CustomizeDialogProps interface', () => {