feat(external-apps): list external apps in route and load them 🚀

src/apps/appManager/store.ts

@@ -0,0 +1,46 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import api from "utils/api";
+import { IApp } from "./interface";
+
+interface IAppManagerState {
+  apps: IApp[];
+  loading: boolean;
+  error?: any;
+}
+
+const initialState: IAppManagerState = { apps: [], loading: true };
+
+const getAppsAsync = createAsyncThunk(
+  "appManager/getAppsAsync",
+  (_, thunkAPI) => {
+    return api
+      .get("/manager/apps/")
+      .then(({ data }) => data)
+      .catch((e) => {
+        thunkAPI.rejectWithValue(e);
+      });
+  }
+);
+
+const authSlice = createSlice({
+  name: "appManager",
+  initialState,
+  reducers: {
+    getApps: () => {},
+  },
+  extraReducers: {
+    // Add reducers for additional action types here, and handle loading state as needed
+    [getAppsAsync.fulfilled.type]: (state, action) => {
+      state.apps.push(action.payload);
+      state.loading = false;
+    },
+    [getAppsAsync.rejected.type]: (state, action) => {
+      state.loading = false;
+      state.error = action.error;
+    },
+  },
+});
+
+export const {} = authSlice.actions;
+export { getAppsAsync };
+export default authSlice.reducer;

src/apps/externalAppShell/index.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import AppShell from "apps/shell";
+import styled from "styled-components";
+
+import useAnimationEndRender from "utils/hooks/useAnimationEndRender";
+import useScript from "utils/hooks/useScript";
+import If from "atoms/If";
+import Loader from "./loader";
+
+const Wrapper = styled.div`
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  background: ${({ theme }) => theme.colors.plain};
+`;
+
+interface IProps {
+  instanceId: string;
+  appName: string;
+  onMouseDown: (event: React.MouseEvent, dragId: string) => void;
+  dragId: string;
+  data: Record<string, any>;
+}
+
+const ExternalAppShell = ({
+  appName,
+  instanceId,
+  onMouseDown,
+  dragId,
+  data,
+}: IProps) => {
+  const { render } = useAnimationEndRender({ instanceId });
+  const status = useScript(
+    `http://localhost:8000/api/manager/assests/${data.appId}/main.js`,
+    true
+  );
+  console.log(data.options);
+  return (
+    <AppShell
+      height={data.options.height}
+      width={data.options.width}
+      dragId={dragId}
+      onMouseDown={onMouseDown}
+      appName={appName}
+      instanceId={instanceId}
+      icon={data.icon}
+      name={data.name}
+    >
+      <If condition={render > 0}>
+        <If condition={status !== "ready"}>
+          <Loader status={status} />
+        </If>
+        {/* keep it always ready */}
+        <Wrapper hidden={status !== "ready"} id={data.appId}></Wrapper>
+      </If>
+    </AppShell>
+  );
+};
+
+export default React.memo(ExternalAppShell);

src/apps/externalAppShell/loader.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import styled from "styled-components";
+import { ProgressIndicator } from "@fluentui/react";
+
+import { Stack, Text, StackItem } from "atoms/styled";
+import { StatusTypes } from "utils/hooks/useScript";
+
+interface IProps {
+  status: StatusTypes;
+}
+
+const Wrapper = styled(Stack)`
+  background: ${({ theme }) => theme.colors.plain};
+  ${StackItem} {
+    width: 320px;
+  }
+`;
+
+const ScriptStatus = ({ status }: IProps) => {
+  return (
+    <Wrapper
+      flexDirection="column"
+      gap={8}
+      fullHeight
+      justifyContent="center"
+      alignItems="center"
+    >
+      <StackItem>
+        <ProgressIndicator
+          label="Loading app..."
+          progressHidden={status === "error"}
+        />
+      </StackItem>
+      <StackItem>
+        {status === "error" && (
+          <Text>Something went wrong while loading the app.</Text>
+        )}
+      </StackItem>
+    </Wrapper>
+  );
+};
+
+export default ScriptStatus;

src/apps/folder/store/index.ts

@@ -3,6 +3,8 @@ import { deleteChildren, refreshRoutes } from "./helper";
 import { IFolder, IFolderRoutes, IFile } from "../interfaces";
 import { folderPool, folderMap } from "./routes";
 import { sortBy, get } from "lodash-es";
+import { getAppsAsync } from "apps/appManager/store";
+import { IApp } from "apps/appManager/interface";
 
 export interface IBaseState {
   folderPool: Record<string, IFolder>;
@@ -169,6 +171,40 @@ const folderSlice = createSlice({
       refreshRoutes(state);
     },
   },
+  extraReducers: {
+    [getAppsAsync.fulfilled.type]: (
+      state,
+      { payload }: PayloadAction<IApp[]>
+    ) => {
+      //data: {
+      //   id: "img2",
+      //   name: "lady.jpg",
+      //   icon: "image",
+      //   path: "lady.jpg",
+      // },
+      // appName: "photo",
+      // order: 1,
+      const applicationsFolder = get(
+        state.root,
+        state.routeToFolder["/applications"]
+      ).files;
+      const startingOrder = Object.keys(applicationsFolder).length;
+      payload.forEach((customApp, index) => {
+        applicationsFolder[customApp.appId] = {
+          data: {
+            appId: customApp.appId,
+            icon: customApp.icon,
+            name: customApp.name,
+            appType: "EXTERNAL",
+            options: customApp.options,
+          },
+          appName: customApp.appId,
+          order: startingOrder + index,
+        };
+      });
+      refreshRoutes(state);
+    },
+  },
 });
 
 export const {

src/apps/index.tsx

@@ -5,6 +5,7 @@ import Photo from "apps/photo";
 import AppManager from "apps/appManager";
 import { IApp, IMetaData } from "base/interfaces";
 import AnimatedFileWrapper from "atoms/animatedFileWrapper";
+import ExternalAppShell from "apps/externalAppShell";
 
 interface IProps {
   app: IApp;
@@ -81,6 +82,26 @@ const App = (props: IProps) => {
     }
   }
 
+  if (app.data.appType === "EXTERNAL") {
+    return (
+      <AnimatedFileWrapper
+        appName={app.appName}
+        id={id}
+        style={style}
+        metaData={metaData}
+        weight={weight}
+      >
+        <ExternalAppShell
+          data={app.data}
+          instanceId={id}
+          dragId={dragId}
+          appName={app.appName}
+          onMouseDown={onMouseDown}
+        />
+      </AnimatedFileWrapper>
+    );
+  }
+
   return null;
 };
 

src/apps/photo/index.tsx

@@ -13,7 +13,7 @@ interface IProps {
   path: string;
   instanceId: string;
   appName: string;
-  onMouseDown: (event: React.MouseEvent) => void;
+  onMouseDown: (event: React.MouseEvent, dragId: string) => void;
   dragId: string;
 }
 

src/atoms/styled/appImage/index.tsx

@@ -36,13 +36,18 @@ type IProps = ReactHTMLElement<
 
 const Image = ({ name, size, ref, height, width, ...rest }: IProps) => {
   const iconName = availableIcons[name] || "generic.svg";
+  let href = "";
+
+  if (name && name.includes("http")) {
+    href = name;
+  }
 
   return (
     <img
       {...rest}
       height={height || size}
       width={width || size}
-      src={require(`./assets/${iconName}`).default}
+      src={href ? href : require(`./assets/${iconName}`).default}
     />
   );
 };

src/base/index.tsx

@@ -12,6 +12,7 @@ import { toggleStartMenu as toggleStartMenuAction } from "base/store";
 import { toggleQuickActions } from "apps/actionCenter/store";
 import { initRoutes } from "apps/folder/store";
 import ActionCenter from "apps/actionCenter";
+import { getAppsAsync } from "apps/appManager/store";
 
 interface IProps {}
 
@@ -24,7 +25,7 @@ const Base = ({}: IProps) => {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
 
   let user = useSelector((state) => state.auth.user);
-  const openedApps = useSelector((state) => state.base.apps);
+  const runningApp = useSelector((state) => state.base.runningApp);
   const routes = useSelector((state) => state.folder.routes, shallowEqual);
 
   const { store, handleMouseDown } = useDraggable({ wrapperRef });
@@ -52,6 +53,7 @@ const Base = ({}: IProps) => {
       wrapper: wrapperRef.current!,
     };
     dispatch(initRoutes(user?.name || "Guest user"));
+    dispatch(getAppsAsync());
   }, []);
 
   const handleMouseDownEvent = React.useCallback(
@@ -66,7 +68,7 @@ const Base = ({}: IProps) => {
       <Wrapper ref={wrapperRef}>
         <Menu />
         <ActionCenter />
-        {Object.values(openedApps).map((app) => {
+        {Object.values(runningApp).map((app) => {
           return (
             <>
               {app.instances.map((instance, index) => {
@@ -101,7 +103,7 @@ const Base = ({}: IProps) => {
         <AppBar
           toggleQuickActions={dispatchToggleQuickActions}
           toggleMenu={toggleStartMenu}
-          apps={openedApps}
+          apps={runningApp}
         />
       </Wrapper>
     </Desktop>

src/base/store/index.ts

@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { IApp, IAppGroup } from "base/interfaces";
 
 interface IBaseState {
-  apps: Record<string, IAppGroup>;
+  runningApp: Record<string, IAppGroup>;
 
   currentWeight: number;
   menu: {
@@ -11,7 +11,7 @@ interface IBaseState {
 }
 
 const initialState: IBaseState = {
-  apps: {},
+  runningApp: {},
   currentWeight: 0,
   menu: {
     show: false,
@@ -28,7 +28,7 @@ const baseSlice = createSlice({
         payload: { appName, instanceId },
       }: PayloadAction<{ appName: string; instanceId: string }>
     ) => {
-      const runningApp = state.apps[appName];
+      const runningApp = state.runningApp[appName];
       if (
         runningApp.instances[runningApp.instances.length - 1].id === instanceId
       ) {
@@ -56,7 +56,7 @@ const baseSlice = createSlice({
     openApp(state, action: PayloadAction<IApp>) {
       const newApp = action.payload;
       const instanceId = `${newApp.appName}-${newApp.id}`;
-      const runningApp = state.apps[newApp.appName];
+      const runningApp = state.runningApp[newApp.appName];
 
       if (runningApp) {
         runningApp.weight = state.currentWeight;
@@ -71,29 +71,29 @@ const baseSlice = createSlice({
         }
         runningApp.instances.push({ ...newApp, id: instanceId });
       } else {
-        state.apps[newApp.appName] = {
+        state.runningApp[newApp.appName] = {
           initialWeight: state.currentWeight,
           weight: state.currentWeight,
           id: newApp.id,
           name: newApp.appName,
           instances: [{ ...newApp, id: instanceId }],
         };
       }
-      // relying on this to never cross the css z-index limit - 10000
+      // relying on this, to never cross the css z-index limit - 10000
       // TODO: if does, have to reset every app weight that's all
       state.currentWeight++;
     },
     closeApp: (
       state,
       action: PayloadAction<{ appName: string; instanceId: string }>
     ) => {
-      const app = state.apps[action.payload.appName];
+      const app = state.runningApp[action.payload.appName];
       if (!app) {
         return;
       }
 
       if (app.instances.length === 1) {
-        delete state.apps[action.payload.appName];
+        delete state.runningApp[action.payload.appName];
       } else {
         app.instances = app.instances.filter(
           (instance) => instance.id !== action.payload.instanceId

src/store/reducer.ts

@@ -3,8 +3,15 @@ import auth from "auth/store";
 import base from "base/store";
 import folder from "apps/folder/store";
 import actionCenter from "apps/actionCenter/store";
+import appManager from "apps/appManager/store";
 
-const rootReducer = combineReducers({ auth, base, folder, actionCenter });
+const rootReducer = combineReducers({
+  auth,
+  base,
+  folder,
+  actionCenter,
+  appManager,
+});
 
 export type RootState = ReturnType<typeof rootReducer>;