refactor: use apiUrl

src/components/molecules/IntegrationSettings.tsx

@@ -6,6 +6,7 @@ import TextField from "@mui/material/TextField";
 import axios from 'axios';
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { getStoredRecording } from '../../api/storage';
+import { apiUrl } from '../../apiConfig.js';
 interface IntegrationProps {
     isOpen: boolean;
     handleStart: (data: IntegrationSettings) => void;
@@ -32,12 +33,12 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
     const [recording, setRecording] = useState<any>(null);
 
     const authenticateWithGoogle = () => {
-        window.location.href = `http://localhost:8080/auth/google?robotId=${recordingId}`;
+        window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`;
     };
 
     const handleOAuthCallback = async () => {
         try {
-            const response = await axios.get(`http://localhost:8080/auth/google/callback`);
+            const response = await axios.get(`${apiUrl}/auth/google/callback`);
             const { google_sheet_email, files } = response.data;
         } catch (error) {
             setError('Error authenticating with Google');
@@ -46,7 +47,7 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
 
     const fetchSpreadsheetFiles = async () => {
         try {
-            const response = await axios.get(`http://localhost:8080/auth/gsheets/files?robotId=${recordingId}`, {
+            const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, {
                 withCredentials: true,
             });
             setSpreadsheets(response.data);
@@ -66,7 +67,7 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
     const updateGoogleSheetId = async () => {
         try {
             const response = await axios.post(
-                `http://localhost:8080/auth/gsheets/update`,
+                `${apiUrl}/auth/gsheets/update`,
                 { spreadsheetId: settings.spreadsheetId, spreadsheetName: settings.spreadsheetName, robotId: recordingId },
                 { withCredentials: true }
             );
@@ -79,7 +80,7 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
     const removeIntegration = async () => {
         try {
             await axios.post(
-                `http://localhost:8080/auth/gsheets/remove`,
+                `${apiUrl}/auth/gsheets/remove`,
                 { robotId: recordingId },
                 { withCredentials: true }
             );

src/components/molecules/NavBar.tsx

@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
 import { SaveRecording } from '../molecules/SaveRecording';
 import DiscordIcon from '../atoms/DiscordIcon';
+import { apiUrl } from '../../apiConfig';
 
 interface NavBarProps {
   recordingName: string;
@@ -34,7 +35,7 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
   const logout = async () => {
     dispatch({ type: 'LOGOUT' });
     window.localStorage.removeItem('user');
-    const { data } = await axios.get('http://localhost:8080/auth/logout');
+    const { data } = await axios.get(`${apiUrl}/auth/logout`);
     notify('success', data.message);
     navigate('/login');
   };

src/components/organisms/ApiKey.tsx

@@ -18,6 +18,7 @@ import { ContentCopy, Visibility, Delete } from '@mui/icons-material';
 import styled from 'styled-components';
 import axios from 'axios';
 import { useGlobalInfoStore } from '../../context/globalInfo';
+import { apiUrl } from '../../apiConfig';
 
 const Container = styled(Box)`
   display: flex;
@@ -38,7 +39,7 @@ const ApiKeyManager = () => {
   useEffect(() => {
     const fetchApiKey = async () => {
       try {
-        const { data } = await axios.get('http://localhost:8080/auth/api-key');
+        const { data } = await axios.get(`${apiUrl}/auth/api-key`);
         setApiKey(data.api_key);
       } catch (error: any) {
         notify('error', `Failed to fetch API Key - ${error.message}`);
@@ -53,7 +54,7 @@ const ApiKeyManager = () => {
   const generateApiKey = async () => {
     setLoading(true);
     try {
-      const { data } = await axios.post('http://localhost:8080/auth/generate-api-key');
+      const { data } = await axios.post(`${apiUrl}/auth/generate-api-key`);
       setApiKey(data.api_key);
       notify('success', `Generated API Key successfully`);
     } catch (error: any) {
@@ -66,7 +67,7 @@ const ApiKeyManager = () => {
   const deleteApiKey = async () => {
     setLoading(true);
     try {
-      await axios.delete('http://localhost:8080/auth/delete-api-key');
+      await axios.delete(`${apiUrl}/auth/delete-api-key`);
       setApiKey(null);
       notify('success', 'API Key deleted successfully');
     } catch (error: any) {

src/components/organisms/MainMenu.tsx

@@ -4,6 +4,7 @@ import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import { Paper, Button } from "@mui/material";
 import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, Link, CloudQueue } from "@mui/icons-material";
+import { apiUrl } from "../../apiConfig";
 
 interface MainMenuProps {
   value: string;
@@ -86,7 +87,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
         </Tabs>
         <hr />
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
-          <Button href="http://localhost:8080/api-docs/" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
+          <Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
             API Docs
           </Button>
           <Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>