Fix/321 global system selection should store object

src/components/appBar/AppBar.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useEffect } from "react";
 import useStyles from "@components/appBar/AppBar.styles";
 import { AccountCircle } from "@mui/icons-material";
 import {
@@ -23,10 +22,11 @@ import { ROUTES } from "@utils/constants";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { useTranslation } from "react-i18next";
 import LanguageIcon from "@mui/icons-material/Language";
-import { PRIMARY_LANGUAGE, SECONDARY_LANGUAGE, SELECTED_LANGUAGE_KEY, SELECTED_SYSTEM } from "@utils/constants";
+import { PRIMARY_LANGUAGE, SECONDARY_LANGUAGE, SELECTED_LANGUAGE_KEY } from "@utils/constants";
 import { useAppBar } from "../../contexts/AppBarContext";
 import { useLocation } from "react-router-dom";
 import CancelIcon from "@mui/icons-material/Cancel";
+import {useSelectedSystem} from "@hooks/useSelectedSystem";
 
 interface Props {
   title: string;
@@ -43,16 +43,11 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
   const { appBarTitle, systemsList } = useAppBar();
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const [selectedSystem, setSelectedSystem] = useState<string>(() => sessionStorage.getItem(SELECTED_SYSTEM) || "");
+  const [selectedSystem, setSelectedSystem] = useSelectedSystem();
   const [changePasswordDialogOpen, setChangePasswordDialogOpen] = useState(false);
 
   const isMenuOpen = Boolean(anchorEl);
 
-  useEffect(() => {
-    const currentItem = sessionStorage.getItem(SELECTED_SYSTEM);
-    if (selectedSystem !== currentItem) setSelectedSystem(currentItem);
-  }, [location.pathname]);
-
   const handleProfileMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -109,17 +104,14 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
     }
   };
 
-  const handleSystemChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+  const handleSystemChange = (event : React.ChangeEvent<{ value: unknown }>) => {
     const value = event.target.value as string;
-    setSelectedSystem(value);
-    sessionStorage.setItem(SELECTED_SYSTEM, value);
-    window.dispatchEvent(new Event("storage"));
+    const selectedSystem = value ? systemsList.find((s) => s.iri == value) : null;
+    setSelectedSystem(selectedSystem);
   };
 
   const handleSystemDelete = () => {
-    setSelectedSystem("");
-    sessionStorage.setItem(SELECTED_SYSTEM, "");
-    window.dispatchEvent(new Event("storage"));
+    setSelectedSystem(null);
   };
 
   return (
@@ -147,12 +139,12 @@ const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
                     select
                     InputLabelProps={{ shrink: false }}
                     className={classes.textfieldSelect}
-                    value={selectedSystem || ""}
+                    value={selectedSystem ? selectedSystem.iri : ""}
                     onChange={handleSystemChange}
                   >
                     {systemsList.map((s, i) => {
                       return (
-                        <MenuItem key={`${s.name}-${i}`} value={s.name}>
+                        <MenuItem key={`${s.iri}`} value={s.iri}>
                           {s.name}
                         </MenuItem>
                       );

src/components/dashboard/content/list/FaultTreeAndSystemOverviewTable.tsx

@@ -5,10 +5,11 @@ import { useTranslation } from "react-i18next";
 import useStyles from "./FaultTreeOverviewTable.styles";
 import { FaultTree } from "@models/faultTreeModel";
 import { useNavigate } from "react-router-dom";
-import { ROUTES, SELECTED_SYSTEM } from "@utils/constants";
+import {ROUTES} from "@utils/constants";
 import { extractFragment } from "@services/utils/uriIdentifierUtils";
 import { System } from "@models/systemModel";
 import { getModifiedSystemsList, getModifiedFaultTreesList, formatDate } from "@utils/utils";
+import {useSelectedSystem} from "@hooks/useSelectedSystem";
 
 const faultTreeTableHeadCells = [
   "faultTreeOverviewTable.name",
@@ -45,13 +46,12 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
   const { t } = useTranslation();
   const theme = useTheme();
 
+  const [, setSelectedSystem] = useSelectedSystem();
   const modifiedSystemsList = getModifiedSystemsList(systems, selectedSystem);
   const modifiedFaultTreesList = getModifiedFaultTreesList(faultTrees, selectedSystem);
 
-  const redirectToPath = (routePath: string, systemName?: string) => {
-    if (systemName) {
-      sessionStorage.setItem(SELECTED_SYSTEM, systemName);
-    }
+  const redirectToPath = (routePath: string, system ) => {
+    setSelectedSystem(system);
     navigate(routePath);
   };
 
@@ -103,7 +103,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
                         <Button
                           variant="contained"
                           className={classes.editButton}
-                          onClick={() => redirectToPath(routePath, faultTree?.system?.name)}
+                          onClick={() => redirectToPath(routePath, faultTree?.system)}
                         >
                           {t("faultTreeOverviewTable.edit")}
                         </Button>
@@ -128,7 +128,7 @@ const FaultTreeAndSystemOverviewTable: FC<FaultTreeOverviewTableProps> = ({
                         <Button
                           variant="contained"
                           className={classes.editButton}
-                          onClick={() => redirectToPath(routePath)}
+                          onClick={() => redirectToPath(routePath, system)}
                         >
                           {t("faultTreeOverviewTable.edit")}
                         </Button>

src/components/dashboard/content/list/FaultTreeOverview.tsx

@@ -12,8 +12,8 @@ import FaultTreeEditDialog from "@components/dialog/faultTree/FaultTreeEditDialo
 import FaultTreeDialog from "@components/dialog/faultTree/FaultTreeDialog";
 import { Box, Button } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { SELECTED_SYSTEM, SELECTED_VIEW } from "@utils/constants";
-import { FaultEventsReuseProvider } from "@hooks/useReusableFaultEvents";
+import { SELECTED_VIEW } from "@utils/constants";
+import {useSelectedSystem} from "@hooks/useSelectedSystem";
 
 const FaultTreeOverview = () => {
   const { t } = useTranslation();
@@ -25,25 +25,13 @@ const FaultTreeOverview = () => {
   const [contextMenuSelectedTree, setContextMenuSelectedTree] = useState<FaultTree>(null);
   const [contextMenuAnchor, setContextMenuAnchor] = useState<ElementContextMenuAnchor>(contextMenuDefaultAnchor);
   const [createFaultTreeDialogOpen, setCreateFaultTreeDialogOpen] = useState<boolean>(false);
-  const [selectedSystem, setSelectedSystem] = useState<string | null>(sessionStorage.getItem(SELECTED_SYSTEM));
+  const [selectedSystem] = useSelectedSystem();
 
   useEffect(() => {
     const storedView = localStorage.getItem(SELECTED_VIEW) as ViewType;
     if (storedView) {
       setSelectedView(storedView);
     }
-    const handleStorageChange = () => {
-      const system = sessionStorage.getItem(SELECTED_SYSTEM);
-      if (system) {
-        setSelectedSystem(system);
-      }
-    };
-
-    window.addEventListener("storage", handleStorageChange);
-
-    return () => {
-      window.removeEventListener("storage", handleStorageChange);
-    };
   }, []);
 
   const toggleView = (viewType: ViewType) => {
@@ -83,13 +71,13 @@ const FaultTreeOverview = () => {
 
       {selectedView === "table" ? (
         <FaultTreeAndSystemOverviewTable
-          selectedSystem={selectedSystem}
+          selectedSystem={selectedSystem?.iri}
           faultTrees={faultTrees}
           handleFaultTreeContextMenu={handleContextMenu}
         />
       ) : (
         <FaultTreeAndSystemOverviewCardsList
-          selectedSystem={selectedSystem}
+          selectedSystem={selectedSystem?.iri}
           faultTrees={faultTrees}
           handleFaultTreeContextMenu={handleContextMenu}
         />

src/components/dashboard/content/list/SystemOverview.tsx

@@ -13,7 +13,7 @@ import FaultTreeAndSystemOverviewCardsList from "./FaultTreeAndSystemOverviewCar
 import { useTranslation } from "react-i18next";
 import { Button, Box } from "@mui/material";
 import SystemDialog from "@components/dialog/system/SystemDialog";
-import { SELECTED_SYSTEM } from "@utils/constants";
+import {useSelectedSystem} from "@hooks/useSelectedSystem";
 
 const SystemOverview = () => {
   const { t } = useTranslation();
@@ -25,25 +25,13 @@ const SystemOverview = () => {
   const [contextMenuAnchor, setContextMenuAnchor] = useState<ElementContextMenuAnchor>(contextMenuDefaultAnchor);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [createSystemDialogOpen, setCreateSystemDialogOpen] = useState<boolean>(false);
-  const [selectedSystem, setSelectedSystem] = useState<string | null>(sessionStorage.getItem(SELECTED_SYSTEM));
+  const [selectedSystem, setSelectedSystem] = useSelectedSystem();
 
   useEffect(() => {
     const storedView = localStorage.getItem("selectedView") as ViewType;
     if (storedView) {
       setSelectedView(storedView);
     }
-    const handleStorageChange = () => {
-      const system = sessionStorage.getItem(SELECTED_SYSTEM);
-      if (system) {
-        setSelectedSystem(system);
-      }
-    };
-
-    window.addEventListener("storage", handleStorageChange);
-
-    return () => {
-      window.removeEventListener("storage", handleStorageChange);
-    };
   }, []);
 
   const toggleView = (viewType: ViewType) => {
@@ -83,13 +71,13 @@ const SystemOverview = () => {
 
       {selectedView === "table" ? (
         <FaultTreeAndSystemOverviewTable
-          selectedSystem={selectedSystem}
+          selectedSystem={selectedSystem?.iri}
           systems={systems}
           handleSystemContextMenu={handleContextMenu}
         />
       ) : (
         <FaultTreeAndSystemOverviewCardsList
-          selectedSystem={selectedSystem}
+          selectedSystem={selectedSystem?.iri}
           systems={systems}
           handleSystemContextMenu={handleContextMenu}
         />

src/components/dialog/faultTree/FaultTreeDialog.tsx

@@ -14,24 +14,20 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { rootEventSchema } from "@components/dialog/faultEvent/FaultEventCreation.schema";
 import { FaultEventsReuseProvider } from "@hooks/useReusableFaultEvents";
 import { useTranslation } from "react-i18next";
-import { SELECTED_SYSTEM } from "@utils/constants";
 import useStyles from "@components/dialog/faultTree/FaultTreeDialog.styles";
+import {useSelectedSystem} from "@hooks/useSelectedSystem";
 
 const FaultTreeDialog = ({ open, handleCloseDialog }) => {
   const { t } = useTranslation();
   const { classes } = useStyles();
 
   const [, addFaultTree] = useFaultTrees();
   const [processing, setIsProcessing] = useState(false);
-  const [systemName, setSystemName] = useState(sessionStorage.getItem(SELECTED_SYSTEM));
+  const [selectedSystem] = useSelectedSystem();
 
   const useFormMethods = useForm({ resolver: yupResolver(schema.concat(rootEventSchema)) });
   const { handleSubmit, register } = useFormMethods;
 
-  useEffect(() => {
-    setSystemName(sessionStorage.getItem(SELECTED_SYSTEM));
-  }, [sessionStorage.getItem(SELECTED_SYSTEM)]);
-
   const handleCreateFaultTree = async (values: any) => {
     setIsProcessing(true);
 
@@ -57,7 +53,7 @@ const FaultTreeDialog = ({ open, handleCloseDialog }) => {
       <DialogContent dividers>
         <TextField
           className={classes.readOnly}
-          value={systemName}
+          value={selectedSystem?.name}
           aria-readonly={true}
           margin="dense"
           label={t("newFtaModal.namePlaceholder")}

src/hooks/DashboardContentProvider.tsx

@@ -3,12 +3,16 @@ import { ChildrenProps } from "../utils/hookUtils";
 import { FaultTreesProvider } from "./useFaultTrees";
 import { FailureModesTablesProvider } from "./useFailureModesTables";
 import { SystemsProvider } from "@hooks/useSystems";
+import {SelectedSystemProvider} from "@hooks/useSelectedSystem";
 
 const DashboardContentProvider = ({ children }: ChildrenProps) => {
   return (
+
     <FaultTreesProvider>
       <SystemsProvider>
-        <FailureModesTablesProvider>{children}</FailureModesTablesProvider>
+        <SelectedSystemProvider>
+          <FailureModesTablesProvider>{children}</FailureModesTablesProvider>
+        </SelectedSystemProvider>
       </SystemsProvider>
     </FaultTreesProvider>
   );

src/hooks/useSelectedSystem.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { createContext, useContext, useState } from "react";
+import {SELECTED_SYSTEM} from "@utils/constants";
+import { ChildrenProps } from "@utils/hookUtils";
+import {System} from "../models/systemModel";
+
+type systemContextType = [System, (system: System) => void];
+
+export const selectedSystemContext = createContext<systemContextType>(null!);
+
+export const useSelectedSystem = () => {
+  const [selectedSystem, setSelectedSystem] = useContext(selectedSystemContext);
+  return [selectedSystem, setSelectedSystem] as const;
+};
+
+export const getSelectedSystem = (): System => {
+  const item = sessionStorage.getItem(SELECTED_SYSTEM);
+
+  if (!item)
+    return null;
+
+  return JSON.parse(item);
+};
+
+export const SelectedSystemProvider = ({ children }: ChildrenProps) => {
+  const [_system, _setSelectedSystem] = useState<System>(getSelectedSystem());
+
+  const setSelectedSystem = async (system: System) => {
+    sessionStorage.removeItem(SELECTED_SYSTEM);
+    if(system)
+      sessionStorage.setItem(SELECTED_SYSTEM, JSON.stringify(system));
+    _setSelectedSystem(system);
+  };
+
+  return <selectedSystemContext.Provider value={[_system, setSelectedSystem]}>{children}</selectedSystemContext.Provider>;
+};