aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/pages/GolfWatchPage.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/pages/GolfWatchPage.tsx')
-rw-r--r--frontend/app/pages/GolfWatchPage.tsx116
1 files changed, 58 insertions, 58 deletions
diff --git a/frontend/app/pages/GolfWatchPage.tsx b/frontend/app/pages/GolfWatchPage.tsx
index 168bd6f..013e1a0 100644
--- a/frontend/app/pages/GolfWatchPage.tsx
+++ b/frontend/app/pages/GolfWatchPage.tsx
@@ -11,69 +11,69 @@ type LatestGameState = components["schemas"]["LatestGameState"];
type RankingEntry = components["schemas"]["RankingEntry"];
export default function GolfWatchPage({ gameId }: { gameId: string }) {
- const [game, setGame] = useState<Game | null>(null);
- const [ranking, setRanking] = useState<RankingEntry[]>([]);
- const [gameStates, setGameStates] = useState<{
- [key: string]: LatestGameState;
- }>({});
- const [loading, setLoading] = useState(true);
- const [error, setError] = useState(false);
+ const [game, setGame] = useState<Game | null>(null);
+ const [ranking, setRanking] = useState<RankingEntry[]>([]);
+ const [gameStates, setGameStates] = useState<{
+ [key: string]: LatestGameState;
+ }>({});
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(false);
- const gameIdNum = Number(gameId);
+ const gameIdNum = Number(gameId);
- usePageTitle(
- game
- ? `Golf Watching ${game.display_name} | ${APP_NAME}`
- : `Golf Watching | ${APP_NAME}`,
- );
+ usePageTitle(
+ game
+ ? `Golf Watching ${game.display_name} | ${APP_NAME}`
+ : `Golf Watching | ${APP_NAME}`,
+ );
- useEffect(() => {
- const apiClient = createApiClient();
- Promise.all([
- apiClient.getGame(gameIdNum),
- apiClient.getGameWatchRanking(gameIdNum),
- apiClient.getGameWatchLatestStates(gameIdNum),
- ])
- .then(([{ game }, { ranking }, { states }]) => {
- setGame(game);
- setRanking(ranking);
- setGameStates(states);
- })
- .catch(() => setError(true))
- .finally(() => setLoading(false));
- }, [gameIdNum]);
+ useEffect(() => {
+ const apiClient = createApiClient();
+ Promise.all([
+ apiClient.getGame(gameIdNum),
+ apiClient.getGameWatchRanking(gameIdNum),
+ apiClient.getGameWatchLatestStates(gameIdNum),
+ ])
+ .then(([{ game }, { ranking }, { states }]) => {
+ setGame(game);
+ setRanking(ranking);
+ setGameStates(states);
+ })
+ .catch(() => setError(true))
+ .finally(() => setLoading(false));
+ }, [gameIdNum]);
- const store = useMemo(() => {
- if (!game) return null;
- return createStore();
- }, [game]);
+ const store = useMemo(() => {
+ if (!game) return null;
+ return createStore();
+ }, [game]);
- if (loading) {
- return (
- <div className="min-h-screen bg-gray-100 flex items-center justify-center">
- <p className="text-gray-500">Loading...</p>
- </div>
- );
- }
+ if (loading) {
+ return (
+ <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+ <p className="text-gray-500">Loading...</p>
+ </div>
+ );
+ }
- if (error || !game || !store) {
- return (
- <div className="min-h-screen bg-gray-100 flex items-center justify-center">
- <p className="text-red-500">試合が見つかりませんでした</p>
- </div>
- );
- }
+ if (error || !game || !store) {
+ return (
+ <div className="min-h-screen bg-gray-100 flex items-center justify-center">
+ <p className="text-red-500">試合が見つかりませんでした</p>
+ </div>
+ );
+ }
- return (
- <JotaiProvider store={store}>
- <ApiClientContext.Provider value={createApiClient()}>
- <GolfWatchApp
- key={game.game_id}
- game={game}
- initialGameStates={gameStates}
- initialRanking={ranking}
- />
- </ApiClientContext.Provider>
- </JotaiProvider>
- );
+ return (
+ <JotaiProvider store={store}>
+ <ApiClientContext.Provider value={createApiClient()}>
+ <GolfWatchApp
+ key={game.game_id}
+ game={game}
+ initialGameStates={gameStates}
+ initialRanking={ranking}
+ />
+ </ApiClientContext.Provider>
+ </JotaiProvider>
+ );
}