Custom game values search with SRC search and debounce

Author: Avasam

global-scoreboard/src/GameSearch/GameCategorySearchBar.tsx

@@ -0,0 +1,59 @@
+import { FormControl, FormLabel } from 'react-bootstrap'
+import { SearchFieldProps, SearchProps } from 'react-bootstrap-table2-toolkit'
+import React from 'react'
+import { apiGet } from '../fetchers/api'
+
+type IdToNameMap = { [key: string]: string }
+
+type GameCategorySearchProps =
+  SearchProps
+  & SearchFieldProps
+  & {
+    setGameMap: React.Dispatch<React.SetStateAction<IdToNameMap>>
+  }
+
+function debounce<T>(fn: (...args: T[]) => void, time: number) {
+  let timeout: NodeJS.Timeout | null
+  return wrapper
+  function wrapper(...args: T[]) {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(() => {
+      timeout = null
+      fn(...args)
+    }, time)
+  }
+}
+
+const GameCategorySearch = (props: GameCategorySearchProps) => {
+  const handleOnChange = debounce(
+    (searchText: string) =>
+      !searchText
+        ? props.onClear?.()
+        : apiGet('https://www.speedrun.com/api/v1/games', { name: searchText, max: 200 }, false)
+          .then(res => res.json())
+          .then<{ id: string, names: { international: string } }[]>(res => res.data)
+          .then<IdToNameMap>(games => Object.fromEntries(games.map(game => [game.id, game.names.international])))
+          .then(games => {
+            props.setGameMap(prevGames => {
+              const newGames = { ...prevGames, ...games }
+              localStorage.setItem('games', JSON.stringify(newGames))
+              return newGames
+            })
+            return props.onSearch?.(searchText)
+          }),
+    500)
+  // Note: 500 is double the default table update
+
+  return <FormLabel>
+    <FormControl
+      className={props.className}
+      placeholder={props.placeholder}
+      onChange={e => handleOnChange(e.currentTarget.value)}
+    />
+  </FormLabel>
+
+}
+
+export default GameCategorySearch

global-scoreboard/src/GameSearch/GameSearch.tsx

@@ -5,17 +5,17 @@ import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.m
 import './GameSearch.css'
 import BootstrapTable, { Column } from 'react-bootstrap-table-next'
 import { Container, Dropdown, DropdownButton, FormControl, InputGroup, Spinner } from 'react-bootstrap'
-import React, { Component, useEffect, useRef, useState } from 'react'
-import ToolkitProvider, { Search, SearchProps, ToolkitProviderProps } from 'react-bootstrap-table2-toolkit'
+import React, { useEffect, useState } from 'react'
+import ToolkitProvider, { ToolkitProviderProps } from 'react-bootstrap-table2-toolkit'
 import filterFactory, { Comparator, multiSelectFilter, numberFilter } from 'react-bootstrap-table2-filter'
 import paginationFactory, { PaginationListStandalone, PaginationProvider, PaginationTotalStandalone, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import GameCategorySearch from './GameCategorySearchBar'
 import { Picky } from 'react-picky'
 import { apiGet } from '../fetchers/api'
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 import { faLongArrowAltDown } from '@fortawesome/free-solid-svg-icons'
 import { faLongArrowAltUp } from '@fortawesome/free-solid-svg-icons'
-const { SearchBar } = Search
 
 interface PlatformDto {
   id: string
@@ -274,8 +274,6 @@ const fetchValueNamesForRun = async (runId: string) => {
 }
 
 const GameSearch = () => {
-  const searchBarRef = useRef<Component<SearchProps>>(null)
-  const boostrapTableRef = useRef<BootstrapTable>(null)
   const [gameValues, setGameValues] = useState<GameValueRow[]>([])
   const [platforms, setPlatforms] = useState<IdToNameMap>()
   const [selectedPlatforms, setSelectedPlatforms] = useState<PlatformSelectOption[]>([])
@@ -294,13 +292,13 @@ const GameSearch = () => {
     getAllPlatforms().then(setPlatforms)
   }, [])
 
-  const doPlatformSelection = (platforms: PlatformSelectOption[]) => {
-    platformFilter(platforms.map(platform => platform.id))
-    setSelectedPlatforms(platforms)
+  const doPlatformSelection = (selectedPlatformOptions: PlatformSelectOption[]) => {
+    platformFilter(selectedPlatformOptions.map(platform => platform.id))
+    setSelectedPlatforms(selectedPlatformOptions)
   }
-  const handlePlatformSelection = (platforms: PlatformSelectOption[]) => {
-    doPlatformSelection(platforms)
-    localStorage.setItem('selectedPlatforms', JSON.stringify(platforms))
+  const handlePlatformSelection = (selectedPlatformOptions: PlatformSelectOption[]) => {
+    doPlatformSelection(selectedPlatformOptions)
+    localStorage.setItem('selectedPlatforms', JSON.stringify(selectedPlatformOptions))
   }
 
   const doMinTimeChange = (minTime: string) => {
@@ -353,10 +351,10 @@ const GameSearch = () => {
         >
           {(({ paginationProps, paginationTableProps }) =>
             <div>
-              <SearchBar
-                ref={searchBarRef}
+              <GameCategorySearch
                 {...toolkitprops.searchProps}
                 placeholder="Game / Category search"
+                setGameMap={setGameMap}
               />
               <Picky
                 id="platform-multiselect"
@@ -401,7 +399,6 @@ const GameSearch = () => {
               </div>
               <SizePerPageDropdownStandalone {...paginationProps} />
               <BootstrapTable
-                ref={boostrapTableRef}
                 wrapperClasses="table-responsive"
                 striped
                 {...toolkitprops.baseProps}

global-scoreboard/src/react-bootstrap-table-next.d.ts

@@ -26,6 +26,8 @@
 // - CustomFilterProps extends
 // - NumberFIlterFunction
 // - FilterProps.getFilter exists
+// - export SearchFieldProps and SearchProps
+// - onSearch has first parameter searchText: string
 
 type RowFieldValue = ReactText | Date | TODO
 type TODO = any
@@ -324,15 +326,15 @@ declare module 'react-bootstrap-table2-toolkit' {
     className?: string
     style?: {}
   }
-  interface SearchFieldProps {
+  export interface SearchFieldProps {
     className?: string
     placeholder?: string
-    ref: SearchBar
+    ref?: SearchBar
   }
-  interface SearchProps {
+  export interface SearchProps {
     searchText?: string
     onClear?(): void
-    onSearch?(): void
+    onSearch?(searchText: string): void
   }
   export class ColumnToggle {
     static ToggleList(props: ColumnToggleProps): ReactElement