3 files changed, 25 insertions, 45 deletions

diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index ee3c62d..3f68529 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -1,7 +1,7 @@
 import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { Form, useLoaderData } from "react-router";
 import { ensureUserLoggedIn } from "../.server/auth";
-import { apiGetGames } from "../api/client";
+import { createApiClient } from "../api/client";
 import BorderedContainerWithCaption from "../components/BorderedContainerWithCaption";
 import NavigateLink from "../components/NavigateLink";
 import UserIcon from "../components/UserIcon";
@@ -12,7 +12,9 @@ export const meta: MetaFunction = () => [
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const { user, token } = await ensureUserLoggedIn(request);
-	const { games } = await apiGetGames(token);
+	const apiClient = createApiClient(token);
+
+	const { games } = await apiClient.getGames();
 	return {
 		user,
 		games,
diff --git a/frontend/app/routes/golf.$gameId.play.tsx b/frontend/app/routes/golf.$gameId.play.tsx
index 4f8468d..8f41257 100644
--- a/frontend/app/routes/golf.$gameId.play.tsx
+++ b/frontend/app/routes/golf.$gameId.play.tsx
@@ -3,11 +3,7 @@ import { useMemo } from "react";
 import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { useLoaderData } from "react-router";
 import { ensureUserLoggedIn } from "../.server/auth";
-import {
-	ApiAuthTokenContext,
-	apiGetGame,
-	apiGetGamePlayLatestState,
-} from "../api/client";
+import { ApiClientContext, createApiClient } from "../api/client";
 import GolfPlayApp from "../components/GolfPlayApp";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => [
@@ -20,29 +16,25 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => [
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
 	const { token, user } = await ensureUserLoggedIn(request);
+	const apiClient = createApiClient(token);
 
 	const gameId = Number(params.gameId);
 
-	const fetchGame = async () => {
-		return (await apiGetGame(token, gameId)).game;
-	};
-	const fetchGameState = async () => {
-		return (await apiGetGamePlayLatestState(token, gameId)).state;
-	};
-
-	const [game, state] = await Promise.all([fetchGame(), fetchGameState()]);
+	const [{ game }, { state: gameState }] = await Promise.all([
+		apiClient.getGame(gameId),
+		apiClient.getGamePlayLatestState(gameId),
+	]);
 
 	return {
-		apiAuthToken: token,
+		apiToken: token,
 		game,
 		player: user,
-		gameState: state,
+		gameState,
 	};
 }
 
 export default function GolfPlay() {
-	const { apiAuthToken, game, player, gameState } =
-		useLoaderData<typeof loader>();
+	const { apiToken, game, player, gameState } = useLoaderData<typeof loader>();
 
 	const store = useMemo(() => {
 		void game.game_id;
@@ -52,14 +44,14 @@ export default function GolfPlay() {
 
 	return (
 		<JotaiProvider store={store}>
-			<ApiAuthTokenContext.Provider value={apiAuthToken}>
+			<ApiClientContext.Provider value={createApiClient(apiToken)}>
 				<GolfPlayApp
 					key={game.game_id}
 					game={game}
 					player={player}
 					initialGameState={gameState}
 				/>
-			</ApiAuthTokenContext.Provider>
+			</ApiClientContext.Provider>
 		</JotaiProvider>
 	);
 }
diff --git a/frontend/app/routes/golf.$gameId.watch.tsx b/frontend/app/routes/golf.$gameId.watch.tsx
index cd01b17..07e8c9e 100644
--- a/frontend/app/routes/golf.$gameId.watch.tsx
+++ b/frontend/app/routes/golf.$gameId.watch.tsx
@@ -3,12 +3,7 @@ import { useMemo } from "react";
 import type { LoaderFunctionArgs, MetaFunction } from "react-router";
 import { useLoaderData } from "react-router";
 import { ensureUserLoggedIn } from "../.server/auth";
-import {
-	ApiAuthTokenContext,
-	apiGetGame,
-	apiGetGameWatchLatestStates,
-	apiGetGameWatchRanking,
-} from "../api/client";
+import { ApiClientContext, createApiClient } from "../api/client";
 import GolfWatchApp from "../components/GolfWatchApp";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => [
@@ -21,27 +16,18 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => [
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
 	const { token } = await ensureUserLoggedIn(request);
+	const apiClient = createApiClient(token);
 
 	const gameId = Number(params.gameId);
 
-	const fetchGame = async () => {
-		return (await apiGetGame(token, gameId)).game;
-	};
-	const fetchRanking = async () => {
-		return (await apiGetGameWatchRanking(token, gameId)).ranking;
-	};
-	const fetchGameStates = async () => {
-		return (await apiGetGameWatchLatestStates(token, gameId)).states;
-	};
-
-	const [game, ranking, gameStates] = await Promise.all([
-		fetchGame(),
-		fetchRanking(),
-		fetchGameStates(),
+	const [{ game }, { ranking }, { states: gameStates }] = await Promise.all([
+		await apiClient.getGame(gameId),
+		await apiClient.getGameWatchRanking(gameId),
+		await apiClient.getGameWatchLatestStates(gameId),
 	]);
 
 	return {
-		apiAuthToken: token,
+		apiToken: token,
 		game,
 		ranking,
 		gameStates,
@@ -49,7 +35,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 }
 
 export default function GolfWatch() {
-	const { apiAuthToken, game, ranking, gameStates } =
+	const { apiToken, game, ranking, gameStates } =
 		useLoaderData<typeof loader>();
 
 	const store = useMemo(() => {
@@ -59,14 +45,14 @@ export default function GolfWatch() {
 
 	return (
 		<JotaiProvider store={store}>
-			<ApiAuthTokenContext.Provider value={apiAuthToken}>
+			<ApiClientContext.Provider value={createApiClient(apiToken)}>
 				<GolfWatchApp
 					key={game.game_id}
 					game={game}
 					initialGameStates={gameStates}
 					initialRanking={ranking}
 				/>
-			</ApiAuthTokenContext.Provider>
+			</ApiClientContext.Provider>
 		</JotaiProvider>
 	);
 }