From eebe6fdae4375c030e557ca6b938bd86d1c07586 Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Tue, 5 Nov 2024 20:02:08 +0100 Subject: [PATCH 1/2] Add loading property in useSystem and useFaultTrees hooks - loading is true when summaries are fetched and false otherwise --- src/hooks/useFaultTrees.tsx | 11 +++++++---- src/hooks/useSystems.tsx | 15 +++++++++++---- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/hooks/useFaultTrees.tsx b/src/hooks/useFaultTrees.tsx index f79ffd4e..69261364 100644 --- a/src/hooks/useFaultTrees.tsx +++ b/src/hooks/useFaultTrees.tsx @@ -10,18 +10,20 @@ type faultTreeContextType = [ (faultTree: FaultTree) => void, (faultTreeToUpdate: FaultTree) => void, (faultTreeToDelete: FaultTree) => void, + boolean, (filters?: { label?: string; snsLabel?: string; sort?: string }) => void, ]; export const faultTreesContext = createContext(null!); export const useFaultTrees = () => { - const [faultTrees, addFaultTree, updateTree, removeTree, triggerFetch] = useContext(faultTreesContext); - return [faultTrees, addFaultTree, updateTree, removeTree, triggerFetch] as const; + const [faultTrees, addFaultTree, updateTree, removeTree, loading, triggerFetch] = useContext(faultTreesContext); + return [faultTrees, addFaultTree, updateTree, removeTree, loading, triggerFetch] as const; }; export const FaultTreesProvider = ({ children }) => { const [_faultTrees, _setFaultTrees] = useState([]); + const [_loading, _setLoading] = useState(false); const [showSnackbar] = useSnackbar(); const loggedUser = useUserAuth(); @@ -31,10 +33,11 @@ export const FaultTreesProvider = ({ children }) => { if (filters?.label) params.label = filters.label; if (filters?.snsLabel) params.snsLabel = filters.snsLabel; if (filters?.sort) params.sort = filters.sort; - + _setLoading(true); faultTreeService .findAllWithFilters(params) .then((value) => { + _setLoading(false); _setFaultTrees(value); }) .catch((reason) => showSnackbar(reason, SnackbarType.ERROR)); @@ -77,7 +80,7 @@ export const FaultTreesProvider = ({ children }) => { }; return ( - + {children} ); diff --git a/src/hooks/useSystems.tsx b/src/hooks/useSystems.tsx index 7ff4e5c4..8de6c915 100644 --- a/src/hooks/useSystems.tsx +++ b/src/hooks/useSystems.tsx @@ -14,31 +14,38 @@ type systemContextType = [ (systemToCreate: System) => void, (systemToDelete: System, onSuccess: () => void, onFail: () => void) => void, (systemToUpdate: System) => void, + boolean, () => void, ]; export const systemContext = createContext(null!); export const useSystems = () => { - const [systems, addSystem, updateSystem, removeSystem, triggerFetch] = useContext(systemContext); - return [systems, addSystem, updateSystem, removeSystem, triggerFetch] as const; + const [systems, addSystem, updateSystem, removeSystem, loading, triggerFetch] = useContext(systemContext); + return [systems, addSystem, updateSystem, removeSystem, loading, triggerFetch] as const; }; export const SystemsProvider = ({ children }: ChildrenProps) => { const [_systems, _setSystems] = useState([]); + const [_loading, _setLoading] = useState(false); const [showSnackbar] = useSnackbar(); const loggedUser = useUserAuth(); const [shouldFetchSystems, setShouldFetchSystems] = useState(true); useEffect(() => { const fetchSystems = async () => { + _setLoading(true); systemService .findAll() .then((value) => { + _setLoading(false); _setSystems(value); setShouldFetchSystems(false); }) - .catch((reason) => showSnackbar(reason, SnackbarType.ERROR)); + .catch((reason) => { + _setLoading(false); + showSnackbar(reason, SnackbarType.ERROR); + }); }; if (loggedUser && shouldFetchSystems) fetchSystems(); @@ -88,7 +95,7 @@ export const SystemsProvider = ({ children }: ChildrenProps) => { const triggerFetch = () => setShouldFetchSystems(true); return ( - + {children} ); From e2019254bc46ad63b64337e5c0f9eeb9c5a57538 Mon Sep 17 00:00:00 2001 From: Bogdan Kostov Date: Tue, 5 Nov 2024 20:04:20 +0100 Subject: [PATCH 2/2] Use loading property of useSystem and useFaultTrees hooks in systems and fault tree overview pages. - style loading animated icon --- .../list/FaultTreeAndSystemOverviewCardsList.tsx | 11 +++++++++-- .../dashboard/content/list/FaultTreeOverview.tsx | 4 +++- .../dashboard/content/list/SystemOverview.tsx | 9 +++++++-- .../table/FaultTreeAndSystemOverviewTable.tsx | 11 ++++++++--- 4 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/components/dashboard/content/list/FaultTreeAndSystemOverviewCardsList.tsx b/src/components/dashboard/content/list/FaultTreeAndSystemOverviewCardsList.tsx index 6a92bb55..3a1505d5 100644 --- a/src/components/dashboard/content/list/FaultTreeAndSystemOverviewCardsList.tsx +++ b/src/components/dashboard/content/list/FaultTreeAndSystemOverviewCardsList.tsx @@ -1,5 +1,5 @@ import React, { FC, useState } from "react"; -import { Box, Grid, Typography, Button, useTheme } from "@mui/material"; +import { Box, Grid, Typography, Button, useTheme, CircularProgress } from "@mui/material"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import useStyles from "./FaultTreeOverviewCardsList.styles"; import { useTranslation } from "react-i18next"; @@ -16,6 +16,7 @@ const borderHover = "1px solid #60A3D9"; interface FaultTreeOverviewCardsListProps { faultTrees?: FaultTree[]; systems?: System[]; + loading: boolean; handleFaultTreeContextMenu?: (evt: any, faultTree: FaultTree) => void; handleSystemContextMenu?: (evt: any, system: System) => void; selectedSystem: System | null; @@ -33,6 +34,7 @@ interface CardProps { const FaultTreeAndSystemOverviewCardsList: FC = ({ faultTrees, systems, + loading, handleFaultTreeContextMenu, handleSystemContextMenu, selectedSystem, @@ -69,7 +71,12 @@ const FaultTreeAndSystemOverviewCardsList: FC = ); }; - + if (loading) + return ( +
+ +
+ ); return ( diff --git a/src/components/dashboard/content/list/FaultTreeOverview.tsx b/src/components/dashboard/content/list/FaultTreeOverview.tsx index 6ef2bb19..91d6e779 100644 --- a/src/components/dashboard/content/list/FaultTreeOverview.tsx +++ b/src/components/dashboard/content/list/FaultTreeOverview.tsx @@ -20,7 +20,7 @@ import { asArray } from "@utils/utils"; const FaultTreeOverview = () => { const { t } = useTranslation(); const [showConfirmDialog] = useConfirmDialog(); - const [faultTrees, , , removeTree, triggerFetch] = useFaultTrees(); + const [faultTrees, , , removeTree, loading, triggerFetch] = useFaultTrees(); const [selectedView, setSelectedView] = useState("table"); const [editDialogOpen, setEditDialogOpen] = useState(false); @@ -106,6 +106,7 @@ const FaultTreeOverview = () => { { )} diff --git a/src/components/dashboard/content/list/SystemOverview.tsx b/src/components/dashboard/content/list/SystemOverview.tsx index 05cfc673..90c3d816 100644 --- a/src/components/dashboard/content/list/SystemOverview.tsx +++ b/src/components/dashboard/content/list/SystemOverview.tsx @@ -18,7 +18,7 @@ import { useSelectedSystemSummaries } from "@hooks/useSelectedSystemSummaries"; const SystemOverview = () => { const { t } = useTranslation(); const [showConfirmDialog] = useConfirmDialog(); - const [systems, , , removeSystem, triggerFetch] = useSystems(); + const [systems, , , removeSystem, loading, triggerFetch] = useSystems(); const [selectedView, setSelectedView] = useState("table"); const [contextMenuSelectedSystem, setContextMenuSelectedSystem] = useState(null); @@ -73,11 +73,16 @@ const SystemOverview = () => { {selectedView === "table" ? ( - + ) : ( )} diff --git a/src/components/table/FaultTreeAndSystemOverviewTable.tsx b/src/components/table/FaultTreeAndSystemOverviewTable.tsx index 3e355eec..11162597 100644 --- a/src/components/table/FaultTreeAndSystemOverviewTable.tsx +++ b/src/components/table/FaultTreeAndSystemOverviewTable.tsx @@ -25,6 +25,7 @@ import SystemTableHead from "./SystemTableHead"; interface FaultTreeOverviewTableProps { faultTrees?: FaultTree[]; systems?: System[]; + loading: boolean; handleFaultTreeContextMenu?: (evt: any, faultTree: FaultTree) => void; handleSystemContextMenu?: (evt: any, system: System) => void; handleFilterChange?: (label: string, snsLabel: string) => Promise; @@ -36,6 +37,7 @@ interface FaultTreeOverviewTableProps { const FaultTreeAndSystemOverviewTable: FC = ({ faultTrees, systems, + loading, handleFaultTreeContextMenu, handleSystemContextMenu, handleFilterChange, @@ -45,7 +47,6 @@ const FaultTreeAndSystemOverviewTable: FC = ({ }) => { const { classes } = useStyles(); const [selectedSystemState, setSelectedSystem] = useSelectedSystemSummaries(); - const [loading, setLoading] = useState(false); const [filterAnchorEl, setFilterAnchorEl] = useState(null); const [filterType, setFilterType] = useState(null); @@ -91,8 +92,12 @@ const FaultTreeAndSystemOverviewTable: FC = ({ {loading ? ( - - + + ) : (