From 6edba78845a0cc52158de9fa05fe639ff5e27d83 Mon Sep 17 00:00:00 2001
From: Sina Blattmann <sina.blattmann@noser.com>
Date: Tue, 28 Feb 2023 11:06:26 +0100
Subject: [PATCH] fix nested routing, create tree with data from backend

---
 typescript/Frontend/src/App.tsx               |  58 ++-------
 .../src/components/InstallationList.tsx       |  50 ++++----
 .../src/components/InstallationTabs.tsx       |  20 ++--
 .../src/components/NavigationButtons.tsx      |  30 ++---
 .../Frontend/src/components/UserTree.tsx      | 112 +++---------------
 typescript/Frontend/src/routes.json           |  15 +--
 .../Frontend/src/routes/Installation.tsx      |   2 +-
 .../Frontend/src/routes/Installations.tsx     |  49 ++++++++
 typescript/Frontend/src/routes/Users.tsx      |  30 +++++
 9 files changed, 168 insertions(+), 198 deletions(-)
 create mode 100644 typescript/Frontend/src/routes/Installations.tsx
 create mode 100644 typescript/Frontend/src/routes/Users.tsx

diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx
index 711216363..5a482cdda 100644
--- a/typescript/Frontend/src/App.tsx
+++ b/typescript/Frontend/src/App.tsx
@@ -1,12 +1,7 @@
 import useToken from "./hooks/useToken";
 import Login from "./Login";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { Box, Grid, Divider } from "@mui/material";
-import BasicTable from "./components/Table";
-import InstallationTabs from "./components/InstallationTabs";
-import Alarms from "./routes/Alarms";
-import InstallationDetail from "./routes/Installation";
-import Log from "./routes/Log";
+import { Grid } from "@mui/material";
 import routes from "./routes.json";
 import { IntlProvider } from "react-intl";
 import { useState } from "react";
@@ -14,14 +9,13 @@ import en from "./lang/en.json";
 import de from "./lang/de.json";
 import LanguageSelect from "./components/LanguageSelect";
 import LogoutButton from "./components/LogoutButton";
-import NavigationButtons from "./components/NavigationButtons";
-import UserList from "./components/UserTree";
-import Sidebar from "./components/Sidebar";
+import Installations from "./routes/Installations";
+
+import Users from "./routes/Users";
 
 const App = () => {
   const { token, setToken, removeToken } = useToken();
   const [language, setLanguage] = useState("en");
-  const [currentView, setCurrentView] = useState("installations");
 
   const getTranslations = () => {
     if (language === "de") {
@@ -45,43 +39,13 @@ const App = () => {
           <LanguageSelect language={language} setLanguage={setLanguage} />
           <LogoutButton removeToken={removeToken} />
         </Grid>
-        <Box sx={{ p: 1 }}>
-          <Grid container spacing={2}>
-            <Grid item xs={3}>
-              <NavigationButtons
-                currentView={currentView}
-                setCurrentView={setCurrentView}
-              />
-              {currentView === "installations" ? <Sidebar /> : <UserList />}
-            </Grid>
-            <Grid
-              item
-              xs={1}
-              container
-              direction="row"
-              justifyContent="center"
-              alignItems="center"
-            >
-              <Divider orientation="vertical" variant="middle" />
-            </Grid>
-            <Grid item xs={8}>
-              {currentView === "installations" && (
-                <>
-                  <InstallationTabs />
-                  <Routes>
-                    <Route
-                      path={routes.installationWithId}
-                      element={<InstallationDetail />}
-                    />
-                    <Route path={routes.alarmsWithId} element={<Alarms />} />
-                    <Route path={routes.usersWithId} element={<BasicTable />} />
-                    <Route path={routes.logWithId} element={<Log />} />
-                  </Routes>
-                </>
-              )}
-            </Grid>
-          </Grid>
-        </Box>
+        <Routes>
+          <Route
+            path={routes.installations + "*"}
+            element={<Installations />}
+          />
+          <Route path={routes.tree} element={<Users />} />
+        </Routes>
       </IntlProvider>
     </BrowserRouter>
   );
diff --git a/typescript/Frontend/src/components/InstallationList.tsx b/typescript/Frontend/src/components/InstallationList.tsx
index c151fd9aa..07ff648fe 100644
--- a/typescript/Frontend/src/components/InstallationList.tsx
+++ b/typescript/Frontend/src/components/InstallationList.tsx
@@ -41,10 +41,10 @@ const InstallationList = (props: InstallationListProps) => {
   const filteredData = filterData(props.searchQuery, data);
 
   const routeMatch = useRouteMatch([
-    routes.installationWithId,
-    routes.alarmsWithId,
-    routes.usersWithId,
-    routes.logWithId,
+    routes.installations + routes.installation + ":id",
+    routes.installations + routes.alarms + ":id",
+    routes.installations + routes.users + ":id",
+    routes.installations + routes.log + ":id",
   ]);
 
   useEffect(() => {
@@ -76,25 +76,31 @@ const InstallationList = (props: InstallationListProps) => {
           component="nav"
           aria-labelledby="nested-list-subheader"
         >
-          {filteredData?.map((installation) => (
-            <Fragment key={installation.id}>
-              <Link
-                to={
-                  getPathWithoutId(routeMatch?.pattern?.path) + installation.id
-                }
-                style={{ textDecoration: "none", color: "black" }}
-              >
-                <ListItemButton
-                  selected={installation.id === Number(routeMatch?.params.id)}
+          {filteredData?.map((installation) => {
+            console.log(routeMatch);
+            return (
+              <Fragment key={installation.id}>
+                <Link
+                  to={
+                    getPathWithoutId(routeMatch?.pattern?.path) +
+                    installation.id
+                  }
+                  style={{ textDecoration: "none", color: "black" }}
                 >
-                  <ListItemText
-                    primary={installation.location + " | " + installation.name}
-                  />
-                </ListItemButton>
-              </Link>
-              <Divider />
-            </Fragment>
-          ))}
+                  <ListItemButton
+                    selected={installation.id === Number(routeMatch?.params.id)}
+                  >
+                    <ListItemText
+                      primary={
+                        installation.location + " | " + installation.name
+                      }
+                    />
+                  </ListItemButton>
+                </Link>
+                <Divider />
+              </Fragment>
+            );
+          })}
         </List>
       )}
     </>
diff --git a/typescript/Frontend/src/components/InstallationTabs.tsx b/typescript/Frontend/src/components/InstallationTabs.tsx
index 8291357ac..86987e375 100644
--- a/typescript/Frontend/src/components/InstallationTabs.tsx
+++ b/typescript/Frontend/src/components/InstallationTabs.tsx
@@ -9,10 +9,10 @@ import { useIntl } from "react-intl";
 
 const InstallationTabs = () => {
   const routeMatch = useRouteMatch([
-    routes.installationWithId,
-    routes.alarmsWithId,
-    routes.usersWithId,
-    routes.logWithId,
+    routes.installations + routes.installation + ":id",
+    routes.installations + routes.alarms + ":id",
+    routes.installations + routes.users + ":id",
+    routes.installations + routes.log + ":id",
   ]);
 
   const id = routeMatch?.params?.id;
@@ -23,7 +23,7 @@ const InstallationTabs = () => {
       <Box sx={{ width: "100%" }}>
         <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
           <Tabs
-            value={routeMatch?.pattern?.path ?? routes.installationWithId}
+            value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
             aria-label="basic tabs example"
           >
             <Tab
@@ -31,7 +31,9 @@ const InstallationTabs = () => {
                 id: "installation",
                 defaultMessage: "Installation",
               })}
-              value={routes.installationWithId}
+              value={
+                routes.installations + routes.installation + ":id"
+              }
               component={Link}
               to={routes.installation + id}
             />
@@ -40,7 +42,7 @@ const InstallationTabs = () => {
                 id: "alarms",
                 defaultMessage: "Alarms",
               })}
-              value={routes.alarmsWithId}
+              value={routes.installations + routes.alarms + ":id"}
               component={Link}
               to={routes.alarms + id}
             />
@@ -49,7 +51,7 @@ const InstallationTabs = () => {
                 id: "users",
                 defaultMessage: "Users",
               })}
-              value={routes.usersWithId}
+              value={routes.installations + routes.users + ":id"}
               component={Link}
               to={routes.users + id}
             />
@@ -58,7 +60,7 @@ const InstallationTabs = () => {
                 id: "log",
                 defaultMessage: "Log",
               })}
-              value={routes.logWithId}
+              value={routes.installations + routes.log + ":id"}
               component={Link}
               to={routes.log + id}
             />
diff --git a/typescript/Frontend/src/components/NavigationButtons.tsx b/typescript/Frontend/src/components/NavigationButtons.tsx
index 21ccbde9a..096061cb0 100644
--- a/typescript/Frontend/src/components/NavigationButtons.tsx
+++ b/typescript/Frontend/src/components/NavigationButtons.tsx
@@ -1,33 +1,33 @@
 import { ToggleButton, ToggleButtonGroup } from "@mui/material";
 import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+import useRouteMatch from "../hooks/useRouteMatch";
+import routes from "../routes.json";
 
-interface NavigationButtonsProps {
-  currentView: string;
-  setCurrentView: (value: string) => void;
-}
-const NavigationButtons = (props: NavigationButtonsProps) => {
-  const handleChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newAlignment: string
-  ) => {
-    props.setCurrentView(newAlignment);
-  };
+const NavigationButtons = () => {
+  const routeMatch = useRouteMatch([
+    routes.installations + "*",
+    routes.tree + "*",
+  ]);
 
   return (
     <ToggleButtonGroup
       color="primary"
-      value={props.currentView}
+      value={routeMatch?.pattern?.path}
       exclusive
-      onChange={handleChange}
       sx={{ mb: 1 }}
     >
-      <ToggleButton value="installations">
+      <ToggleButton
+        value={routes.installations + "*"}
+        component={Link}
+        to={routes.installations}
+      >
         <FormattedMessage
           id="allInstallations"
           defaultMessage="All installations"
         />
       </ToggleButton>
-      <ToggleButton value="users">
+      <ToggleButton value={routes.tree + "*"} component={Link} to={routes.tree}>
         <FormattedMessage id="users" defaultMessage="Users" />
       </ToggleButton>
     </ToggleButtonGroup>
diff --git a/typescript/Frontend/src/components/UserTree.tsx b/typescript/Frontend/src/components/UserTree.tsx
index 219b2e8ca..0e9a7694a 100644
--- a/typescript/Frontend/src/components/UserTree.tsx
+++ b/typescript/Frontend/src/components/UserTree.tsx
@@ -1,102 +1,23 @@
 import TreeView from "@mui/lab/TreeView";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { TreeItem } from "@mui/lab";
 import { I_Folder, I_Installation } from "../util/types";
+import axiosConfig from "../config/axiosConfig";
 const UserList = () => {
-  const data: I_Folder[] = [
-    {
-      id: 107,
-      name: "Bruen-Tromp",
-      information: "05 Burrows Terrace",
-      parentId: 75,
-      type: "Folder",
-      children: [
-        {
-          id: 100,
-          name: "Sporer and Sons",
-          information: "820 Helena Terrace",
-          parentId: 107,
-          type: "Folder",
-        },
-        {
-          id: 101,
-          name: "Hahn-Heaney",
-          information: "144 Di Loreto Center",
-          parentId: 107,
-          type: "Folder",
-        },
-      ],
-    },
-    {
-      id: 125,
-      name: "Sporer and Sons",
-      information: "820 Helena Terrace",
-      parentId: 107,
-      type: "Folder",
-      children: [
-        {
-          location: "Säffle",
-          region: "SG",
-          country: "SE",
-          orderNumbers: "1LWDGmdXCLmCRFJHTKwcmpoP7bcNeaWJuj",
-          lat: 0,
-          long: 0,
-          s3Bucket: "",
-          id: 632,
-          name: "Nikolas Scholz",
-          information: "",
-          parentId: 125,
-          type: "Installation",
-        },
-        {
-          location: "Krasnoye",
-          region: "ZH",
-          country: "RU",
-          orderNumbers: "1M4Rw8toMSJn3d8ULouDd1gYKzANFXeMWh",
-          lat: 0,
-          long: 0,
-          s3Bucket: "",
-          id: 248,
-          name: "Judye Goldson",
-          information: "",
-          parentId: 125,
-          type: "Installation",
-        },
-        {
-          id: 103,
-          name: "Bruen-Tromp",
-          information: "05 Burrows Terrace",
-          parentId: 75,
-          type: "Folder",
-          children: [
-            {
-              id: 100,
-              name: "Sporer and Sons",
-              information: "820 Helena Terrace",
-              parentId: 107,
-              type: "Folder",
-            },
-            {
-              id: 101,
-              name: "Hahn-Heaney",
-              information: "144 Di Loreto Center",
-              parentId: 107,
-              type: "Folder",
-            },
-          ],
-        },
-      ],
-    },
-    {
-      id: 135,
-      name: "Hahn-Heaney",
-      information: "144 Di Loreto Center",
-      parentId: 107,
-      type: "Folder",
-    },
-  ];
+  const [data, setData] = useState<I_Folder[]>();
+
+  useEffect(() => {
+    axiosConfig.get("/GetTree").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;
@@ -122,14 +43,15 @@ const UserList = () => {
       );
     });
   };
+
   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>
   );
 };
diff --git a/typescript/Frontend/src/routes.json b/typescript/Frontend/src/routes.json
index 311ef8a1c..c65eb635d 100644
--- a/typescript/Frontend/src/routes.json
+++ b/typescript/Frontend/src/routes.json
@@ -1,11 +1,8 @@
 {
-  "installationWithId": "/installation/:id",
-  "installation": "/installation/",
-  "alarmsWithId": "/alarms/:id",
-  "alarms": "/alarms/",
-  "usersWithId": "/users/:id",
-  "users": "/users/",
-  "logWithId": "/log/:id",
-  "log": "/log/",
-  "installations": "/installations"
+  "installation": "installation/",
+  "alarms": "alarms/",
+  "users": "users/",
+  "log": "log/",
+  "installations": "/installations/",
+  "tree": "/users/*"
 }
diff --git a/typescript/Frontend/src/routes/Installation.tsx b/typescript/Frontend/src/routes/Installation.tsx
index 675d65ca7..fe6c60dac 100644
--- a/typescript/Frontend/src/routes/Installation.tsx
+++ b/typescript/Frontend/src/routes/Installation.tsx
@@ -28,7 +28,7 @@ const InstallationDetail = () => {
 
   if (values && values.id && values.id.toString() === id) {
     return (
-      <Box sx={{ py: 3, width: 1 / 2 }}>
+      <Box sx={{ py: 3 }}>
         <CustomerForm values={values} id={id} />
       </Box>
     );
diff --git a/typescript/Frontend/src/routes/Installations.tsx b/typescript/Frontend/src/routes/Installations.tsx
new file mode 100644
index 000000000..f412a2934
--- /dev/null
+++ b/typescript/Frontend/src/routes/Installations.tsx
@@ -0,0 +1,49 @@
+import { Grid, Divider } from "@mui/material";
+import { Container } from "@mui/system";
+import { Routes, Route } from "react-router";
+import InstallationTabs from "../components/InstallationTabs";
+import NavigationButtons from "../components/NavigationButtons";
+import BasicTable from "../components/Table";
+import Alarms from "./Alarms";
+import InstallationDetail from "./Installation";
+import Log from "./Log";
+import routes from "../routes.json";
+import Sidebar from "../components/Sidebar";
+
+const Installations = () => {
+  return (
+    <Container maxWidth="xl">
+      <Grid container spacing={2}>
+        <Grid item xs={3}>
+          <NavigationButtons />
+          <Sidebar />
+        </Grid>
+        <Grid
+          item
+          xs={1}
+          container
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Divider orientation="vertical" variant="middle" />
+        </Grid>
+        <Grid item xs={8}>
+          <InstallationTabs />
+          <Routes>
+            <Route
+              path={routes.installation + ":id"}
+              element={<InstallationDetail />}
+              index
+            />
+            <Route path={routes.alarms + ":id"} element={<Alarms />} />
+            <Route path={routes.users + ":id"} element={<BasicTable />} />
+            <Route path={routes.log + ":id"} element={<Log />} />
+          </Routes>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default Installations;
diff --git a/typescript/Frontend/src/routes/Users.tsx b/typescript/Frontend/src/routes/Users.tsx
new file mode 100644
index 000000000..472c949e8
--- /dev/null
+++ b/typescript/Frontend/src/routes/Users.tsx
@@ -0,0 +1,30 @@
+import { Grid, Divider } from "@mui/material";
+import { Container } from "@mui/system";
+import NavigationButtons from "../components/NavigationButtons";
+import UserTree from "../components/UserTree";
+
+const Users = () => {
+  return (
+    <Container maxWidth="xl">
+      <Grid container spacing={2}>
+        <Grid item xs={3}>
+          <NavigationButtons />
+          <UserTree />
+        </Grid>
+        <Grid
+          item
+          xs={1}
+          container
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Divider orientation="vertical" variant="middle" />
+        </Grid>
+        <Grid item xs={8}></Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default Users;