feat: search and filter through namespaces and keys

- add custom useSearchFilter hook to filter array of items based on the search field value
dhis2 · Jan 7, 2025 · e420b53 · e420b53
1 parent df09fee
commit e420b53
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 16 deletions.
diff --git a/src/components/sections/KeysDataSection.tsx b/src/components/sections/KeysDataSection.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import useCustomAlert from '../../hooks/useCustomAlert'
+import useSearchFilter from '../../hooks/useSearchFilter'
 import i18n from '../../locales'
 import ErrorNotice from '../error/ErrorNotice'
 import PanelHeader from '../header/PanelHeader'
@@ -39,6 +40,10 @@ const KeysDataSection = ({ query }) => {
         }
     )
 
+    const { searchTerm, setSearchTerm, filteredData } = useSearchFilter(
+        data?.results
+    )
+
     const numberOfKeysInNamespace = data?.results?.length
 
     const handleCreate = async ({ key }) => {
@@ -144,12 +149,16 @@ const KeysDataSection = ({ query }) => {
                 />
             </PanelHeader>
             <div className={classes.keysPanelMidSection}>
-                <SearchField placeholder={i18n.t('Search keys')} />
+                <SearchField
+                    searchTerm={searchTerm}
+                    setSearchTerm={setSearchTerm}
+                    placeholder={i18n.t('Search keys')}
+                />
             </div>
             <div>
-                {data && (
+                {filteredData && (
                     <ItemsTable
-                        data={data}
+                        tableData={filteredData}
                         label={i18n.t('Key')}
                         setOpenDeleteModal={setOpenDeleteModal}
                         setSelectedItem={setSelectedKey}

diff --git a/src/components/sections/NamespaceDataSection.tsx b/src/components/sections/NamespaceDataSection.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
 import useCustomAlert from '../../hooks/useCustomAlert'
+import useSearchFilter from '../../hooks/useSearchFilter'
 import i18n from '../../locales'
 import ErrorNotice from '../error/ErrorNotice'
 import CenteredLoader from '../loader/Loader'
@@ -31,6 +32,10 @@ const NamespaceDataSection = ({ query }) => {
 
     const { error, loading, data, refetch } = useDataQuery<QueryResults>(query)
 
+    const { searchTerm, setSearchTerm, filteredData } = useSearchFilter(
+        data?.results
+    )
+
     const handleCreate = async (values) => {
         await engine.mutate(
             {
@@ -114,17 +119,21 @@ const NamespaceDataSection = ({ query }) => {
     return (
         <>
             <div className={classes.midSection}>
-                <SearchField placeholder={i18n.t('Search namespaces')} />
+                <SearchField
+                    placeholder={i18n.t('Search namespaces')}
+                    searchTerm={searchTerm}
+                    setSearchTerm={setSearchTerm}
+                />
                 <CreateButton
                     label={i18n.t('New Namespace')}
                     handleClick={() => setOpenCreateModal(true)}
                     icon={<IconAdd24 color={colors.grey600} />}
                 />
             </div>
             <div>
-                {data && (
+                {filteredData && (
                     <ItemsTable
-                        data={data}
+                        tableData={filteredData}
                         label={i18n.t('Namespace')}
                         setOpenDeleteModal={setOpenDeleteModal}
                         setSelectedItem={setSelectedNamespace}

diff --git a/src/components/sections/SearchField.tsx b/src/components/sections/SearchField.tsx
@@ -3,13 +3,25 @@ import React from 'react'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
 
-const SearchField = ({ placeholder }: { placeholder?: string }) => {
+interface SearchFieldProps {
+    placeholder?: string
+    searchTerm: string
+    setSearchTerm: React.Dispatch<React.SetStateAction<string>>
+}
+
+const SearchField = ({
+    placeholder,
+    searchTerm,
+    setSearchTerm,
+}: SearchFieldProps) => {
     return (
         <div className={classes.search}>
             <InputField
                 dense
                 name="search"
                 placeholder={placeholder || i18n.t('Search')}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.value)}
             />
         </div>
     )

diff --git a/src/components/table/ItemsTable.tsx b/src/components/table/ItemsTable.tsx
@@ -13,21 +13,19 @@ import i18n from '../../locales'
 import DeleteAction from './DeleteAction'
 import SharingAction from './SharingAction'
 
-interface TableProps {
-    data: {
-        results: string[]
-    }
+interface ItemsTableProps {
+    tableData: string[]
     label: string
     setOpenDeleteModal: React.Dispatch<React.SetStateAction<boolean>>
     setSelectedItem: React.Dispatch<React.SetStateAction<string>>
 }
 
 const ItemsTable = ({
-    data,
+    tableData,
     label,
     setOpenDeleteModal,
     setSelectedItem,
-}: TableProps) => {
+}: ItemsTableProps) => {
     const navigate = useNavigate()
     const { namespace: currentNamespace, key } = useParams()
 
@@ -45,7 +43,7 @@ const ItemsTable = ({
 
     return (
         <div>
-            {data && (
+            {tableData && (
                 <DataTable layout="fixed" scrollHeight="75vh">
                     <TableHead>
                         <DataTableRow>
@@ -66,9 +64,9 @@ const ItemsTable = ({
                         </DataTableRow>
                     </TableHead>
                     <TableBody>
-                        {data?.results?.length && (
+                        {tableData?.length ? (
                             <>
-                                {data.results.map((item, index) => {
+                                {tableData.map((item, index) => {
                                     return (
                                         <DataTableRow
                                             key={`${item}-${index}`}
@@ -119,6 +117,12 @@ const ItemsTable = ({
                                     )
                                 })}
                             </>
+                        ) : (
+                            <DataTableRow>
+                                <DataTableCell bordered>
+                                    {i18n.t('No items found')}
+                                </DataTableCell>
+                            </DataTableRow>
                         )}
                     </TableBody>
                 </DataTable>

diff --git a/src/hooks/useSearchFilter.tsx b/src/hooks/useSearchFilter.tsx
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+
+const useSearchFilter = (itemsArray = []) => {
+    const [searchTerm, setSearchTerm] = useState(null)
+    const [filteredData, setFilteredData] = useState(null)
+
+    useEffect(() => {
+        if (!itemsArray.length) {
+            return
+        }
+        if (searchTerm) {
+            const filteredItemsArray = itemsArray.filter((item) =>
+                item.toLowerCase().includes(searchTerm.toLowerCase())
+            )
+            setFilteredData(filteredItemsArray)
+        } else {
+            setFilteredData(itemsArray)
+        }
+    }, [searchTerm, itemsArray])
+
+    return {
+        searchTerm,
+        setSearchTerm,
+        filteredData,
+    }
+}
+
+export default useSearchFilter