refactor(frontend): add stronger typing to useWebSocket()

3 files changed, 28 insertions, 10 deletions

diff --git a/frontend/app/components/GolfPlayApp.client.tsx b/frontend/app/components/GolfPlayApp.client.tsx
index 70c463f..4e200e2 100644
--- a/frontend/app/components/GolfPlayApp.client.tsx
+++ b/frontend/app/components/GolfPlayApp.client.tsx
@@ -1,14 +1,15 @@
 import { useEffect, useState } from "react";
-import useWebSocket, { ReadyState } from "react-use-websocket";
 import { useDebouncedCallback } from "use-debounce";
 import type { components } from "../.server/api/schema";
+import useWebSocket, { ReadyState } from "../hooks/useWebSocket";
 import GolfPlayAppConnecting from "./GolfPlayApps/GolfPlayAppConnecting";
 import GolfPlayAppFinished from "./GolfPlayApps/GolfPlayAppFinished";
 import GolfPlayAppGaming from "./GolfPlayApps/GolfPlayAppGaming";
 import GolfPlayAppStarting from "./GolfPlayApps/GolfPlayAppStarting";
 import GolfPlayAppWaiting from "./GolfPlayApps/GolfPlayAppWaiting";
 
-type WebSocketMessage = components["schemas"]["GamePlayerMessageS2C"];
+type GamePlayerMessageS2C = components["schemas"]["GamePlayerMessageS2C"];
+type GamePlayerMessageC2S = components["schemas"]["GamePlayerMessageC2S"];
 
 type Game = components["schemas"]["Game"];
 
@@ -26,8 +27,10 @@ export default function GolfPlayApp({
 			? `ws://localhost:8002/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/play?token=${sockToken}`
 			: `wss://t.nil.ninja/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/play?token=${sockToken}`;
 
-	const { sendJsonMessage, lastJsonMessage, readyState } =
-		useWebSocket<WebSocketMessage>(socketUrl, {});
+	const { sendJsonMessage, lastJsonMessage, readyState } = useWebSocket<
+		GamePlayerMessageS2C,
+		GamePlayerMessageC2S
+	>(socketUrl);
 
 	const [gameState, setGameState] = useState<GameState>("connecting");
 
diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx
index a9c9989..cef6f9a 100644
--- a/frontend/app/components/GolfWatchApp.client.tsx
+++ b/frontend/app/components/GolfWatchApp.client.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import useWebSocket, { ReadyState } from "react-use-websocket";
 import type { components } from "../.server/api/schema";
+import useWebSocket, { ReadyState } from "../hooks/useWebSocket";
 import GolfWatchAppConnecting from "./GolfWatchApps/GolfWatchAppConnecting";
 import GolfWatchAppFinished from "./GolfWatchApps/GolfWatchAppFinished";
 import GolfWatchAppGaming, {
@@ -9,7 +9,8 @@ import GolfWatchAppGaming, {
 import GolfWatchAppStarting from "./GolfWatchApps/GolfWatchAppStarting";
 import GolfWatchAppWaiting from "./GolfWatchApps/GolfWatchAppWaiting";
 
-type WebSocketMessage = components["schemas"]["GameWatcherMessageS2C"];
+type GameWatcherMessageS2C = components["schemas"]["GameWatcherMessageS2C"];
+type GameWatcherMessageC2S = never;
 
 type Game = components["schemas"]["Game"];
 
@@ -27,10 +28,10 @@ export default function GolfWatchApp({
 			? `ws://localhost:8002/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/watch?token=${sockToken}`
 			: `wss://t.nil.ninja/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/watch?token=${sockToken}`;
 
-	const { lastJsonMessage, readyState } = useWebSocket<WebSocketMessage>(
-		socketUrl,
-		{},
-	);
+	const { lastJsonMessage, readyState } = useWebSocket<
+		GameWatcherMessageS2C,
+		GameWatcherMessageC2S
+	>(socketUrl);
 
 	const [gameState, setGameState] = useState<GameState>("connecting");
 
diff --git a/frontend/app/hooks/useWebSocket.ts b/frontend/app/hooks/useWebSocket.ts
new file mode 100644
index 0000000..8fe688f
--- /dev/null
+++ b/frontend/app/hooks/useWebSocket.ts
@@ -0,0 +1,14 @@
+import useWebSocketOriginal, { ReadyState } from "react-use-websocket";
+
+export { ReadyState };
+
+// Typed version of useWebSocket() hook.
+export default function useWebSocket<ReceiveMessage, SendMessage>(
+	url: string,
+): {
+	sendJsonMessage: (message: SendMessage) => void;
+	lastJsonMessage: ReceiveMessage;
+	readyState: ReadyState;
+} {
+	return useWebSocketOriginal(url);
+}