diff --git a/client/src/App.tsx b/client/src/App.tsx index c939766..56d278a 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -11,6 +11,7 @@ import { Box, Button, Tooltip } from "@mui/material"; import { BrowserRouter as Router, Route, Routes, useParams } from "react-router-dom"; import useWebSocket, { ReadyState } from "react-use-websocket"; import ConnectionStatus from "./ConnectionStatus"; +import { sessionsApi, LobbyCreateRequest } from "./api-client"; console.log(`AI Voice Chat Build: ${process.env.REACT_APP_AI_VOICECHAT_BUILD}`); @@ -125,41 +126,22 @@ const LobbyView: React.FC = (props: LobbyProps) => { const getLobby = async (lobbyName: string, session: Session) => { try { - const res = await fetch(`${base}/api/lobby/${session.id}`, { - method: "POST", - cache: "no-cache", - credentials: "same-origin", - headers: { - "Content-Type": "application/json", + const lobbyRequest: LobbyCreateRequest = { + type: "lobby_create", + data: { + name: lobbyName, + private: false, }, - body: JSON.stringify({ - type: "lobby_create", - data: { - name: lobbyName, - private: false, - }, - }), - }); + }; - if (res.status >= 400) { - const error = `Unable to connect to AI Voice Chat server! Try refreshing your browser in a few seconds.`; - console.error(error); - setError(error); - return; - } + const response = await sessionsApi.createLobby(session.id, lobbyRequest); - const data = await res.json(); - if (data.error) { - console.error(`Lobby - Server error: ${data.error}`); - setError(data.error); - return; - } - if (data.type !== "lobby_created") { - console.error(`Lobby - Unexpected response type: ${data.type}`); + if (response.type !== "lobby_created") { + console.error(`Lobby - Unexpected response type: ${response.type}`); setError(`Unexpected response from server`); return; } - const lobby: Lobby = data.data; + const lobby: Lobby = response.data; console.log(`Lobby - Joined lobby`, lobby); setLobby(lobby); } catch (err) { @@ -300,33 +282,16 @@ const App = () => { const getSession = useCallback(async () => { try { - const res = await fetch(`${base}/api/session`, { - method: "GET", - cache: "no-cache", - credentials: "same-origin", - headers: { - "Content-Type": "application/json", - }, - }); - - if (res.status >= 400) { - throw new Error(`HTTP ${res.status}: Unable to connect to AI Voice Chat server`); - } - - const data = await res.json(); - if (data.error) { - throw new Error(`Server error: ${data.error}`); - } - - setSession(data); + const session = await sessionsApi.getCurrent(); + setSession(session); setSessionRetryAttempt(0); } catch (err) { - const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred'; - console.error('Failed to get session:', errorMessage); + const errorMessage = err instanceof Error ? err.message : "Unknown error occurred"; + console.error("Failed to get session:", errorMessage); setError(errorMessage); - + // Schedule retry after 5 seconds - setSessionRetryAttempt(prev => prev + 1); + setSessionRetryAttempt((prev) => prev + 1); setTimeout(() => { getSession(); // Retry }, 5000); @@ -343,7 +308,7 @@ const App = () => { return ( {!session && ( - 0 ? ReadyState.CLOSED : ReadyState.CONNECTING} reconnectAttempt={sessionRetryAttempt} /> diff --git a/client/src/GlobalContext.tsx b/client/src/GlobalContext.tsx index 2b52601..7cee9ee 100644 --- a/client/src/GlobalContext.tsx +++ b/client/src/GlobalContext.tsx @@ -1,13 +1,9 @@ -type Lobby = { - id: string; - name: string; - private: boolean; -}; +import { LobbyModel, SessionResponse } from "./api-client"; -type Session = { - id: string; +// Re-export types from api-client for backwards compatibility +export type Lobby = LobbyModel; + +// Extended Session type that allows name to be null initially (before user sets it) +export type Session = Omit & { name: string | null; - lobbies: Lobby[]; }; - -export type { Session, Lobby }; diff --git a/client/src/api-client.ts b/client/src/api-client.ts index 5b36857..52ac194 100644 --- a/client/src/api-client.ts +++ b/client/src/api-client.ts @@ -69,7 +69,11 @@ export class ApiClient { private defaultHeaders: Record; constructor(baseURL?: string) { - this.baseURL = baseURL || process.env.REACT_APP_API_URL || "http://localhost:8001"; + // Use the current window location instead of localhost, just like WebSocket connections + const defaultBaseURL = + typeof window !== "undefined" ? `${window.location.protocol}//${window.location.host}` : "http://localhost:8001"; + + this.baseURL = baseURL || process.env.REACT_APP_API_URL || defaultBaseURL; this.defaultHeaders = {}; }