From 1afd2781818ef5cba0f018811f12cd8653da10b6 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Thu, 20 Mar 2025 23:28:39 +0900 Subject: fix(frontend): fix state corruption --- frontend/app/components/Gaming/RankingTable.tsx | 13 +++++------- frontend/app/components/GolfPlayApp.tsx | 15 +++++++++++--- .../components/GolfPlayApps/GolfPlayAppGaming.tsx | 2 +- frontend/app/components/GolfWatchApp.tsx | 24 ++++++++++++++++++---- .../GolfWatchApps/GolfWatchAppGaming1v1.tsx | 10 ++++----- .../GolfWatchAppGamingMultiplayer.tsx | 7 +------ 6 files changed, 44 insertions(+), 27 deletions(-) (limited to 'frontend/app/components') diff --git a/frontend/app/components/Gaming/RankingTable.tsx b/frontend/app/components/Gaming/RankingTable.tsx index e712ed9..a1e41f5 100644 --- a/frontend/app/components/Gaming/RankingTable.tsx +++ b/frontend/app/components/Gaming/RankingTable.tsx @@ -1,11 +1,6 @@ +import { useAtomValue } from "jotai"; import React from "react"; -import type { components } from "../../api/schema"; - -type RankingEntry = components["schemas"]["RankingEntry"]; - -type Props = { - ranking: RankingEntry[]; -}; +import { rankingAtom } from "../../states/watch"; function TableHeaderCell({ children }: { children: React.ReactNode }) { return ( @@ -33,7 +28,9 @@ function formatUnixTimestamp(timestamp: number) { return `${year}-${month}-${day} ${hours}:${minutes}`; } -export default function RankingTable({ ranking }: Props) { +export default function RankingTable() { + const ranking = useAtomValue(rankingAtom); + return (
diff --git a/frontend/app/components/GolfPlayApp.tsx b/frontend/app/components/GolfPlayApp.tsx index 0bb66eb..97f7cc4 100644 --- a/frontend/app/components/GolfPlayApp.tsx +++ b/frontend/app/components/GolfPlayApp.tsx @@ -1,4 +1,5 @@ import { useAtomValue, useSetAtom } from "jotai"; +import { useHydrateAtoms } from "jotai/utils"; import { useContext, useEffect, useState } from "react"; import { useTimer } from "react-use-precision-timer"; import { useDebouncedCallback } from "use-debounce"; @@ -15,6 +16,7 @@ import { handleSubmitCodePostAtom, handleSubmitCodePreAtom, setCurrentTimestampAtom, + setDurationSecondsAtom, setGameStartedAtAtom, setLatestGameStateAtom, } from "../states/play"; @@ -26,14 +28,21 @@ import GolfPlayAppWaiting from "./GolfPlayApps/GolfPlayAppWaiting"; type Game = components["schemas"]["Game"]; type User = components["schemas"]["User"]; +type LatestGameState = components["schemas"]["LatestGameState"]; type Props = { game: Game; player: User; - initialCode: string; + initialGameState: LatestGameState; }; -export default function GolfPlayApp({ game, player, initialCode }: Props) { +export default function GolfPlayApp({ game, player, initialGameState }: Props) { + useHydrateAtoms([ + [setDurationSecondsAtom, game.duration_seconds], + [setGameStartedAtAtom, game.started_at ?? null], + [setLatestGameStateAtom, initialGameState], + ]); + const apiAuthToken = useContext(ApiAuthTokenContext); const gameStateKind = useAtomValue(gameStateKindAtom); @@ -131,7 +140,7 @@ export default function GolfPlayApp({ game, player, initialCode }: Props) { problemTitle={game.problem.title} problemDescription={game.problem.description} sampleCode={game.problem.sample_code} - initialCode={initialCode} + initialCode={initialGameState.code} onCodeChange={onCodeChange} onCodeSubmit={onCodeSubmit} /> diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx index c4bd772..b9b3159 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx @@ -2,10 +2,10 @@ import { useAtomValue } from "jotai"; import React, { useRef, useState } from "react"; import { Link } from "react-router"; import { + calcCodeSize, gamingLeftTimeSecondsAtom, scoreAtom, statusAtom, - calcCodeSize, } from "../../states/play"; import type { PlayerProfile } from "../../types/PlayerProfile"; import BorderedContainer from "../BorderedContainer"; diff --git a/frontend/app/components/GolfWatchApp.tsx b/frontend/app/components/GolfWatchApp.tsx index 5f23cdd..185f41d 100644 --- a/frontend/app/components/GolfWatchApp.tsx +++ b/frontend/app/components/GolfWatchApp.tsx @@ -1,4 +1,5 @@ -import { useAtom, useAtomValue, useSetAtom } from "jotai"; +import { useAtomValue, useSetAtom } from "jotai"; +import { useHydrateAtoms } from "jotai/utils"; import { useContext, useEffect, useState } from "react"; import { useTimer } from "react-use-precision-timer"; import { @@ -12,6 +13,7 @@ import { gameStateKindAtom, rankingAtom, setCurrentTimestampAtom, + setDurationSecondsAtom, setGameStartedAtAtom, setLatestGameStatesAtom, } from "../states/watch"; @@ -23,19 +25,34 @@ import GolfWatchAppWaiting1v1 from "./GolfWatchApps/GolfWatchAppWaiting1v1"; import GolfWatchAppWaitingMultiplayer from "./GolfWatchApps/GolfWatchAppWaitingMultiplayer"; type Game = components["schemas"]["Game"]; +type LatestGameState = components["schemas"]["LatestGameState"]; +type RankingEntry = components["schemas"]["RankingEntry"]; export type Props = { game: Game; + initialGameStates: { [key: string]: LatestGameState }; + initialRanking: RankingEntry[]; }; -export default function GolfWatchApp({ game }: Props) { +export default function GolfWatchApp({ + game, + initialGameStates, + initialRanking, +}: Props) { + useHydrateAtoms([ + [rankingAtom, initialRanking], + [setDurationSecondsAtom, game.duration_seconds], + [setGameStartedAtAtom, game.started_at ?? null], + [setLatestGameStatesAtom, initialGameStates], + ]); + const apiAuthToken = useContext(ApiAuthTokenContext); const gameStateKind = useAtomValue(gameStateKindAtom); const setGameStartedAt = useSetAtom(setGameStartedAtAtom); const setCurrentTimestamp = useSetAtom(setCurrentTimestampAtom); const setLatestGameStates = useSetAtom(setLatestGameStatesAtom); - const [ranking, setRanking] = useAtom(rankingAtom); + const setRanking = useSetAtom(rankingAtom); useTimer({ delay: 1000, startImmediately: true }, setCurrentTimestamp); @@ -135,7 +152,6 @@ export default function GolfWatchApp({ game }: Props) { ) : ( - + -- cgit v1.2.3-70-g09d2