feat: implemented caching for analysisgamelist + profile page game list

Author: kevinjosethomas

src/components/Analysis/AnalysisGameList.tsx

@@ -58,6 +58,30 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   const [localHandGames, setLocalHandGames] = useState(analysisHandList)
   const [localBrainGames, setLocalBrainGames] = useState(analysisBrainList)
 
+  const [fetchedCache, setFetchedCache] = useState<{
+    [key: string]: { [page: number]: boolean }
+  }>({
+    play: {},
+    hand: {},
+    brain: {},
+    pgn: {},
+    tournament: {},
+  })
+
+  const [totalPagesCache, setTotalPagesCache] = useState<{
+    [key: string]: number
+  }>({})
+
+  const [currentPagePerTab, setCurrentPagePerTab] = useState<{
+    [key: string]: number
+  }>({
+    play: 1,
+    hand: 1,
+    brain: 1,
+    pgn: 1,
+    tournament: 1,
+  })
+
   const listKeys = useMemo(() => {
     return analysisTournamentList
       ? Array.from(analysisTournamentList.keys()).sort(
@@ -95,56 +119,104 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
 
   useEffect(() => {
     if (selected !== 'tournament' && selected !== 'pgn') {
-      setLoading(true)
-      getAnalysisGameList(selected, currentPage).then((data) => {
-        const parse = (
-          game: {
-            game_id: string
-            maia_name: string
-            result: string
-            player_color: 'white' | 'black'
-          },
-          type: string,
-        ) => {
-          const raw = game.maia_name.replace('_kdd_', ' ')
-          const maia = raw.charAt(0).toUpperCase() + raw.slice(1)
+      const isAlreadyFetched = fetchedCache[selected]?.[currentPage]
+
+      if (!isAlreadyFetched) {
+        setLoading(true)
+
+        setFetchedCache((prev) => ({
+          ...prev,
+          [selected]: { ...prev[selected], [currentPage]: true },
+        }))
+
+        getAnalysisGameList(selected, currentPage)
+          .then((data) => {
+            const parse = (
+              game: {
+                game_id: string
+                maia_name: string
+                result: string
+                player_color: 'white' | 'black'
+              },
+              type: string,
+            ) => {
+              const raw = game.maia_name.replace('_kdd_', ' ')
+              const maia = raw.charAt(0).toUpperCase() + raw.slice(1)
+
+              return {
+                id: game.game_id,
+                label:
+                  game.player_color === 'white'
+                    ? `You vs. ${maia}`
+                    : `${maia} vs. You`,
+                result: game.result,
+                type,
+              }
+            }
 
-          return {
-            id: game.game_id,
-            label:
-              game.player_color === 'white'
-                ? `You vs. ${maia}`
-                : `${maia} vs. You`,
-            result: game.result,
-            type,
-          }
-        }
+            const parsedGames = data.games.map((game: GameData) =>
+              parse(game, selected),
+            )
+            const calculatedTotalPages = Math.ceil(data.total / 100)
 
-        if (selected === 'play') {
-          setLocalPlayGames(
-            data.games.map((game: GameData) => parse(game, 'play')),
-          )
-        } else if (selected === 'hand') {
-          setLocalHandGames(
-            data.games.map((game: GameData) => parse(game, 'hand')),
-          )
-        } else if (selected === 'brain') {
-          setLocalBrainGames(
-            data.games.map((game: GameData) => parse(game, 'brain')),
-          )
-        }
-        setTotalPages(Math.ceil(data.total / 100))
-        setLoading(false)
-      })
+            setTotalPagesCache((prev) => ({
+              ...prev,
+              [selected]: calculatedTotalPages,
+            }))
+
+            if (selected === 'play') {
+              setLocalPlayGames((prev) =>
+                currentPage === 1 ? parsedGames : [...prev, ...parsedGames],
+              )
+            } else if (selected === 'hand') {
+              setLocalHandGames((prev) =>
+                currentPage === 1 ? parsedGames : [...prev, ...parsedGames],
+              )
+            } else if (selected === 'brain') {
+              setLocalBrainGames((prev) =>
+                currentPage === 1 ? parsedGames : [...prev, ...parsedGames],
+              )
+            }
+            setLoading(false)
+          })
+          .catch(() => {
+            setFetchedCache((prev) => {
+              const newCache = { ...prev }
+              delete newCache[selected][currentPage]
+              return newCache
+            })
+            setLoading(false)
+          })
+      }
+    }
+  }, [selected, currentPage, fetchedCache])
+
+  useEffect(() => {
+    if (totalPagesCache[selected]) {
+      setTotalPages(totalPagesCache[selected])
+    } else if (selected === 'pgn' || selected === 'tournament') {
+      setTotalPages(1)
     }
-  }, [selected, currentPage])
+
+    setCurrentPage(currentPagePerTab[selected])
+  }, [selected, totalPagesCache, currentPagePerTab])
 
   const handlePageChange = (newPage: number) => {
     if (newPage >= 1 && newPage <= totalPages) {
       setCurrentPage(newPage)
+      setCurrentPagePerTab((prev) => ({
+        ...prev,
+        [selected]: newPage,
+      }))
     }
   }
 
+  const handleTabChange = (
+    newTab: 'tournament' | 'play' | 'hand' | 'brain' | 'pgn',
+  ) => {
+    setSelected(newTab)
+  }
+
   return analysisTournamentList ? (
     <div className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded">
       <div className="flex h-full w-full flex-col">
@@ -153,31 +225,31 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
             label="Play"
             name="play"
             selected={selected}
-            setSelected={setSelected}
+            setSelected={handleTabChange}
           />
           <Header
             label="Hand"
             name="hand"
             selected={selected}
-            setSelected={setSelected}
+            setSelected={handleTabChange}
           />
           <Header
             label="Brain"
             name="brain"
             selected={selected}
-            setSelected={setSelected}
+            setSelected={handleTabChange}
           />
           <Header
             label="Lichess"
             name="pgn"
             selected={selected}
-            setSelected={setSelected}
+            setSelected={handleTabChange}
           />
           <Header
             label="WC"
             name="tournament"
             selected={selected}
-            setSelected={setSelected}
+            setSelected={handleTabChange}
           />
         </div>
         <div className="red-scrollbar flex h-full flex-col overflow-y-scroll">