From 3a1e09991708bff1d0c0cfd5b1b091924cca9e8f Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 29 Jul 2024 22:15:03 +0900
Subject: fix(frontend): make GolfPlayApp and GolfWatchApp client-only
 components to fix SSR errors

---
 frontend/app/routes/golf.$gameId.play.tsx  | 12 +++++++++---
 frontend/app/routes/golf.$gameId.watch.tsx | 12 +++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'frontend/app/routes')

diff --git a/frontend/app/routes/golf.$gameId.play.tsx b/frontend/app/routes/golf.$gameId.play.tsx
index 5868640..3932b4b 100644
--- a/frontend/app/routes/golf.$gameId.play.tsx
+++ b/frontend/app/routes/golf.$gameId.play.tsx
@@ -1,8 +1,10 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { ClientOnly } from "remix-utils/client-only";
 import { isAuthenticated } from "../.server/auth";
 import { apiClient } from "../.server/api/client";
-import { useLoaderData } from "@remix-run/react";
-import GolfPlayApp from "../components/GolfPlayApp";
+import GolfPlayApp from "../components/GolfPlayApp.client";
+import GolfPlayAppConnecting from "../components/GolfPlayApps/GolfPlayAppConnecting";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -60,5 +62,9 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 export default function GolfPlay() {
   const { game, sockToken } = useLoaderData<typeof loader>();
 
-  return <GolfPlayApp game={game} sockToken={sockToken} />;
+  return (
+    <ClientOnly fallback={<GolfPlayAppConnecting />}>
+      {() => <GolfPlayApp game={game} sockToken={sockToken} />}
+    </ClientOnly>
+  );
 }
diff --git a/frontend/app/routes/golf.$gameId.watch.tsx b/frontend/app/routes/golf.$gameId.watch.tsx
index 4093295..eeb6fb9 100644
--- a/frontend/app/routes/golf.$gameId.watch.tsx
+++ b/frontend/app/routes/golf.$gameId.watch.tsx
@@ -1,8 +1,10 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { ClientOnly } from "remix-utils/client-only";
 import { isAuthenticated } from "../.server/auth";
 import { apiClient } from "../.server/api/client";
-import { useLoaderData } from "@remix-run/react";
-import GolfWatchApp from "../components/GolfWatchApp";
+import GolfWatchApp from "../components/GolfWatchApp.client";
+import GolfWatchAppConnecting from "../components/GolfWatchApps/GolfWatchAppConnecting";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -60,5 +62,9 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 export default function GolfWatch() {
   const { game, sockToken } = useLoaderData<typeof loader>();
 
-  return <GolfWatchApp game={game} sockToken={sockToken} />;
+  return (
+    <ClientOnly fallback={<GolfWatchAppConnecting />}>
+      {() => <GolfWatchApp game={game} sockToken={sockToken} />}
+    </ClientOnly>
+  );
 }
-- 
cgit v1.2.3-70-g09d2