Innovenergy
/
Innovenergy_trunk
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

add context for state management for installation and group

This commit is contained in:
Sina Blattmann 2023-03-13 15:17:40 +01:00
parent 3a6f4fc046
commit c5287ce95f
15 changed files with 248 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
typescript/Frontend/package-lock.json generated
View File

@ -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",

1
typescript/Frontend/package.json
View File

@ -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",

51
typescript/Frontend/src/components/Context/GroupContextProvider.tsx Normal file
View File

@ -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;

43
typescript/Frontend/src/components/Context/InstallationContextProvider.tsx Normal file
View File

@ -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;

3
typescript/Frontend/src/components/Groups/Folder.tsx
View File

@ -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();

6
typescript/Frontend/src/components/Groups/FolderForm.tsx
View File

@ -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);

45
typescript/Frontend/src/components/Groups/Groups.tsx
View File

@ -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>
);
};

13
typescript/Frontend/src/components/Groups/Tree/GroupDataContext.tsx
View File

@ -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;

40
typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
View File

@ -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);

4
typescript/Frontend/src/components/Groups/Tree/TreeNode.module.scss
View File

@ -34,3 +34,7 @@
.handle > svg {
pointer-events: none;
}
.selected {
background-color: #f5910014;
}

19
typescript/Frontend/src/components/Groups/Tree/TreeNode.tsx
View File

@ -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

23
typescript/Frontend/src/components/Installations/CustomerForm.tsx
View File

@ -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();
}
});
},
});

4
typescript/Frontend/src/components/Installations/Installation.tsx
View File

@ -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;

110
typescript/Frontend/src/components/Installations/InstallationList.tsx
View File

@ -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;

45
typescript/Frontend/src/components/Installations/Installations.tsx
View File

@ -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>
);
};