refactor(Runtime-plugin): refactor filtering in Threads and SysProps …

…components to be cleaner
hawtio · Nov 24, 2023 · dff4385 · dff4385
1 parent 3bce079
commit dff4385
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 66 deletions.
diff --git a/packages/hawtio/src/plugins/runtime/SysProps.tsx b/packages/hawtio/src/plugins/runtime/SysProps.tsx
@@ -43,10 +43,26 @@ export const SysProps: React.FunctionComponent = () => {
     })
   }, [])
 
+  useEffect(() => {
+    //filter with findTerm
+    let filtered: SystemProperty[] = [...properties]
+
+    //add current search word to filters and filter
+    ;[...filters, `${attributeMenuItem}:${searchTerm}`].forEach(value => {
+      const attr = value.split(':')[0] ?? ''
+      const searchTerm = value.split(':')[1] ?? ''
+      filtered = filtered.filter(prop =>
+        (attr === 'name' ? prop.key : prop.value).toLowerCase().includes(searchTerm.toLowerCase()),
+      )
+    })
+
+    setPage(1)
+    setFilteredProperties([...filtered])
+  }, [searchTerm, properties, filters, attributeMenuItem])
+
   const onDeleteFilter = (filter: string) => {
     const newFilters = filters.filter(f => f !== filter)
     setFilters(newFilters)
-    handleSearch(searchTerm, attributeMenuItem, newFilters)
   }
 
   const addToFilters = () => {
@@ -56,7 +72,6 @@ export const SysProps: React.FunctionComponent = () => {
   const clearFilters = () => {
     setFilters([])
     setSearchTerm('')
-    handleSearch('', attributeMenuItem, [])
   }
 
   const PropsPagination = () => {
@@ -80,32 +95,6 @@ export const SysProps: React.FunctionComponent = () => {
     const end = start + perPage
     return filteredProperties.slice(start, end)
   }
-  const handleSearch = (value: string, attribute: string, filters: string[]) => {
-    setSearchTerm(value)
-    //filter with findTerm
-    let filtered: SystemProperty[] = []
-
-    if (value === '') {
-      filtered = [...properties]
-    } else {
-      filtered = properties.filter(prop => {
-        return (attribute === 'name' ? prop.key : prop.value).toLowerCase().includes(value.toLowerCase())
-      })
-    }
-
-    //filter with the rest of the filters
-    filters.forEach(value => {
-      const attr = value.split(':')[0] ?? ''
-      const searchTerm = value.split(':')[1] ?? ''
-      filtered = filtered.filter(prop =>
-        (attr === 'name' ? prop.key : prop.value).toLowerCase().includes(searchTerm.toLowerCase()),
-      )
-    })
-
-    setSearchTerm(value)
-    setPage(1)
-    setFilteredProperties([...filtered])
-  }
 
   const attributes = [
     { key: 'name', value: 'Name' },
@@ -116,7 +105,6 @@ export const SysProps: React.FunctionComponent = () => {
     <DropdownItem
       onClick={() => {
         setAttributeMenuItem(a.key)
-        handleSearch(searchTerm, a.key, filters)
       }}
       key={a.key}
     >
@@ -178,7 +166,7 @@ export const SysProps: React.FunctionComponent = () => {
               id='search-input'
               placeholder='Search...'
               value={searchTerm}
-              onChange={(_event, value) => handleSearch(value, attributeMenuItem, filters)}
+              onChange={(_event, value) => setSearchTerm(value)}
               aria-label='Search input'
             />
           </ToolbarFilter>

diff --git a/packages/hawtio/src/plugins/runtime/Threads.tsx b/packages/hawtio/src/plugins/runtime/Threads.tsx
@@ -93,10 +93,27 @@ export const Threads: React.FunctionComponent = () => {
     return () => runtimeService.unregisterAll()
   }, [])
 
+  useEffect(() => {
+    let filtered: Thread[] = [...threads]
+
+    //add current searchTerm and filter
+    ;[...filters, `${attributeMenuItem}:${searchTerm}`].forEach(value => {
+      const attr = value.split(':')[0] ?? ''
+      const searchTerm = value.split(':')[1] ?? ''
+      filtered = filtered.filter(thread =>
+        (attr === 'Name' ? thread.threadName : String(thread.threadState))
+          .toLowerCase()
+          .includes(searchTerm.toLowerCase()),
+      )
+    })
+
+    setPage(1)
+    setFilteredThreads([...filtered])
+  }, [threads, searchTerm, attributeMenuItem, filters])
+
   const onDeleteFilter = (filter: string) => {
     const newFilters = filters.filter(f => f !== filter)
     setFilters(newFilters)
-    handleSearch(searchTerm, attributeMenuItem, newFilters)
   }
 
   const addToFilters = () => {
@@ -107,7 +124,6 @@ export const Threads: React.FunctionComponent = () => {
   const clearFilters = () => {
     setFilters([])
     setSearchTerm('')
-    handleSearch('', attributeMenuItem, [])
   }
 
   const PropsPagination = () => {
@@ -132,37 +148,6 @@ export const Threads: React.FunctionComponent = () => {
     return filteredThreads.slice(start, end)
   }
 
-  const handleSearch = (value: string, key: string, filters: string[]) => {
-    setSearchTerm(value)
-    //filter with findTerm
-    let filtered: Thread[] = []
-
-    if (value === '') {
-      filtered = [...threads]
-    } else {
-      filtered = threads.filter(thread => {
-        return (key === 'Name' ? thread.threadName : String(thread.threadState))
-          .toLowerCase()
-          .includes(value.toLowerCase())
-      })
-    }
-
-    //filter with the rest of the filters
-    filters.forEach(value => {
-      const attr = value.split(':')[0] ?? ''
-      const searchTerm = value.split(':')[1] ?? ''
-      filtered = filtered.filter(thread =>
-        (attr === 'Name' ? thread.threadName : String(thread.threadState))
-          .toLowerCase()
-          .includes(searchTerm.toLowerCase()),
-      )
-    })
-
-    setSearchTerm(value)
-    setPage(1)
-    setFilteredThreads([...filtered])
-  }
-
   const tableColumns = [
     { key: 'threadId', value: 'ID' },
     { key: 'threadState', value: 'State' },
@@ -177,7 +162,6 @@ export const Threads: React.FunctionComponent = () => {
     <DropdownItem
       onClick={() => {
         setAttributeMenuItem('Name')
-        handleSearch(searchTerm, 'Name', filters)
       }}
       key={'name-key'}
     >
@@ -186,7 +170,6 @@ export const Threads: React.FunctionComponent = () => {
     <DropdownItem
       onClick={() => {
         setAttributeMenuItem('State')
-        handleSearch(searchTerm, 'State', filters)
       }}
       key={'state'}
     >
@@ -261,7 +244,7 @@ export const Threads: React.FunctionComponent = () => {
               id='search-input'
               placeholder='Search...'
               value={searchTerm}
-              onChange={(_event, value) => handleSearch(value, attributeMenuItem, filters)}
+              onChange={(_event, value) => setSearchTerm(value)}
               aria-label='Search input'
             />
           </ToolbarFilter>