aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/routes/golf.$gameId.play.tsx
blob: 1df7da8f782556b127dfdb070d1240ebdc71e5ca (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { Provider as JotaiProvider, createStore } from "jotai";
import { useMemo } from "react";
import type { LoaderFunctionArgs, MetaFunction } from "react-router";
import { redirect, useLoaderData } from "react-router";
import { ensureUserLoggedIn } from "../.server/auth";
import { ApiClientContext, createApiClient } from "../api/client";
import GolfPlayApp from "../components/GolfPlayApp";

export const meta: MetaFunction<typeof loader> = ({ data }) => [
	{
		title: data
			? `Golf Playing ${data.game.display_name} | iOSDC Japan 2025 Albatross`
			: "Golf Playing | iOSDC Japan 2025 Albatross",
	},
];

export async function loader({ params, request }: LoaderFunctionArgs) {
	const { token, user } = await ensureUserLoggedIn(request);
	const apiClient = createApiClient(token);

	const gameId = Number(params.gameId);

	try {
		const [{ game }, { state: gameState }] = await Promise.all([
			apiClient.getGame(gameId),
			apiClient.getGamePlayLatestState(gameId),
		]);

		return {
			apiToken: token,
			game,
			player: user,
			gameState,
		};
	} catch {
		throw redirect("/dashboard");
	}
}

export default function GolfPlay() {
	const { apiToken, game, player, gameState } = useLoaderData<typeof loader>();

	const store = useMemo(() => {
		void game.game_id;
		void player.user_id;
		return createStore();
	}, [game.game_id, player.user_id]);

	return (
		<JotaiProvider store={store}>
			<ApiClientContext.Provider value={createApiClient(apiToken)}>
				<GolfPlayApp
					key={game.game_id}
					game={game}
					player={player}
					initialGameState={gameState}
				/>
			</ApiClientContext.Provider>
		</JotaiProvider>
	);
}