feat: add local storage parameter to store legacy preference

CSSLab · Feb 12, 2025 · 8719034 · 8719034
1 parent 6c48f78
commit 8719034
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 34 deletions.
diff --git a/src/components/Analysis/ConfigureAnalysis.tsx b/src/components/Analysis/ConfigureAnalysis.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import React from 'react'
+import { useLocalStorage } from 'src/hooks'
 
 import { ContinueAgainstMaia } from 'src/components'
 
@@ -16,6 +17,11 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   launchContinue,
   MAIA_MODELS,
 }: Props) => {
+  const [, setPreferLegacyAnalysis] = useLocalStorage(
+    'preferLegacyAnalysis',
+    false,
+  )
+
   return (
     <div className="flex w-full flex-col items-start justify-start gap-1 p-4">
       <div className="flex w-full flex-col gap-0.5">
@@ -40,6 +46,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         If you are having performance issues, you can switch to our{' '}
         <Link
           href={window.location.href.replace('/analysis', '/analysis/legacy')}
+          onClick={() => setPreferLegacyAnalysis(true)}
           className="text-primary/80 underline transition duration-200 hover:text-primary/100"
         >
           Legacy Analysis

diff --git a/src/components/Analysis/DownloadModelModal.tsx b/src/components/Analysis/DownloadModelModal.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { useEffect } from 'react'
 import { motion } from 'framer-motion'
+import { useLocalStorage } from 'src/hooks'
 
 interface Props {
   progress: number
@@ -11,6 +12,11 @@ export const DownloadModelModal: React.FC<Props> = ({
   progress,
   download,
 }: Props) => {
+  const [preferLegacyAnalysis, setPreferLegacyAnalysis] = useLocalStorage(
+    'preferLegacyAnalysis',
+    false,
+  )
+
   useEffect(() => {
     document.body.style.overflow = 'hidden'
     return () => {
@@ -67,6 +73,7 @@ export const DownloadModelModal: React.FC<Props> = ({
                 '/analysis',
                 '/analysis/legacy',
               )}
+              onClick={() => setPreferLegacyAnalysis(true)}
               className="text-primary/80 underline transition duration-200 hover:text-primary/100"
             >
               Legacy Analysis
@@ -93,19 +100,13 @@ export const DownloadModelModal: React.FC<Props> = ({
               />
             </div>
           ) : null}
-          <div
-            tabIndex={0}
-            role="button"
+          <Link
+            href={window.location.href.replace('/analysis', '/analysis/legacy')}
             className="order-1 flex h-8 cursor-pointer select-none items-center gap-1 self-end rounded bg-background-3 px-3 text-sm transition duration-200 hover:bg-background-2/90 md:order-2 md:h-10 md:px-4 md:text-base"
-            onClick={download}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                download()
-              }
-            }}
+            onClick={() => setPreferLegacyAnalysis(true)}
           >
             <p>Use Legacy Analysis by Default</p>
-          </div>
+          </Link>
           <div
             tabIndex={0}
             role="button"

diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
@@ -45,7 +45,7 @@ import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import type { Key } from 'chessground/types'
 import { Chess, PieceSymbol } from 'chess.ts'
-import { useAnalysisController } from 'src/hooks'
+import { useAnalysisController, useLocalStorage } from 'src/hooks'
 import { AnimatePresence, motion } from 'framer-motion'
 import type { DrawBrushes, DrawShape } from 'chessground/draw'
 import { ConfigureAnalysis } from 'src/components/Analysis/ConfigureAnalysis'
@@ -67,14 +67,22 @@ const AnalysisPage: NextPage = () => {
   const { openedModals, setInstructionsModalProps: setInstructionsModalProps } =
     useContext(ModalContext)
 
+  const router = useRouter()
+  const [preferLegacyAnalysis] = useLocalStorage('preferLegacyAnalysis', false)
+
+  useEffect(() => {
+    if (preferLegacyAnalysis) {
+      router.push(window.location.href.replace('/analysis', '/analysis/legacy'))
+    }
+  }, [preferLegacyAnalysis, router])
+
   useEffect(() => {
     if (!openedModals.analysis) {
       setInstructionsModalProps({ instructionsType: 'analysis' })
     }
     return () => setInstructionsModalProps(undefined)
   }, [setInstructionsModalProps, openedModals.analysis])
 
-  const router = useRouter()
   const { id } = router.query
 
   const [analyzedGame, setAnalyzedGame] = useState<AnalyzedGame | undefined>(
@@ -98,9 +106,15 @@ const AnalysisPage: NextPage = () => {
 
       setAnalyzedGame({ ...game, type: 'tournament' })
       setCurrentId(newId)
-      router.push(`/analysis/${newId.join('/')}`, undefined, {
-        shallow: true,
-      })
+      if (preferLegacyAnalysis) {
+        router.push(`/analysis/legacy/${newId.join('/')}`, undefined, {
+          shallow: true,
+        })
+      } else {
+        router.push(`/analysis/${newId.join('/')}`, undefined, {
+          shallow: true,
+        })
+      }
     },
     [router],
   )
@@ -125,7 +139,13 @@ const AnalysisPage: NextPage = () => {
         type: 'pgn',
       })
       setCurrentId([id, 'pgn'])
-      router.push(`/analysis/${id}/pgn`, undefined, { shallow: true })
+      if (preferLegacyAnalysis) {
+        router.push(`/analysis/legacy/${id}/pgn`, undefined, {
+          shallow: true,
+        })
+      } else {
+        router.push(`/analysis/${id}/pgn`, undefined, { shallow: true })
+      }
     },
     [router],
   )
@@ -147,9 +167,15 @@ const AnalysisPage: NextPage = () => {
 
       setAnalyzedGame({ ...game, type })
       setCurrentId([id, type])
-      router.push(`/analysis/${id}/${type}`, undefined, {
-        shallow: true,
-      })
+      if (preferLegacyAnalysis) {
+        router.push(`/analysis/legacy/${id}/${type}`, undefined, {
+          shallow: true,
+        })
+      } else {
+        router.push(`/analysis/${id}/${type}`, undefined, {
+          shallow: true,
+        })
+      }
     },
     [],
   )
@@ -158,7 +184,7 @@ const AnalysisPage: NextPage = () => {
     ;(async () => {
       if (analyzedGame == undefined) {
         const queryId = id as string[]
-        if (queryId[1] === 'lichess') {
+        if (queryId[1] === 'pgn') {
           const pgn = await getLichessGamePGN(queryId[0])
           getAndSetLichessGames(queryId[0], pgn, undefined)
         } else if (['play', 'hand', 'brain'].includes(queryId[1])) {

diff --git a/src/pages/analysis/index.tsx b/src/pages/analysis/index.tsx
@@ -4,9 +4,11 @@ import { useContext, useEffect } from 'react'
 
 import { Loading } from 'src/components'
 import { AnalysisListContext } from 'src/contexts'
+import { useLocalStorage } from 'src/hooks'
 
 const AnalysisPage: NextPage = () => {
   const { push } = useRouter()
+  const [preferLegacyAnalysis] = useLocalStorage('preferLegacyAnalysis', false)
   const { analysisTournamentList } = useContext(AnalysisListContext)
 
   useEffect(() => {
@@ -16,9 +18,13 @@ const AnalysisPage: NextPage = () => {
       )
       const [firstPart, games] = entries[0]
       const gameId = firstPart.split('---')[0] + '/' + games[0].game_index
-      push('/analysis/' + gameId)
+      if (preferLegacyAnalysis) {
+        push(`/analysis/legacy/${gameId}`)
+      } else {
+        push(`/analysis/${gameId}`)
+      }
     }
-  }, [analysisTournamentList, push])
+  }, [analysisTournamentList, preferLegacyAnalysis, push])
 
   return <Loading />
 }

diff --git a/src/pages/analysis/legacy/[...id].tsx b/src/pages/analysis/legacy/[...id].tsx
@@ -34,8 +34,8 @@ import {
   HorizontalEvaluationBar,
 } from 'src/components'
 import { Color } from 'src/types'
-import { useLegacyAnalysisController } from 'src/hooks'
 import { LegacyAnalyzedGame, MoveMap } from 'src/types/analysis'
+import { useLegacyAnalysisController, useLocalStorage } from 'src/hooks'
 import { ThemeContext, ModalContext, WindowSizeContext } from 'src/contexts'
 import { GameControllerContext } from 'src/contexts/GameControllerContext/GameControllerContext'
 
@@ -69,7 +69,7 @@ const AnalysisPage: NextPage = () => {
     LegacyAnalyzedGame | undefined
   >(undefined)
   const [currentId, setCurrentId] = useState<string[]>(id as string[])
-
+  const [preferLegacyAnalysis] = useLocalStorage('preferLegacyAnalysis', false)
   const getAndSetTournamentGame = useCallback(
     async (
       newId: string[],
@@ -85,9 +85,15 @@ const AnalysisPage: NextPage = () => {
       if (setCurrentMove) setCurrentMove(0)
       setAnalyzedGame({ ...game, type: 'tournament' })
       setCurrentId(newId)
-      router.push(`/analysis/legacy/${newId.join('/')}`, undefined, {
-        shallow: true,
-      })
+      if (preferLegacyAnalysis) {
+        router.push(`/analysis/legacy/${newId.join('/')}`, undefined, {
+          shallow: true,
+        })
+      } else {
+        router.push(`/analysis/${newId.join('/')}`, undefined, {
+          shallow: true,
+        })
+      }
     },
     [router],
   )
@@ -112,7 +118,11 @@ const AnalysisPage: NextPage = () => {
         type: 'pgn',
       })
       setCurrentId([id, 'pgn'])
-      router.push(`/analysis/legacy/${id}/pgn`, undefined, { shallow: true })
+      if (preferLegacyAnalysis) {
+        router.push(`/analysis/legacy/${id}/pgn`, undefined, { shallow: true })
+      } else {
+        router.push(`/analysis/${id}/pgn`, undefined, { shallow: true })
+      }
     },
     [router],
   )
@@ -134,9 +144,15 @@ const AnalysisPage: NextPage = () => {
       if (setCurrentMove) setCurrentMove(0)
       setAnalyzedGame({ ...game, type })
       setCurrentId([id, type])
-      router.push(`/analysis/legacy/${id}/${type}`, undefined, {
-        shallow: true,
-      })
+      if (preferLegacyAnalysis) {
+        router.push(`/analysis/legacy/${id}/${type}`, undefined, {
+          shallow: true,
+        })
+      } else {
+        router.push(`/analysis/${id}/${type}`, undefined, {
+          shallow: true,
+        })
+      }
     },
     [],
   )
@@ -145,7 +161,7 @@ const AnalysisPage: NextPage = () => {
     ;(async () => {
       if (analyzedGame == undefined) {
         const queryId = id as string[]
-        if (queryId[1] === 'licpgnhess') {
+        if (queryId[1] === 'pgn') {
           const pgn = await getLichessGamePGN(queryId[0])
           getAndSetLichessGames(queryId[0], pgn, undefined)
         } else if (['play', 'hand', 'brain'].includes(queryId[1])) {

diff --git a/src/pages/analysis/legacy/index.tsx b/src/pages/analysis/legacy/index.tsx
@@ -3,11 +3,13 @@ import { useRouter } from 'next/router'
 import { useContext, useEffect } from 'react'
 
 import { Loading } from 'src/components'
+import { useLocalStorage } from 'src/hooks'
 import { AnalysisListContext } from 'src/contexts'
 
 const AnalysisPage: NextPage = () => {
   const { push } = useRouter()
   const { analysisTournamentList } = useContext(AnalysisListContext)
+  const [preferLegacyAnalysis] = useLocalStorage('preferLegacyAnalysis', false)
 
   useEffect(() => {
     if (analysisTournamentList) {
@@ -16,9 +18,13 @@ const AnalysisPage: NextPage = () => {
       )
       const [firstPart, games] = entries[0]
       const gameId = firstPart.split('---')[0] + '/' + games[0].game_index
-      push('/analysis/legacy/' + gameId)
+      if (preferLegacyAnalysis) {
+        push(`/analysis/legacy/${gameId}`)
+      } else {
+        push(`/analysis/${gameId}`)
+      }
     }
-  }, [analysisTournamentList, push])
+  }, [analysisTournamentList, preferLegacyAnalysis, push])
 
   return <Loading />
 }