implement search box using fuzzy search

Author: iamping

src/app.tsx

@@ -3,23 +3,15 @@ import { fetchStockRsList } from './services/data.service';
 import { Stock } from './models/stock';
 import { Box, Show, Skeleton } from '@chakra-ui/react';
 import { DataTable } from './components/app/data-table';
-import { initialFilter } from './utils/table.util';
 import { Topbar } from './components/app/topbar';
-import { useAtomValue } from 'jotai';
-import { appSettingsAtom } from './state/atom';
-// import { useEventListener } from 'usehooks-ts';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { filteredStockListAtom, stockListAtom } from './state/atom';
 
 const App: FC = () => {
-  const settings = useAtomValue(appSettingsAtom);
-  const [stockList, setStockList] = useState<Stock[]>([]);
-  const [filteredStockList, setFilteredStockList] = useState<Stock[]>([]);
   const [error, setError] = useState<null | string>(null);
-
-  // useEventListener('keydown', (event) => {
-  //   if (/[A-Za-z- ]/.test(event.key)) {
-  //     console.log('gonna open dialog => ', event.key);
-  //   }
-  // });
+  const [loading, setLoading] = useState<boolean>(true);
+  const setStockList = useSetAtom(stockListAtom);
+  const filteredStockList = useAtomValue(filteredStockListAtom);
 
   // console.log('render app');
 
@@ -33,15 +25,9 @@ const App: FC = () => {
       .catch((e) => {
         console.error(e);
         setError('Something went wrong. Please try again later.');
-      });
-  }, []);
-
-  useEffect(() => {
-    if (stockList.length > 0) {
-      const tmpList = initialFilter(stockList, settings);
-      setFilteredStockList(tmpList);
-    }
-  }, [settings, stockList]);
+      })
+      .finally(() => setLoading(false));
+  }, [setStockList]);
 
   if (error) {
     return error;
@@ -50,10 +36,10 @@ const App: FC = () => {
   return (
     <Box>
       <Topbar />
-      <Show when={filteredStockList.length > 0}>
+      <Show when={!loading}>
         <DataTable data={filteredStockList}></DataTable>
       </Show>
-      <Show when={filteredStockList.length === 0}>
+      <Show when={loading}>
         <Skeleton flex="1" height="4" variant="pulse" marginY={4} />
         <Skeleton flex="1" height="4" variant="pulse" marginY={4} />
         <Skeleton flex="1" height="4" variant="pulse" marginY={4} />

src/components/app/data-table.tsx

@@ -42,15 +42,15 @@ const columnHelper = createColumnHelper<Stock>();
 const columns = [
   columnHelper.accessor('ticker', {
     header: () => 'Ticker',
-    cell: (cell) => cell.getValue(),
+    cell: (cell) => cell.row.original.highlightedTicker ?? cell.getValue(),
     meta: { width: 85, sticky: true },
     enableColumnFilter: false
   }),
   columnHelper.accessor('companyName', {
     header: () => 'Company Name',
     cell: (cell) => (
       <EllipsisText width={200} color="gray.500" title={cell.getValue()}>
-        {cell.getValue()}
+        {cell.row.original.highlightedCompanyName ?? cell.getValue()}
       </EllipsisText>
     ),
     meta: { width: 200 },

src/components/app/dropdown.tsx

@@ -42,10 +42,6 @@ export const Dropdown: FC<DropdownProps> = ({ optionList, type }) => {
     }
   }, [dropdownState, type]);
 
-  // useEffect(() => {
-  //   setValue(optionList[0]);
-  // }, [optionList]);
-
   useEffect(() => {
     if (filterChanged > 0 && type === 'Preset') {
       setValue({ title: 'Manual', value: '-' });

src/components/app/search-box.tsx

@@ -1,13 +1,22 @@
 import { IconButton, Input, Show } from '@chakra-ui/react';
-import { ChangeEvent, CSSProperties, useRef, useState } from 'react';
+import { ChangeEvent, CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import { PiMagnifyingGlassBold, PiArrowCounterClockwiseDuotone, PiXDuotone } from 'react-icons/pi';
 import { InputGroup } from '../ui/input-group';
-import { useEventListener, useMediaQuery, useOnClickOutside } from 'usehooks-ts';
+import { useDebounceCallback, useEventListener, useMediaQuery, useOnClickOutside } from 'usehooks-ts';
 import { mobileMediaQuery } from '../../utils/constant';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { fuzzyListAtom, preFilteredListAtom } from '../../state/atom';
+import { Stock } from '../../models/stock';
+import fuzzysort from 'fuzzysort';
 
 export const SearchBox = () => {
+  // console.log('SearchBox');
   const [open, setOpen] = useState(false);
   const [keyword, setKeyword] = useState('');
+
+  const preFilteredList = useAtomValue(preFilteredListAtom);
+  const setFuzzyList = useSetAtom(fuzzyListAtom);
+
   const divRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -35,6 +44,38 @@ export const SearchBox = () => {
     setKeyword(event.target.value);
   };
 
+  const highlightFn = (m: string, i: number) => (
+    <span className="highlight" key={i}>
+      {m}
+    </span>
+  );
+
+  const fuzzySearch = useCallback(
+    (keyword: string) => {
+      const results = fuzzysort.go(keyword, preFilteredList, {
+        threshold: 0.3,
+        keys: ['ticker', 'companyName']
+      });
+      if (results.length === 0) {
+        setFuzzyList(keyword.length > 0 ? [{ fuzzySearchEmpty: true } as Stock] : []);
+      } else {
+        setFuzzyList(
+          results.map((stock) => {
+            const highlightedTicker = stock[0].target.length > 0 ? stock[0].highlight(highlightFn) : null;
+            const highlightedCompanyName = stock[1].target.length > 0 ? stock[1].highlight(highlightFn) : null;
+            return { ...stock.obj, highlightedTicker, highlightedCompanyName };
+          })
+        );
+      }
+    },
+    [preFilteredList, setFuzzyList]
+  );
+  const debouncedFuzzySearch = useDebounceCallback(fuzzySearch, 250);
+
+  useEffect(() => {
+    debouncedFuzzySearch(keyword);
+  }, [keyword, debouncedFuzzySearch]);
+
   useEventListener('keydown', (event) => {
     const id = (event.target as HTMLElement)?.id ?? '';
     if (id === 'search-stocks' || id === '') {
@@ -45,14 +86,13 @@ export const SearchBox = () => {
           }
           return true;
         });
-        setTimeout(() => {
-          inputRef.current?.focus();
-        }, 0);
       }
       if (event.key === 'Escape') {
-        setOpen(false);
         setKeyword('');
       }
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
     }
   });
 

src/models/stock.ts

@@ -1,7 +1,12 @@
+import { ReactNode } from 'react';
+
 export interface Stock {
   key: number;
   ticker: string;
   companyName: string;
+  highlightedTicker?: ReactNode | string;
+  highlightedCompanyName?: ReactNode | string;
+  fuzzySearchEmpty?: boolean;
   sector: string;
   industry: string;
   exchange: string;

src/state/atom.ts

@@ -7,8 +7,10 @@ import {
   defaultFilterState,
   defaultPreset,
   defaultSettings,
-  defaultView
+  defaultView,
+  initialFilter
 } from '../utils/table.util';
+import { Stock } from '../models/stock';
 
 export const rowCountAtom = atom(-1);
 
@@ -20,6 +22,25 @@ export const dropdownFnAtom = atom<{
   resetPageIndex?: () => void;
 }>({ setColumnFilters: undefined, setColumnVisibility: undefined, resetPageIndex: undefined });
 
+export const stockListAtom = atom<Stock[]>([]);
+export const fuzzyListAtom = atom<Stock[]>([]);
+
+// stock list after exclude (OTC & Biotechnology)
+export const preFilteredListAtom = atom((get) => {
+  const settings = get(appSettingsAtom);
+  const stockList = get(stockListAtom);
+  return initialFilter(stockList, settings);
+});
+
+// stock list after exclude (OTC & Biotechnology) + fuzzy search
+export const filteredStockListAtom = atom((get) => {
+  const fuzzyList = get(fuzzyListAtom);
+  if (fuzzyList.length > 0) {
+    return fuzzyList.some((e) => e.fuzzySearchEmpty) ? [] : fuzzyList;
+  }
+  return get(preFilteredListAtom);
+});
+
 // atom with localstorage
 export const appSettingsAtom = atomWithStorage('appSettings', defaultSettings);