From 0f203b17fd11348b58df9962919d393076fd84b1 Mon Sep 17 00:00:00 2001 From: Shwetas Dhake Date: Fri, 7 Aug 2026 14:59:01 +0530 Subject: [PATCH] Derive backend URLs from VITE_BASE_URL instead of hardcoding localhost --- frontend/src/Pages/ProsConsChallenge.tsx | 5 +++-- frontend/src/Pages/StrengthenArgument.tsx | 5 +++-- frontend/src/components/ChatRoom.tsx | 3 ++- frontend/src/components/DebatePopup.tsx | 3 ++- frontend/src/components/Matchmaking.tsx | 3 ++- frontend/src/components/RoomBrowser.tsx | 5 +++-- frontend/src/constants/api.ts | 5 +++++ 7 files changed, 20 insertions(+), 9 deletions(-) create mode 100644 frontend/src/constants/api.ts diff --git a/frontend/src/Pages/ProsConsChallenge.tsx b/frontend/src/Pages/ProsConsChallenge.tsx index 65c6ea59..ef0ad7a5 100644 --- a/frontend/src/Pages/ProsConsChallenge.tsx +++ b/frontend/src/Pages/ProsConsChallenge.tsx @@ -3,6 +3,7 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"; import { Textarea } from "@/components/ui/textarea"; import { Button } from "@/components/ui/button"; import { getAuthToken } from "@/utils/auth"; +import { API_BASE_URL } from "@/constants/api"; interface ArgumentEvaluation { score: number; @@ -41,7 +42,7 @@ const ProsConsChallenge: React.FC = () => { setIsLoading(true); setError(null); try { - const response = await fetch("http://localhost:1313/coach/pros-cons/topic", { + const response = await fetch(`${API_BASE_URL}/coach/pros-cons/topic`, { method: "GET", headers: { Authorization: `Bearer ${token}`, @@ -82,7 +83,7 @@ const ProsConsChallenge: React.FC = () => { setIsLoading(true); setError(null); try { - const response = await fetch("http://localhost:1313/coach/pros-cons/submit", { + const response = await fetch(`${API_BASE_URL}/coach/pros-cons/submit`, { method: "POST", headers: { Authorization: `Bearer ${token}`, diff --git a/frontend/src/Pages/StrengthenArgument.tsx b/frontend/src/Pages/StrengthenArgument.tsx index 640edf71..38f4b0f5 100644 --- a/frontend/src/Pages/StrengthenArgument.tsx +++ b/frontend/src/Pages/StrengthenArgument.tsx @@ -8,6 +8,7 @@ import { import { Textarea } from "@/components/ui/textarea"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; +import { API_BASE_URL } from "@/constants/api"; import { Dialog, DialogContent, @@ -112,7 +113,7 @@ const StrengthenArgument: React.FC = () => { setError(null); setWeakStatement(null); try { - const url = `http://localhost:1313/coach/strengthen-argument/weak-statement?topic=${encodeURIComponent(topic)}&stance=${encodeURIComponent(stance)}`; + const url = `${API_BASE_URL}/coach/strengthen-argument/weak-statement?topic=${encodeURIComponent(topic)}&stance=${encodeURIComponent(stance)}`; const response = await fetch(url, { method: "GET", headers: { @@ -152,7 +153,7 @@ const StrengthenArgument: React.FC = () => { setIsLoading(true); setError(null); try { - const response = await fetch("http://localhost:1313/coach/strengthen-argument/evaluate", { + const response = await fetch(`${API_BASE_URL}/coach/strengthen-argument/evaluate`, { method: "POST", headers: { "Content-Type": "application/json", diff --git a/frontend/src/components/ChatRoom.tsx b/frontend/src/components/ChatRoom.tsx index fb834cfa..2bb535a8 100644 --- a/frontend/src/components/ChatRoom.tsx +++ b/frontend/src/components/ChatRoom.tsx @@ -1,6 +1,7 @@ import { useEffect, useRef, useState } from 'react'; import { useParams } from 'react-router-dom'; import clsx from 'clsx'; +import { WS_BASE_URL } from '../constants/api'; const reactionsList = ['😂', '❤️', '❤️', '👍']; @@ -45,7 +46,7 @@ const ChatRoom = () => { if (!token) return; wsRef.current = new WebSocket( - `ws://localhost:1313/chat/${roomId}?token=${token}` + `${WS_BASE_URL}/chat/${roomId}?token=${token}` ); wsRef.current.onopen = () => { diff --git a/frontend/src/components/DebatePopup.tsx b/frontend/src/components/DebatePopup.tsx index bb09bfd0..36bd2705 100644 --- a/frontend/src/components/DebatePopup.tsx +++ b/frontend/src/components/DebatePopup.tsx @@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { X } from 'lucide-react'; import RoomBrowser from './RoomBrowser'; import Matchmaking from './Matchmaking'; +import { API_BASE_URL } from '../constants/api'; interface DebatePopupProps { onClose: () => void; @@ -28,7 +29,7 @@ const DebatePopup: React.FC = ({ onClose }) => { try { // Sending a POST request to create a new room. // You might also send additional parameters (e.g., room type, settings). - const response = await fetch('http://localhost:1313/rooms', { + const response = await fetch(`${API_BASE_URL}/rooms`, { method: 'POST', headers: { 'Content-Type': 'application/json', diff --git a/frontend/src/components/Matchmaking.tsx b/frontend/src/components/Matchmaking.tsx index aa7f4b5b..bfd1cbbe 100644 --- a/frontend/src/components/Matchmaking.tsx +++ b/frontend/src/components/Matchmaking.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; import Avatar from 'react-avatar'; import { useUser } from '../hooks/useUser'; +import { WS_BASE_URL } from '../constants/api'; interface MatchmakingPool { userId: string; @@ -59,7 +60,7 @@ const Matchmaking: React.FC = () => { // Connect to WebSocket with authentication token const ws = new WebSocket( - `ws://localhost:1313/ws/matchmaking?token=${token}` + `${WS_BASE_URL}/ws/matchmaking?token=${token}` ); wsRef.current = ws; diff --git a/frontend/src/components/RoomBrowser.tsx b/frontend/src/components/RoomBrowser.tsx index 6869beec..aa6c6bf3 100644 --- a/frontend/src/components/RoomBrowser.tsx +++ b/frontend/src/components/RoomBrowser.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import { API_BASE_URL } from '../constants/api'; interface Participant { id: string; @@ -21,7 +22,7 @@ const RoomBrowser: React.FC = () => { const fetchRooms = async () => { const token = localStorage.getItem('token'); try { - const response = await fetch('http://localhost:1313/rooms', { + const response = await fetch(`${API_BASE_URL}/rooms`, { method: 'GET', headers: { 'Content-Type': 'application/json', @@ -61,7 +62,7 @@ const RoomBrowser: React.FC = () => { const token = localStorage.getItem('token'); try { const response = await fetch( - `http://localhost:1313/rooms/${roomId}/join`, + `${API_BASE_URL}/rooms/${roomId}/join`, { method: 'POST', headers: { diff --git a/frontend/src/constants/api.ts b/frontend/src/constants/api.ts new file mode 100644 index 00000000..830c70d0 --- /dev/null +++ b/frontend/src/constants/api.ts @@ -0,0 +1,5 @@ +export const API_BASE_URL = ( + import.meta.env.VITE_BASE_URL || "http://localhost:1313" +).replace(/\/+$/, ""); + +export const WS_BASE_URL = API_BASE_URL.replace(/^http/, "ws");