Fuzzy search works almost lag-less

Author: dusnat

package.json

@@ -10,6 +10,8 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "framer-motion": "^4.1.11",
+    "fuse.js": "^6.4.6",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",

src/App.js

@@ -1,57 +1,97 @@
+import React, { useState, useCallback } from 'react'
+import _ from 'lodash'
 import data from './data/ps1_data.json'
 import { Box, Flex } from '@chakra-ui/layout';
+import Fuse from 'fuse.js'
 
 import List from './components/List';
 import Filters from './components/Filters'
 import SearchBar from './components/SearchBar';
 
+const SEARCH_DEBOUNCE_PERIOD = 10
+
+data.pop()
+
 function App() {
-  data.pop()
+  const [stations, setStations] = useState(data)
+  const [searchVal, setSearchVal] = useState('')
+
+  const options = {
+    keys: [
+      {
+        name: 'name',
+        weight: 10
+      },
+      {
+        name: 'projects.title',
+        weight: 4
+      },
+      {
+        name: 'projects.description',
+        weight: 2
+      }
+    ]
+  }
+  const searchIndex = Fuse.createIndex(options.keys, stations)
+  const fuse = new Fuse(stations, options, searchIndex)
+
+  function onSearch(query) {
+    if (query === '') {
+      return data
+    }
+    const results = fuse.search(query).map(({ item }) => item)
+    return results
+  }
+
+  const performSearch = useCallback(_.debounce((query) => {
+    const results = onSearch(query)
+    setStations(results)
+  }, SEARCH_DEBOUNCE_PERIOD), [])
+
+  function onSearchValueChange(query) {
+    performSearch(query)
+  }
+
+
   return (
     <Flex
       height="100vh"
-      // bg="gray.50"
       justifyContent="center"
-      // overflow="hidden"
     >
       <Box
         position="relative"
         display="flex"
         flexDirection="column"
-        // bg="red"
         height="100vh"
-        // mt="150px"
       >
         <Filters/>
         <Box
           ml="350px"
-          // bg="tomato"
           position="relative"
           flex="1 1 auto"
           minWidth="1200px"
           display="flex"
           flexDirection="column"
-          // height="100%"
         >
           <Box
             width="100%"
             height="80px"
-            // bg="aqua"
             display="flex"
             alignItems="center"
             position="absolute"
           >
-            <SearchBar/>
+            <SearchBar
+              onSearch={onSearchValueChange}
+            />
           </Box>
 
           <Box
-            // bg="yellow"
             height="100%"
             boxSizing='border-box'
             mt="80px"
             flex="1 1 auto"
           >
-            <List stations={data}/>
+            <List stations={stations}/>
           </Box>
 
         </Box>

src/components/Filters.js

@@ -17,7 +17,7 @@ const Filters = (props) => {
             boxSizing='border-box'
             padding='8px'
         >
-            Bruh
+            
         </Box>
     )
 }

src/components/SearchBar.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import {
     Box,
     Input,
@@ -10,6 +10,7 @@ import {
 import { FiSearch } from 'react-icons/fi'
 import { FaSearch } from 'react-icons/fa'
 
+
 const SearchBar = (props) => {
     const Icon = (
         <Box>
@@ -31,6 +32,8 @@ const SearchBar = (props) => {
                     placeholder="Search"
                     variant="filled"
                     height="42px"
+                    onChange={(e) => props.onSearch(e.target.value)}
+                    // value={props.value}
                 />
             </InputGroup>
         </Box>

yarn.lock

@@ -5894,6 +5894,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuse.js@^6.4.6:
+  version "6.4.6"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.4.6.tgz#62f216c110e5aa22486aff20be7896d19a059b79"
+  integrity sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw==
+
 gensync@^1.0.0-beta.1:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -7704,7 +7709,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5:
+"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.5:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==