From 1afd2781818ef5cba0f018811f12cd8653da10b6 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 20 Mar 2025 23:28:39 +0900
Subject: fix(frontend): fix state corruption

---
 frontend/app/routes/golf.$gameId.play.tsx  | 31 ++++++++++++++++-------------
 frontend/app/routes/golf.$gameId.watch.tsx | 32 +++++++++++++++---------------
 2 files changed, 33 insertions(+), 30 deletions(-)

(limited to 'frontend/app/routes')

diff --git a/frontend/app/routes/golf.$gameId.play.tsx b/frontend/app/routes/golf.$gameId.play.tsx
index 1ffe45e..4f8468d 100644
--- a/frontend/app/routes/golf.$gameId.play.tsx
+++ b/frontend/app/routes/golf.$gameId.play.tsx
@@ -1,4 +1,5 @@
-import { useHydrateAtoms } from "jotai/utils";
+import { Provider as JotaiProvider, createStore } from "jotai";
+import { useMemo } from "react";
 import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { useLoaderData } from "react-router";
 import { ensureUserLoggedIn } from "../.server/auth";
@@ -8,11 +9,6 @@ import {
 	apiGetGamePlayLatestState,
 } from "../api/client";
 import GolfPlayApp from "../components/GolfPlayApp";
-import {
-	setDurationSecondsAtom,
-	setGameStartedAtAtom,
-	setLatestGameStateAtom,
-} from "../states/play";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => [
 	{
@@ -48,15 +44,22 @@ export default function GolfPlay() {
 	const { apiAuthToken, game, player, gameState } =
 		useLoaderData<typeof loader>();
 
-	useHydrateAtoms([
-		[setDurationSecondsAtom, game.duration_seconds],
-		[setGameStartedAtAtom, game.started_at ?? null],
-		[setLatestGameStateAtom, gameState],
-	]);
+	const store = useMemo(() => {
+		void game.game_id;
+		void player.user_id;
+		return createStore();
+	}, [game.game_id, player.user_id]);
 
 	return (
-		<ApiAuthTokenContext.Provider value={apiAuthToken}>
-			<GolfPlayApp game={game} player={player} initialCode={gameState.code} />
-		</ApiAuthTokenContext.Provider>
+		<JotaiProvider store={store}>
+			<ApiAuthTokenContext.Provider value={apiAuthToken}>
+				<GolfPlayApp
+					key={game.game_id}
+					game={game}
+					player={player}
+					initialGameState={gameState}
+				/>
+			</ApiAuthTokenContext.Provider>
+		</JotaiProvider>
 	);
 }
diff --git a/frontend/app/routes/golf.$gameId.watch.tsx b/frontend/app/routes/golf.$gameId.watch.tsx
index 42bde52..cd01b17 100644
--- a/frontend/app/routes/golf.$gameId.watch.tsx
+++ b/frontend/app/routes/golf.$gameId.watch.tsx
@@ -1,4 +1,5 @@
-import { useHydrateAtoms } from "jotai/utils";
+import { Provider as JotaiProvider, createStore } from "jotai";
+import { useMemo } from "react";
 import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { useLoaderData } from "react-router";
 import { ensureUserLoggedIn } from "../.server/auth";
@@ -9,12 +10,6 @@ import {
 	apiGetGameWatchRanking,
 } from "../api/client";
 import GolfWatchApp from "../components/GolfWatchApp";
-import {
-	rankingAtom,
-	setDurationSecondsAtom,
-	setGameStartedAtAtom,
-	setLatestGameStatesAtom,
-} from "../states/watch";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => [
 	{
@@ -57,16 +52,21 @@ export default function GolfWatch() {
 	const { apiAuthToken, game, ranking, gameStates } =
 		useLoaderData<typeof loader>();
 
-	useHydrateAtoms([
-		[rankingAtom, ranking],
-		[setDurationSecondsAtom, game.duration_seconds],
-		[setGameStartedAtAtom, game.started_at ?? null],
-		[setLatestGameStatesAtom, gameStates],
-	]);
+	const store = useMemo(() => {
+		void game.game_id;
+		return createStore();
+	}, [game.game_id]);
 
 	return (
-		<ApiAuthTokenContext.Provider value={apiAuthToken}>
-			<GolfWatchApp game={game} />
-		</ApiAuthTokenContext.Provider>
+		<JotaiProvider store={store}>
+			<ApiAuthTokenContext.Provider value={apiAuthToken}>
+				<GolfWatchApp
+					key={game.game_id}
+					game={game}
+					initialGameStates={gameStates}
+					initialRanking={ranking}
+				/>
+			</ApiAuthTokenContext.Provider>
+		</JotaiProvider>
 	);
 }
-- 
cgit v1.2.3-70-g09d2