configuration for frontend python server

Author: Fr4nc3

src/frontend_react/src/api/apiClient.tsx

@@ -1,7 +1,4 @@
-import { headerBuilder } from '../auth';
-
-// Get base API URL
-const api = process.env.REACT_APP_API_BASE_URL || 'http://127.0.0.1:8000/api';
+import { headerBuilder, getApiUrl } from './config';
 
 // Helper function to build URL with query parameters
 const buildUrl = (url: string, params?: Record<string, any>): string => {
@@ -46,7 +43,9 @@ const fetchWithAuth = async (url: string, method: string = "GET", body: BodyInit
     };
 
     try {
-        const response = await fetch(`${api}${url}`, options);
+        const apiUrl = getApiUrl();
+
+        const response = await fetch(`${apiUrl}${url}`, options);
         console.log('response', response);
 
         if (!response.ok) {
@@ -75,7 +74,8 @@ const fetchWithoutAuth = async (url: string, method: string = "POST", body: Body
     };
 
     try {
-        const response = await fetch(`${api}${url}`, options);
+        const apiUrl = getApiUrl();
+        const response = await fetch(`${apiUrl}${url}`, options);
 
         if (!response.ok) {
             const errorText = await response.text();

src/frontend_react/src/api/config.tsx

@@ -0,0 +1,97 @@
+// src/config.js
+
+declare global {
+    interface Window {
+        appConfig?: Record<string, any>;
+        activeUserId?: string;
+    }
+}
+
+export let API_URL: string | null = null;
+export let USER_ID: string | null = null;
+
+export let config = {
+    API_URL: "http://localhost:8000/api",
+    ENABLE_AUTH: false,
+};
+
+export function setApiUrl(url: string | null) {
+    console.log('setApiUrl called with:', url);
+    if (url) {
+        API_URL = url.includes('/api') ? url : `${url}/api`;
+    }
+}
+
+export function setEnvData(configData: Record<string, any>) {
+    if (configData) {
+        config.API_URL = configData.API_URL || "";
+        config.ENABLE_AUTH = configData.ENABLE_AUTH || false;
+    }
+}
+
+export function getConfigData() {
+    if (!config.API_URL || !config.ENABLE_AUTH) {
+        // Check if window.appConfig exists
+        if (window.appConfig) {
+            setEnvData(window.appConfig);
+        }
+    }
+
+    return { ...config };
+}
+
+export function getApiUrl() {
+    console.log('getApiUrl called');
+    if (!API_URL) {
+        // Check if window.appConfig exists
+        if (window.appConfig && window.appConfig.API_URL) {
+            setApiUrl(window.appConfig.API_URL);
+        }
+    }
+
+    if (!API_URL) {
+        console.info('API URL not yet configured');
+        return null;
+    }
+
+    return API_URL;
+}
+
+export function getUserId(): string {
+    USER_ID = window.activeUserId ?? null;
+    const userId = USER_ID ?? "00000000-0000-0000-0000-000000000000";
+    return userId;
+}
+
+/**
+ * Build headers with authentication information
+ * @param headers Optional additional headers to merge
+ * @returns Combined headers object with authentication
+ */
+export function headerBuilder(headers?: Record<string, string>): Record<string, string> {
+    let userId = getUserId();
+    let defaultHeaders = {
+        "x-ms-client-principal-id": String(userId) || "",  // Custom header
+    };
+    return {
+        ...defaultHeaders,
+        ...(headers ? headers : {})
+    };
+}
+export const toBoolean = (value: any): boolean => {
+    if (typeof value !== 'string') {
+        return false;
+    }
+    return value.trim().toLowerCase() === 'true';
+};
+export default {
+    setApiUrl,
+    getApiUrl,
+    toBoolean,
+    getUserId,
+    getConfigData,
+    setEnvData,
+    config,
+    USER_ID,
+    API_URL
+};

src/frontend_react/src/auth/index.ts

@@ -1,34 +0,0 @@
-
-declare global {
-    interface Window {
-        activeUserId?: string;
-    }
-}
-
-let USER_ID: string | undefined;
-
-/**
- * Get the current user ID from the window.activeUserId or return a default UUID
- * @returns The user ID string
- */
-export function getUserId(): string {
-    USER_ID = window.activeUserId;
-    const userId = USER_ID ?? "00000000-0000-0000-0000-000000000000";
-    return userId;
-}
-
-/**
- * Build headers with authentication information
- * @param headers Optional additional headers to merge
- * @returns Combined headers object with authentication
- */
-export function headerBuilder(headers?: Record<string, string>): Record<string, string> {
-    let userId = getUserId();
-    let defaultHeaders = {
-        "x-ms-client-principal-id": String(userId) || "",  // Custom header
-    };
-    return {
-        ...defaultHeaders,
-        ...(headers ? headers : {})
-    };
-}

src/frontend_react/src/index.tsx

@@ -1,18 +1,49 @@
-import React, { useEffect, useState } from 'react';
+import React, { StrictMode, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { FluentProvider, teamsLightTheme, teamsDarkTheme } from "@fluentui/react-components";
-
+import { setEnvData, setApiUrl, config as defaultConfig, toBoolean } from './api/config';
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
 const AppWrapper = () => {
   // State to store the current theme
+  const [isConfigLoaded, setIsConfigLoaded] = useState(false);
   const [isDarkMode, setIsDarkMode] = useState(
     window.matchMedia("(prefers-color-scheme: dark)").matches
   );
+  type ConfigType = typeof defaultConfig;
+  console.log("defaultConfig", defaultConfig);
+  const [config, setConfig] = useState<ConfigType>(defaultConfig);
+  useEffect(() => {
+    const initConfig = async () => {
+      window.appConfig = config;
+      setEnvData(config);
+      setApiUrl(config.API_URL);
+
+      try {
+        const response = await fetch('/config');
+        let config = defaultConfig;
+        if (response.ok) {
+          config = await response.json();
+          config.ENABLE_AUTH = toBoolean(config.ENABLE_AUTH);
+        }
+
+        window.appConfig = config;
+        setEnvData(config);
+        setApiUrl(config.API_URL);
+        setConfig(config);
 
+      } catch (error) {
+        console.info("Error fetching config:", error);
+      } finally {
+        setIsConfigLoaded(true);
+      }
+    };
+
+    initConfig(); // Call the async function inside useEffect
+  }, []);
   // Effect to listen for changes in the user's preferred color scheme
   useEffect(() => {
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -28,11 +59,13 @@ const AppWrapper = () => {
     mediaQuery.addEventListener("change", handleThemeChange);
     return () => mediaQuery.removeEventListener("change", handleThemeChange);
   }, []);
-
+  if (!isConfigLoaded) return <div>Loading...</div>;
   return (
-    <FluentProvider theme={isDarkMode ? teamsDarkTheme : teamsLightTheme} style={{ height: "100vh" }}>
-      <App />
-    </FluentProvider>
+    <StrictMode>
+      <FluentProvider theme={isDarkMode ? teamsDarkTheme : teamsLightTheme} style={{ height: "100vh" }}>
+        <App />
+      </FluentProvider>
+    </StrictMode>
   );
 };
 root.render(<AppWrapper />);