diff options
Diffstat (limited to 'frontend/app/pages/GolfWatchPage.tsx')
| -rw-r--r-- | frontend/app/pages/GolfWatchPage.tsx | 116 |
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> + ); } |
