1 files changed, 54 insertions, 0 deletions
diff --git a/frontend/app/routes/golf.$gameId.watch.tsx b/frontend/app/routes/golf.$gameId.watch.tsx
new file mode 100644
index 0000000..28c17cc
--- /dev/null
+++ b/frontend/app/routes/golf.$gameId.watch.tsx
@@ -0,0 +1,54 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { isAuthenticated } from "../.server/auth";
+import { apiClient } from "../.server/api/client";
+import { useLoaderData } from "@remix-run/react";
+import GolfWatchApp from "../components/GolfWatchApp";
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const { token } = await isAuthenticated(request, {
+    failureRedirect: "/login",
+  });
+
+  const fetchGame = async () => {
+    const { data, error } = await apiClient.GET("/games/{game_id}", {
+      params: {
+        path: {
+          game_id: Number(params.gameId),
+        },
+        header: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    });
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data;
+  };
+
+  const fetchSockToken = async () => {
+    const { data, error } = await apiClient.GET("/token", {
+      params: {
+        header: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    });
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data.token;
+  };
+
+  const [game, sockToken] = await Promise.all([fetchGame(), fetchSockToken()]);
+  return {
+    game,
+    sockToken,
+  };
+}
+
+export default function GolfWatch() {
+  const { game, sockToken } = useLoaderData<typeof loader>();
+
+  return <GolfWatchApp game={game} sockToken={sockToken} />;
+}