add context for state management for installation and group

2023-03-13 15:17:40 +01:00 · 2023-03-13 15:17:40 +01:00 · c5287ce95f
parent 3a6f4fc046
commit c5287ce95f
15 changed files with 248 additions and 203 deletions
--- a/typescript/Frontend/package-lock.json
+++ b/typescript/Frontend/package-lock.json
@ -26,7 +26,6 @@
        "chart.js": "^4.2.1",
        "css-loader": "^6.7.3",
        "formik": "^2.2.9",
-        "mobx-react-lite": "^3.4.3",
        "react": "^18.2.0",
        "react-chartjs-2": "^5.2.0",
        "react-dnd": "^16.0.1",
@ -13219,37 +13218,6 @@
        "mkdirp": "bin/cmd.js"
      }
    },
-    "node_modules/mobx": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.8.0.tgz",
-      "integrity": "sha512-+o/DrHa4zykFMSKfS8Z+CPSEg5LW9tSNGTuN8o6MF1GKxlfkSHSeJn5UtgxvPkGgaouplnrLXCF+duAsmm6FHQ==",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mobx"
-      }
-    },
-    "node_modules/mobx-react-lite": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.3.tgz",
-      "integrity": "sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mobx"
-      },
-      "peerDependencies": {
-        "mobx": "^6.1.0",
-        "react": "^16.8.0 || ^17 || ^18"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -28182,18 +28150,6 @@
        "minimist": "^1.2.6"
      }
    },
-    "mobx": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.8.0.tgz",
-      "integrity": "sha512-+o/DrHa4zykFMSKfS8Z+CPSEg5LW9tSNGTuN8o6MF1GKxlfkSHSeJn5UtgxvPkGgaouplnrLXCF+duAsmm6FHQ==",
-      "peer": true
-    },
-    "mobx-react-lite": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.3.tgz",
-      "integrity": "sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg==",
-      "requires": {}
-    },
    "ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
--- a/typescript/Frontend/package.json
+++ b/typescript/Frontend/package.json
@ -21,7 +21,6 @@
    "chart.js": "^4.2.1",
    "css-loader": "^6.7.3",
    "formik": "^2.2.9",
-    "mobx-react-lite": "^3.4.3",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dnd": "^16.0.1",
--- a/typescript/Frontend/src/components/Context/GroupContextProvider.tsx
+++ b/typescript/Frontend/src/components/Context/GroupContextProvider.tsx
@ -0,0 +1,51 @@
+import { createContext, ReactNode, useCallback, useState } from "react";
+import axiosConfig from "../../config/axiosConfig";
+import { I_Folder, I_Installation } from "../../util/types";
+
+interface GroupContextProviderProps {
+  data: (I_Folder | I_Installation)[];
+  setData: (value: (I_Folder | I_Installation)[]) => void;
+  fetchData: () => Promise<void>;
+  loading: boolean;
+  setLoading: (value: boolean) => void;
+  getError: boolean;
+}
+
+export const GroupContext = createContext<GroupContextProviderProps>({
+  data: [],
+  setData: () => {},
+  fetchData: () => Promise.resolve(),
+  loading: false,
+  setLoading: () => {},
+  getError: false,
+});
+
+const GroupContextProvider = ({ children }: { children: ReactNode }) => {
+  const [data, setData] = useState<(I_Folder | I_Installation)[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [getError, setGetError] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    return axiosConfig
+      .get("/GetAllFoldersAndInstallations")
+      .then((res) => {
+        setData(res.data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setGetError(err);
+        setLoading(false);
+      });
+  }, [setData]);
+
+  return (
+    <GroupContext.Provider
+      value={{ data, setData, fetchData, loading, setLoading, getError }}
+    >
+      {children}
+    </GroupContext.Provider>
+  );
+};
+
+export default GroupContextProvider;
--- a/typescript/Frontend/src/components/Context/InstallationContextProvider.tsx
+++ b/typescript/Frontend/src/components/Context/InstallationContextProvider.tsx
@ -0,0 +1,43 @@
+import { createContext, ReactNode, useCallback, useState } from "react";
+import axiosConfig from "../../config/axiosConfig";
+import { I_Installation } from "../../util/types";
+
+interface InstallationContextProviderProps {
+  data: I_Installation[];
+  setData: (value: I_Installation[]) => void;
+  fetchData: () => Promise<void>;
+  loading: boolean;
+  setLoading: (value: boolean) => void;
+}
+
+export const InstallationContext =
+  createContext<InstallationContextProviderProps>({
+    data: [],
+    setData: () => {},
+    fetchData: () => Promise.resolve(),
+    loading: false,
+    setLoading: () => {},
+  });
+
+const InstallationContextProvider = ({ children }: { children: ReactNode }) => {
+  const [data, setData] = useState<I_Installation[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    axiosConfig.get("/GetAllInstallations", {}).then((res) => {
+      setData(res.data);
+      setLoading(false);
+    });
+  }, []);
+
+  return (
+    <InstallationContext.Provider
+      value={{ data, setData, fetchData, loading, setLoading }}
+    >
+      {children}
+    </InstallationContext.Provider>
+  );
+};
+
+export default InstallationContextProvider;
--- a/typescript/Frontend/src/components/Groups/Folder.tsx
+++ b/typescript/Frontend/src/components/Groups/Folder.tsx
@ -1,11 +1,10 @@
 import { Box, CircularProgress, Alert } from "@mui/material";
 import { AxiosError } from "axios";
-import { useState, useEffect, useContext } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import axiosConfig from "../../config/axiosConfig";
 import { I_Installation } from "../../util/types";
 import FolderForm from "./FolderForm";
-import GroupDataContext from "./Tree/GroupDataContext";

 const Folder = () => {
  const { id } = useParams();
--- a/typescript/Frontend/src/components/Groups/FolderForm.tsx
+++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx
@ -1,11 +1,12 @@
 import { Button, CircularProgress, Grid } from "@mui/material";
 import { useFormik } from "formik";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import axiosConfig from "../../config/axiosConfig";
 import { I_Folder } from "../../util/types";
 import InnovenergySnackbar from "../InnovenergySnackbar";
 import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
+import { GroupContext } from "../Context/GroupContextProvider";

 interface I_CustomerFormProps {
  values: I_Folder;
@ -16,6 +17,8 @@ const updateFolder = (data: I_Folder) => {
  return axiosConfig.put("/UpdateFolder", data);
 };
 const FolderForm = (props: I_CustomerFormProps) => {
+  const { fetchData } = useContext(GroupContext);
+
  const { values, id } = props;
  const intl = useIntl();

@ -39,6 +42,7 @@ const FolderForm = (props: I_CustomerFormProps) => {
        .then((res) => {
          setSnackbarOpen(true);
          setLoading(false);
+          fetchData();
        })
        .catch((err) => {
          setSnackbarOpen(true);
--- a/typescript/Frontend/src/components/Groups/Groups.tsx
+++ b/typescript/Frontend/src/components/Groups/Groups.tsx
@ -1,38 +1,37 @@
 import { Grid } from "@mui/material";
 import { Container } from "@mui/system";
-import { useState } from "react";
 import { Routes, Route } from "react-router";
 import routes from "../../routes.json";
-import { I_Folder, I_Installation } from "../../util/types";
-import InstallationDetail from "../Installations/Installation";
+import Installation from "../Installations/Installation";
 import NavigationButtons from "../Layout/NavigationButtons";
 import Folder from "./Folder";
 import GroupTabs from "./GroupTabs";
+import GroupContextProvider from "../Context/GroupContextProvider";
 import GroupTree from "./Tree/GroupTree";

 const Groups = () => {
-  const [data, setData] = useState<(I_Folder | I_Installation)[]>();
-
  return (
-    <Container maxWidth="xl">
-      <Grid container spacing={2}>
-        <Grid item xs={3}>
-          <NavigationButtons />
-          <GroupTree data={data} setData={setData} />
+    <GroupContextProvider>
+      <Container maxWidth="xl">
+        <Grid container spacing={2}>
+          <Grid item xs={3}>
+            <NavigationButtons />
+            <GroupTree />
+          </Grid>
+          <Grid item xs={9}>
+            <GroupTabs />
+            <Routes>
+              <Route path={routes.folder + ":id"} element={<Folder />} index />
+              <Route path={routes.users + ":id"} element={<div>Users</div>} />
+              <Route
+                path={routes.installation + ":id"}
+                element={<Installation />}
+              />
+            </Routes>
+          </Grid>
        </Grid>
-        <Grid item xs={9}>
-          <GroupTabs />
-          <Routes>
-            <Route path={routes.folder + ":id"} element={<Folder />} index />
-            <Route path={routes.users + ":id"} element={<div>Users</div>} />
-            <Route
-              path={routes.installation + ":id"}
-              element={<InstallationDetail />}
-            />
-          </Routes>
-        </Grid>
-      </Grid>
-    </Container>
+      </Container>
+    </GroupContextProvider>
  );
 };

--- a/typescript/Frontend/src/components/Groups/Tree/GroupDataContext.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/GroupDataContext.tsx
@ -1,13 +0,0 @@
-import { createContext } from "react";
-import { I_Folder, I_Installation } from "../../../util/types";
-
-interface GroupData {
-  data: (I_Folder | I_Installation)[] | undefined;
-  setData: (value: (I_Folder | I_Installation)[]) => void;
-}
-const GroupDataContext = createContext<GroupData>({
-  setData: (value) => {},
-  data: [],
-});
-
-export default GroupDataContext;
--- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState, useContext } from "react";
 import axiosConfig from "../../../config/axiosConfig";
 import { I_Folder, I_Installation } from "../../../util/types";
 import { Alert, CircularProgress, Grid } from "@mui/material";
@ -15,6 +15,7 @@ import styles from "./GroupTree.module.scss";
 import withScrolling from "react-dnd-scrolling";
 import DragPreview from "./DragPreview";
 import InnovenergySnackbar from "../../InnovenergySnackbar";
+import { GroupContext } from "../../Context/GroupContextProvider";

 const getTreeData = (
  data: (I_Folder | I_Installation)[]
@ -31,40 +32,19 @@ const getTreeData = (
  });
 };

-interface GroupTreeProps {
-  data: (I_Folder | I_Installation)[] | undefined;
-  setData: (value: (I_Folder | I_Installation)[]) => void;
-}
-
-const GroupTree = (props: GroupTreeProps) => {
-  const { data, setData } = props;
-  const [loading, setLoading] = useState(false);
-  const [getError, setGetError] = useState(false);
+const GroupTree = () => {
+  const { data, fetchData, loading, setLoading, getError } =
+    useContext(GroupContext);
  const [putError, setPutError] = useState(false);
-
  const [snackbarOpen, setSnackbarOpen] = useState(false);

  const ScrollingComponent = withScrolling("div");

-  const getData = useCallback(async () => {
-    setLoading(true);
-    return axiosConfig
-      .get("/GetAllFoldersAndInstallations")
-      .then((res) => {
-        setData(res.data);
-        setLoading(false);
-      })
-      .catch((err) => {
-        setGetError(err);
-        setLoading(false);
-      });
-  }, [setData]);
-
  useEffect(() => {
-    getData();
-  }, [getData]);
+    fetchData();
+  }, [fetchData]);

-  const findParent = (element: I_Folder | I_Installation): any => {
+  /*   const findParent = (element: I_Folder | I_Installation): any => {
    if (data) {
      const parent = data.find(
        (el) => el.type === "Folder" && el.id === element.parentId
@ -74,7 +54,7 @@ const GroupTree = (props: GroupTreeProps) => {
      }
      return element.parentId;
    }
-  };
+  }; */

  const handleDrop = (
    newTree: NodeModel<I_Folder | I_Installation>[],
@ -92,7 +72,7 @@ const GroupTree = (props: GroupTreeProps) => {
      )
      .then(() => {
        setSnackbarOpen(true);
-        getData();
+        fetchData();
      })
      .catch((err) => {
        setPutError(err);
--- a/typescript/Frontend/src/components/Groups/Tree/TreeNode.module.scss
+++ b/typescript/Frontend/src/components/Groups/Tree/TreeNode.module.scss
@ -34,3 +34,7 @@
 .handle > svg {
  pointer-events: none;
 }
+
+.selected {
+  background-color: #f5910014;
+}
--- a/typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx
@ -8,20 +8,27 @@ import routes from "../../../routes.json";
 import { I_Folder, I_Installation } from "../../../util/types";
 import TypeIcon from "../TypeIcon";
 import DragHandleIcon from "@mui/icons-material/DragHandle";
+import useRouteMatch from "../../../hooks/useRouteMatch";

-type Props = {
+interface TreeNodeProps {
  node: NodeModel<I_Installation | I_Folder>;
  depth: number;
  isOpen: boolean;
  onToggle: (id: NodeModel["id"]) => void;
  hasChild: boolean;
  handleRef: React.RefObject<any>;
-};
+}

-const TreeNode: React.FC<Props> = (props) => {
+const TreeNode = (props: TreeNodeProps) => {
  const { node, isOpen, hasChild, onToggle, depth, handleRef } = props;
  const indent = depth * 24;

+  const routeMatch = useRouteMatch([
+    routes.groups + routes.installation + ":id",
+    routes.groups + routes.folder + ":id",
+    routes.groups + routes.users + ":id",
+  ]);
+
  const handleToggle = (e: React.MouseEvent) => {
    e.stopPropagation();
    onToggle(node.id);
@ -29,7 +36,11 @@ const TreeNode: React.FC<Props> = (props) => {

  return (
    <div
-      className={`tree-node ${styles.root}`}
+      className={`tree-node ${styles.root} ${
+        routeMatch?.params.id === node.data?.id.toString()
+          ? styles.selected
+          : ""
+      }`}
      style={{ paddingInlineStart: indent }}
    >
      <div
--- a/typescript/Frontend/src/components/Installations/CustomerForm.tsx
+++ b/typescript/Frontend/src/components/Installations/CustomerForm.tsx
@ -1,10 +1,14 @@
 import { Alert, Button, Grid, Snackbar } from "@mui/material";
 import { useFormik } from "formik";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import axiosConfig from "../../config/axiosConfig";
+import useRouteMatch from "../../hooks/useRouteMatch";
 import { I_Installation } from "../../util/types";
+import { GroupContext } from "../Context/GroupContextProvider";
 import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
+import routes from "../../routes.json";
+import { InstallationContext } from "../Context/InstallationContextProvider";

 interface I_CustomerFormProps {
  values: I_Installation;
@ -12,10 +16,16 @@ interface I_CustomerFormProps {
 }
 const CustomerForm = (props: I_CustomerFormProps) => {
  const { values, id } = props;
-  const intl = useIntl();
-
  const [open, setOpen] = useState(false);

+  const intl = useIntl();
+  const { fetchData: fetchGroupData } = useContext(GroupContext);
+  const { fetchData: fetchInstallationData } = useContext(InstallationContext);
+
+  const groupsMatch = useRouteMatch([
+    routes.groups + routes.installation + ":id",
+  ]);
+
  const formik = useFormik({
    initialValues: {
      name: values.name,
@ -30,8 +40,13 @@ const CustomerForm = (props: I_CustomerFormProps) => {
          ...formikValues,
          id,
        })
-        .then((res) => {
+        .then(() => {
          setOpen(true);
+          if (groupsMatch) {
+            fetchGroupData();
+          } else {
+            fetchInstallationData();
+          }
        });
    },
  });
--- a/typescript/Frontend/src/components/Installations/Installation.tsx
+++ b/typescript/Frontend/src/components/Installations/Installation.tsx
@ -6,7 +6,7 @@ import CustomerForm from "./CustomerForm";
 import axiosConfig from "../../config/axiosConfig";
 import { I_Installation } from "../../util/types";

-const InstallationDetail = () => {
+const Installation = () => {
  const { id } = useParams();
  const [values, setValues] = useState<I_Installation>();
  const [loading, setLoading] = useState(false);
@ -50,4 +50,4 @@ const InstallationDetail = () => {
  return null;
 };

-export default InstallationDetail;
+export default Installation;
--- a/typescript/Frontend/src/components/Installations/InstallationList.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx
@ -5,9 +5,9 @@ import { CircularProgress, Divider, Grid } from "@mui/material";
 import { Link } from "react-router-dom";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useContext, useEffect } from "react";
 import { I_Installation } from "../../util/types";
-import axiosConfig from "../../config/axiosConfig";
+import { InstallationContext } from "../Context/InstallationContextProvider";

 interface InstallationListProps {
  searchQuery: string;
@ -36,8 +36,8 @@ const filterData = (
 };

 const InstallationList = (props: InstallationListProps) => {
-  const [data, setData] = useState<I_Installation[]>();
-  const [loading, setLoading] = useState(false);
+  const { fetchData, data, loading } = useContext(InstallationContext);
+
  const filteredData = filterData(props.searchQuery, data);

  const routeMatch = useRouteMatch([
@ -48,62 +48,56 @@ const InstallationList = (props: InstallationListProps) => {
  ]);

  useEffect(() => {
-    setLoading(true);
-    axiosConfig.get("/GetAllInstallations", {}).then((res) => {
-      setData(res.data);
-      setLoading(false);
-    });
-  }, []);
+    fetchData();
+  }, [fetchData]);

-  return (
-    <>
-      {loading && (
-        <Grid container justifyContent="center" width="100%">
-          <CircularProgress sx={{ m: 6 }} />
-        </Grid>
-      )}
-      {data && (
-        <List
-          sx={{
-            width: "100%",
-            bgcolor: "background.paper",
-            position: "relative",
-            overflow: "auto",
-            maxHeight: 400,
-            py: 0,
-            mt: 1,
-          }}
-          component="nav"
-          aria-labelledby="nested-list-subheader"
-        >
-          {filteredData?.map((installation) => {
-            return (
-              <Fragment key={installation.id}>
-                <Link
-                  to={
-                    getPathWithoutId(routeMatch?.pattern?.path) +
-                    installation.id
-                  }
-                  style={{ textDecoration: "none", color: "black" }}
+  if (loading) {
+    return (
+      <Grid container justifyContent="center" width="100%">
+        <CircularProgress sx={{ m: 6 }} />
+      </Grid>
+    );
+  }
+  if (data) {
+    return (
+      <List
+        sx={{
+          width: "100%",
+          bgcolor: "background.paper",
+          position: "relative",
+          overflow: "auto",
+          maxHeight: 400,
+          py: 0,
+          mt: 1,
+        }}
+        component="nav"
+        aria-labelledby="nested-list-subheader"
+      >
+        {filteredData?.map((installation) => {
+          return (
+            <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)}
                >
-                  <ListItemButton
-                    selected={installation.id === Number(routeMatch?.params.id)}
-                  >
-                    <ListItemText
-                      primary={
-                        installation.location + " | " + installation.name
-                      }
-                    />
-                  </ListItemButton>
-                </Link>
-                <Divider />
-              </Fragment>
-            );
-          })}
-        </List>
-      )}
-    </>
-  );
+                  <ListItemText
+                    primary={installation.location + " | " + installation.name}
+                  />
+                </ListItemButton>
+              </Link>
+              <Divider />
+            </Fragment>
+          );
+        })}
+      </List>
+    );
+  }
+  return null;
 };

 export default InstallationList;
--- a/typescript/Frontend/src/components/Installations/Installations.tsx
+++ b/typescript/Frontend/src/components/Installations/Installations.tsx
@ -5,34 +5,37 @@ import NavigationButtons from "../Layout/NavigationButtons";
 import Sidebar from "../Layout/Sidebar";
 import BasicTable from "../Layout/Table";
 import Alarms from "./Alarms";
-import InstallationDetail from "./Installation";
+import Installation from "./Installation";
 import InstallationTabs from "./InstallationTabs";
 import Log from "./Log";
 import routes from "../../routes.json";
+import InstallationContextProvider from "../Context/InstallationContextProvider";

 const Installations = () => {
  return (
-    <Container maxWidth="xl">
-      <Grid container spacing={4}>
-        <Grid item xs={3}>
-          <NavigationButtons />
-          <Sidebar />
+    <InstallationContextProvider>
+      <Container maxWidth="xl">
+        <Grid container spacing={4}>
+          <Grid item xs={3}>
+            <NavigationButtons />
+            <Sidebar />
+          </Grid>
+          <Grid item xs={9}>
+            <InstallationTabs />
+            <Routes>
+              <Route
+                path={routes.installation + ":id"}
+                element={<Installation />}
+                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>
-        <Grid item xs={9}>
-          <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>
+      </Container>
+    </InstallationContextProvider>
  );
 };