[WIP] working on new tree structure

typescript/Frontend/src/components/Groups/Groups.tsx

@@ -7,7 +7,7 @@ import NavigationButtons from "../Layout/NavigationButtons";
 import Folder from "./Folder";
 import GroupTabs from "./GroupTabs";
 import GroupContextProvider from "../Context/GroupContextProvider";
-import GroupTree from "./Tree/GroupTree";
+import GroupTree from "./Tree/UserTree";
 
 const Groups = () => {
   return (
@@ -15,7 +15,6 @@ const Groups = () => {
       <Container maxWidth="xl">
         <Grid container spacing={2}>
           <Grid item xs={3}>
-            <NavigationButtons />
             <GroupTree />
           </Grid>
           <Grid item xs={9}>

typescript/Frontend/src/components/Groups/Tree/UserTree.tsx

@@ -0,0 +1,75 @@
+import TreeView from "@mui/lab/TreeView";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { ReactNode, useEffect, useState } from "react";
+import { TreeItem } from "@mui/lab";
+import axiosConfig from "../../../config/axiosConfig";
+import { I_Folder, I_Installation } from "../../../util/types";
+
+const GroupTree = () => {
+  const [data, setData] = useState<(I_Folder | I_Installation)[]>();
+
+  useEffect(() => {
+    axiosConfig.get("/GetAllFoldersAndInstallations").then((res) => {
+      setData(res.data);
+    });
+  }, []);
+
+  const handleClick = (e: any, nodes: any) => {
+    console.log(e);
+    console.log(nodes);
+  };
+
+  const instanceOfFolder = (object: any): object is I_Folder => {
+    return "children" in object;
+  };
+
+  const getNodes = (element: I_Folder | I_Installation): null | ReactNode => {
+    if (instanceOfFolder(element)) {
+      return element.children ? renderTree(element.children) : null;
+    }
+    return null;
+  };
+
+  const nest = (
+    items: (I_Folder | I_Installation)[],
+    id: number | null = null
+  ): any => {
+    return items.map((item) => {
+      if (item.parentId === 0 && item.type === "Installlation") {
+        return item;
+      }
+      return { ...item, children: nest(items, item.id) };
+    });
+  };
+
+  const renderTree = (data: (I_Folder | I_Installation)[]): ReactNode => {
+    return data.map((element) => {
+      return (
+        <TreeItem
+          key={element.id}
+          nodeId={element.id.toString()}
+          label={element.name}
+        >
+          {getNodes(element)}
+        </TreeItem>
+      );
+    });
+  };
+
+  return (
+    <></>
+    // <TreeView
+    //   aria-label="rich object"
+    //   defaultCollapseIcon={<ExpandMoreIcon />}
+    //   defaultExpandIcon={<ChevronRightIcon />}
+    //   sx={{ height: 300, flexGrow: 1, maxWidth: 400 }}
+    //   onNodeToggle={handleClick}
+    // >
+    //   {renderTree(data)}
+    //   {data && renderTree(data)}
+    // </TreeView>
+  );
+};
+
+export default GroupTree;