Change search results

package.json

@@ -40,7 +40,6 @@
     "eslint-config-next": "^12.3.4",
     "filecoin-verifier-tools": "^2.3.0",
     "filecoin-verifier-tools-temporary": "^2.3.0",
-    "fuse.js": "^6.6.2",
     "lucide-react": "^0.260.0",
     "next": "13.5.6",
     "next-auth": "^4.22.1",

src/app/page.tsx

@@ -31,7 +31,6 @@ import {
   getApplicationsForRepo,
 } from '@/lib/apiClient'
 import { type Application } from '@/type'
-import Fuse from 'fuse.js'
 import { Search } from 'lucide-react'
 import { useSession } from 'next-auth/react'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
@@ -126,28 +125,31 @@ export default function Home(): JSX.Element {
   useEffect(() => {
     if (isLoading || data == null) return
 
-    const filteredData = data?.filter(
-      (app) => filter === 'all' || app.Lifecycle.State === filter,
-    )
+    const debounceTimeout = setTimeout(() => {
+      const filteredData = data?.filter(
+        (app) => filter === 'all' || app.Lifecycle.State === filter,
+      )
 
-    const fuseOptions =
-      filteredData?.length > 0
-        ? {
-            keys: [
-              ...Object.keys(filteredData[0].Client).map(
-                (key) => `Client.${key}`,
-              ),
-              'id',
-            ],
-          }
-        : { keys: [] }
-
-    const fuse = new Fuse(filteredData, fuseOptions)
-    const results = fuse.search(searchTerm)
-
-    const searchResults =
-      searchTerm !== '' ? results.map((result) => result.item) : filteredData
-    setSearchResults(searchResults)
+      const searchResults = searchTerm
+        ? filteredData.filter((app) => {
+            const clientName = app.Client?.Name?.toLowerCase() || ''
+            const owner = app.owner?.toLowerCase() || ''
+            const repo = app.repo?.toLowerCase() || ''
+            const searchLower = searchTerm.toLowerCase()
+
+            return (
+              clientName.includes(searchLower) ||
+              owner.includes(searchLower) ||
+              repo.includes(searchLower)
+            )
+          })
+        : filteredData
+      setSearchResults(searchResults)
+    }, 500)
+
+    return () => {
+      clearTimeout(debounceTimeout)
+    }
   }, [searchTerm, filter, data, isLoading])
 
   const handleRenewal = async (): Promise<void> => {