remove react inject, instead use docker config to replace .env.js

src/App.tsx

@@ -16,10 +16,8 @@ function App() {
   const { apps, loadApps } = useApps();
 
   useEffect(() => {
-    if (apps.length === 0) {
-      loadApps();
-    }
-  }, [loadApps, apps.length]);
+    loadApps();
+  }, []);
 
   return (
     <>
@@ -38,12 +36,9 @@ function App() {
         <Layout>
           <Routes>
             <Route path="/dashboard" element={<Dashboard />} />
-            {
-              // @ts-ignore
-              apps.map((app) => (
-                <Route key={app.name} path={app.internalUrl} element={<AppIframe app={app} />} />
-              ))
-            }
+            {apps.map((app) => (
+              <Route key={app.name} path={app.slug} element={<AppIframe app={app} />} />
+            ))}
             <Route path="*" element={<Navigate to="/dashboard" />} />
           </Routes>
         </Layout>

src/components/Header/Header.tsx

@@ -40,12 +40,12 @@ const Header: React.FC<HeaderProps> = () => {
                     {apps.map((app) => (
                       <Link
                         key={app.name}
-                        to={app.internalUrl}
+                        to={app.slug}
                         className={clsx(
                           'border-primary-50 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium litbutton',
                           {
                             'border-primary-500 litbutton-active hover:border-gray-300 inline-flex items-center px-1 pt-1 text-sm font-medium':
-                              pathname.includes(app.internalUrl),
+                              pathname.includes(app.slug),
                           },
                         )}
                       >
@@ -64,13 +64,11 @@ const Header: React.FC<HeaderProps> = () => {
                   apps.map((app) => (
                     <Link
                       key={app.name}
-                      to={app.internalUrl}
+                      to={app.slug}
                       className={clsx(
                         'border-transparent litbutton block pl-3 pr-4 py-2 border-l-4 litbutton text-base font-medium',
                         {
-                          'litbutton-active border-primary-400 block pl-3 pr-4 py-2': pathname.includes(
-                            app.internalUrl,
-                          ),
+                          'litbutton-active border-primary-400 block pl-3 pr-4 py-2': pathname.includes(app.slug),
                         },
                       )}
                     >

src/env.js

@@ -1 +0,0 @@
-export const env = { ...process.env, ...window.env };

src/modules/dashboard/AppIframe.tsx

@@ -13,7 +13,7 @@ export const AppIframe: React.FC<any> = ({ app }: { app: any }) => {
           overflow="hidden"
           scrolling="no"
           title={app.name}
-          url={app.externalUrl}
+          url={app.url}
         />
       </div>
     </div>

src/modules/dashboard/components/DashboardCard/DashboardCard.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
-  const url = `/${app.internalUrl}`;
+  const url = `/${app.slug}`;
 
   return (
     <>
@@ -18,7 +18,7 @@ export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
             <div className="mr-4 flex items-center">
               <img
                 className="h-16 w-16 rounded-md overflow-hidden mr-4 flex-shrink-0"
-                src={`/assets/${app.assetSrc}`}
+                src={`/assets/${app.slug}.svg`}
                 alt={app.name}
               />
 

src/services/api/config.ts

@@ -1,3 +1,4 @@
 export const api = {
-  hostname: process.env.REACT_APP_API_URL,
+  // @ts-ignore
+  hostname: window.env.REACT_APP_API_URL,
 };

src/services/apps/api.ts

@@ -1,10 +1,10 @@
-import { env } from '../../env';
 import { performApiCall } from '../api';
 import { transformApp } from './transformations';
 import { App } from './types';
 
 export const fetchApps = async (): Promise<App> => {
-  const apiUrl = env.REACT_APP_API_URL;
+  // @ts-ignore
+  const apiUrl = window.env.REACT_APP_API_URL;
 
   const res = await performApiCall({ hostname: apiUrl, path: '/apps', method: 'GET' });
   return transformApp(res);

src/services/apps/transformations.ts

@@ -4,8 +4,7 @@ export const transformApp = (response: any): App => {
   return {
     id: response.id ?? '',
     name: response.name ?? '',
-    assetSrc: response.assetSrc ?? '',
-    internalUrl: response.internalUrl ?? '',
-    externalUrl: response.externalUrl ?? '',
+    slug: response.slug ?? '',
+    url: response.url ?? '',
   };
 };

src/services/apps/types.ts

@@ -1,7 +1,6 @@
 export interface App {
   id: string;
   name: string;
-  assetSrc: string;
-  internalUrl: string;
-  externalUrl: string;
+  slug: string;
+  url: string;
 }