Merge pull request #136 from Avasam/develop

Develop

Author: Avasam

.idea/speedrun.com_global_leaderboard_webapp.iml renamed to .idea/speedrun.com_global_scoreboard_webapp.iml

@@ -1,3 +1,4 @@
 UPDATE player
-SET last_update = DATEADD(dd, -6, CURRENT_TIMESTAMP)
-WHERE user_id = '';
+SET last_update = subdate(current_date, 7)
+WHERE last_update > subdate(current_date, 7)
+AND user_id = '';

Changescripts/Reset update time for user id.sql

@@ -14,14 +14,14 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-regular-svg-icons": "^5.13.0",
-    "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-regular-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "bootstrap": "^4.5.0",
     "react": "^16.13.1",
-    "react-bootstrap": "^1.0.1",
-    "react-bootstrap-table-next": "^4.0.2",
+    "react-bootstrap": "^1.3.0",
+    "react-bootstrap-table-next": "^4.0.3",
     "react-bootstrap-table2-filter": "^1.3.3",
     "react-bootstrap-table2-paginator": "^2.1.2",
     "react-bootstrap-table2-toolkit": "^2.1.3",
@@ -31,14 +31,14 @@
   },
   "devDependencies": {
     "@types/jest": "^24.0.23",
-    "@types/node": "^13.13.9",
-    "@types/react": "^16.9.35",
+    "@types/node": "^13.13.15",
+    "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
     "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react": "^7.20.3",
     "tslint": "^5.20.1",
     "tslint-react": "^4.2.0",
-    "typescript": "^3.9.3"
+    "typescript": "^3.9.7"
   },
   "browserslist": {
     "production": [

global-scoreboard/package-lock.json

@@ -57,7 +57,14 @@ const App: FC = () => {
         >Copyright</a> {new Date().getFullYear()} by <a
           href="https://github.com/Avasam/"
           target="about"
-        >Samuel Therrien</a>.
+        >Samuel Therrien</a> (
+        <a href="https://www.twitch.tv/Avasam" target="about">
+          Avasam<img
+            height="14"
+            alt="Twitch"
+            src="https://static.twitchcdn.net/assets/favicon-32-d6025c14e900565d6177.png"
+          ></img>
+        </a>).
         Powered by <a
           href="https://www.speedrun.com/"
           target="src"

global-scoreboard/package.json

@@ -223,9 +223,6 @@ const Dashboard = (props: DashboardProps) => {
   }
 
   return <Container className="dashboard-container">
-    <Alert variant="info">
-      We have switched to a new URL! Makes sure to update your bookmark!
-    </Alert>
     <Alert
       variant={alertVariant}
       style={{ visibility: alertMessage ? 'visible' : 'hidden' }}

global-scoreboard/src/App.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
+            })
+            props.onSearch?.(searchText)
+          }),
+    // Note: 500 is double the default table update
+    500)
+
+  return <FormLabel>
+    <FormControl
+      className={props.className}
+      placeholder={props.placeholder}
+      onChange={e => handleOnChange(e.currentTarget.value)}
+    />
+  </FormLabel>
+
+}
+
+export default GameCategorySearch

global-scoreboard/src/Dashboard/Dashboard.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/GameSearch/GameCategorySearchBar.tsx

@@ -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

global-scoreboard/src/GameSearch/GameSearch.tsx

@@ -126,7 +126,8 @@ def __set_points(self) -> None:
                 # TODO: This is not optimized
                 pre_fix_worst_time = valid_runs[-1]["run"]["times"]["primary_t"]
                 # TODO: Extract "cutoff everything after soft cutoff" to its own function
-                # Find the time that's most often repeated in the leaderboard (after the 8th octile) and cut off after
+                # Find the time that's most often repeated in the leaderboard (after the 80th percentile)
+                # and cut off everything after that
                 cut_off_80th_percentile: int = valid_runs[int(len(valid_runs)*0.8)]["run"]["times"]["primary_t"]
                 count: int = 0
                 most_repeated_time_pos: int = 0

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

@@ -7,7 +7,7 @@
 import simplejson
 import requests
 
-HTTP_RETRYABLE_ERRORS = [401, 420, 500, 502]
+HTTP_RETRYABLE_ERRORS = [401, 420, 502]
 HTTP_ERROR_RETRY_DELAY_MIN = 5
 HTTP_ERROR_RETRY_DELAY_MAX = 15