diff --git a/.env.example b/.env.example index f002141..22ecc35 100644 --- a/.env.example +++ b/.env.example @@ -14,3 +14,5 @@ VITE_APP_ENV="development" # development | staging | production # ─── Backend API ─────────────────────────────────────────────────────────────── VITE_API_BASE_URL="http://localhost:8000" +VITE_MARKET_API_BASE_URL="http://localhost:8001" +VITE_MARKET_WS_BASE_URL="ws://localhost:8001" diff --git a/src/lib/api.client.ts b/src/lib/api.client.ts index b01d73b..6ef745c 100644 --- a/src/lib/api.client.ts +++ b/src/lib/api.client.ts @@ -2,6 +2,7 @@ import axios from 'axios'; import { useUserStore } from '@/stores/userStore'; const API_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'; +const MARKET_API_URL = import.meta.env.VITE_MARKET_API_BASE_URL || 'http://localhost:8001'; export const apiClient = axios.create({ baseURL: API_URL, @@ -9,6 +10,21 @@ export const apiClient = axios.create({ timeout: 5000, }); +export const marketApiClient = axios.create({ + baseURL: MARKET_API_URL, + withCredentials: true, + timeout: 5000, +}); + +// Request Interceptor for marketApiClient: Attach access token +marketApiClient.interceptors.request.use((config) => { + const token = useUserStore.getState().accessToken; + if (token && config.headers) { + config.headers.Authorization = `Bearer ${token}`; + } + return config; +}); + // Request Interceptor: Attach the access token if available apiClient.interceptors.request.use((config) => { const token = useUserStore.getState().accessToken; diff --git a/src/pages/LiveMarketDashboard.tsx b/src/pages/LiveMarketDashboard.tsx index 9c85910..1627a06 100644 --- a/src/pages/LiveMarketDashboard.tsx +++ b/src/pages/LiveMarketDashboard.tsx @@ -1,13 +1,15 @@ import React, { useState, useEffect } from 'react'; import '@/styles/components/live-market.css'; +const MARKET_WS_URL = import.meta.env.VITE_MARKET_WS_BASE_URL || 'ws://localhost:8001'; + export const LiveMarketDashboard: React.FC = () => { const [marketData, setMarketData] = useState({ gainers: [], losers: [] }); const [activeTab, setActiveTab] = useState('Stocks'); useEffect(() => { - // 1. Connect to the FastAPI WebSocket Bridge - const ws = new WebSocket("ws://localhost:8000/dashboard/ws/market"); + // 1. Connect to the Market Service WebSocket + const ws = new WebSocket(`${MARKET_WS_URL}/dashboard/ws/market`); // 2. Listen for live updates being pushed from FastAPI ws.onmessage = (event) => {