fix error notification

src/components/notifications/WebsocketConnectError.js

@@ -1,7 +1,7 @@
 import {Button} from "@mui/material";
 import {enqueueSnackbar} from "notistack";
 
-export default function WebsocketConnectError() {
+export default function showWebsocketConnectError() {
     const action = (
         <Button
             size="small"

src/routes/Containers/List/ContainersList.js

@@ -1,4 +1,4 @@
-import {useEffect, useMemo, useState} from "react";
+import {useEffect, useMemo} from "react";
 import {useNavigate} from "react-router-dom";
 import dataModel from "../../../lib/dataModel";
 import ContainersTable from "./ContainersTable";
@@ -11,16 +11,13 @@ import {aioProvider, isConnectError, isDisconnectError} from "../../../lib/dataP
 import {showWebsocketDisconnectError} from "../../../components/notifications/WebsocketDisconnectError";
 import ContainerUpLearnMore from "../../../components/ContainerUpLearnMore";
 import {closeSnackbar, enqueueSnackbar} from "notistack";
-import WebsocketConnectError from "../../../components/notifications/WebsocketConnectError";
+import showWebsocketConnectError from "../../../components/notifications/WebsocketConnectError";
+import {containerListActions as storeActions} from "./store";
 
 export default function ContainersList() {
-    const [loading, setLoading] = useState(true);
-    const [errMsg, setErrMsg] = useState('');
     const navigate = useNavigate();
-    const [containers, setContainers] = useState([]);
 
     useEffect(() => {
-        const snackbarKeys = [];
         let count = 0;
 
         let tryConnect = () => {};
@@ -30,8 +27,7 @@ export default function ContainersList() {
         let disconnectKey = null;
 
         const onData = data => {
-            setContainers(data);
-            setLoading(false);
+            storeActions.setContainers(data);
 
             if (disconnectKey) {
                 closeSnackbar(disconnectKey);
@@ -52,12 +48,17 @@ export default function ContainersList() {
             if (error.response) {
                 e = error.response.data;
             }
-            if (loading) {
-                snackbarKeys.push(enqueueSnackbar(e, {
-                    variant: "error",
-                    persist: true
-                }));
-                setLoading(false);
+            // loading
+            if (count === 0) {
+                if (isConnectError(error)) {
+                    storeActions.pushSnackbarKey(showWebsocketConnectError());
+                } else {
+                    storeActions.pushSnackbarKey(enqueueSnackbar(e, {
+                        variant: "error",
+                        persist: true
+                    }));
+                }
+                storeActions.setError();
             } else {
                 if (isDisconnectError(error) || count) {
                     // if count > 0, it must be a disconnect err
@@ -76,16 +77,10 @@ export default function ContainersList() {
                             retryTimeout = null;
                         }, 1000 * tryCount * tryCount);
                     } else {
-                        // show connect error only when connecting
-                        // no retry
-                        if (isConnectError(error)) {
-                            snackbarKeys.push(WebsocketConnectError());
-                        } else {
-                            snackbarKeys.push(enqueueSnackbar(e, {
-                                variant: "error",
-                                persist: true
-                            }));
-                        }
+                        storeActions.pushSnackbarKey(enqueueSnackbar(e, {
+                            variant: "error",
+                            persist: true
+                        }));
                     }
                 }
             }
@@ -100,11 +95,7 @@ export default function ContainersList() {
         tryConnect();
         return () => {
             cancel();
-            for (const key of snackbarKeys) {
-                // todo fix snackbar
-                console.log('close snackbar');
-                closeSnackbar(key);
-            }
+            storeActions.reset();
             if (disconnectKey) {
                 closeSnackbar(disconnectKey);
                 disconnectKey = null;
@@ -113,7 +104,7 @@ export default function ContainersList() {
                 clearTimeout(retryTimeout);
             }
         };
-    }, [loading, navigate]);
+    }, [navigate]);
 
     const barButtons = useMemo(() => (
         <Tooltip title="Create a container">
@@ -146,11 +137,7 @@ export default function ContainersList() {
 
     return (
         <>
-            <ContainersTable
-                loading={loading}
-                errMsg={errMsg}
-                containersData={containers}
-            />
+            <ContainersTable />
 
             <ContainerUpLearnMore variant="long" />
         </>

src/routes/Containers/List/ContainersTable.js

@@ -1,5 +1,5 @@
 import {
-    Alert, Box,
+    Box,
     Paper, Stack,
     Table,
     TableBody,
@@ -13,13 +13,19 @@ import MyTableRowSingle from "../../../components/MyTableRowSingle";
 import Link from '@mui/material/Link';
 import {Link as RouterLink} from "react-router-dom";
 import ContainerStatus from "../ContainerStatus";
-import {useMemo} from "react";
 import ContainerActions from "./ContainerActions";
 import CreatedAt from "../../../components/CreatedAt";
 import {ResponsiveTableCell as TableCell} from "../../../components/ReponsiveTableCell";
-
-export default function ContainersTable({loading, errMsg, containersData}) {
-    const cd = useMemo(() => {
+import {useContainerListStore} from "./store";
+
+export default function ContainersTable() {
+    const loading = useContainerListStore(state => state.loading);
+    const isErr = useContainerListStore(state => !state.containers);
+    const cd = useContainerListStore(state => {
+        const containersData = state.containers;
+        if (containersData === null) {
+            return [];
+        }
         return containersData.map(c => {
             c.idShort = c.Id.substring(0, 12);
 
@@ -46,7 +52,7 @@ export default function ContainersTable({loading, errMsg, containersData}) {
 
             return c;
         });
-    }, [containersData]);
+    });
 
     return (
         <TableContainer component={Paper} sx={{maxHeight: "calc(100vh - 96px)"}}>
@@ -67,21 +73,19 @@ export default function ContainersTable({loading, errMsg, containersData}) {
                         <MyTableRowsLoader rows={3} cols={7} sx={{height: '72px'}} />
                     )}
 
-                    {!!errMsg && (
+                    {isErr && !cd.length && (
                         <MyTableRowSingle cols={7}>
-                            <Alert severity="error">
-                                {errMsg}
-                            </Alert>
+                            ❌ Error occurred.
                         </MyTableRowSingle>
                     )}
 
-                    {!errMsg && !loading && !containersData.length && (
+                    {!isErr && !loading && !cd.length && (
                         <MyTableRowSingle cols={7}>
                             No container found. Create one?
                         </MyTableRowSingle>
                     )}
 
-                    {!errMsg && !loading && cd.map(c => (
+                    {!isErr && !loading && cd.map(c => (
                         <TableRow key={c.Id}>
                             <TableCell>
                                 <Link component={RouterLink} to={c.idShort + '/overview'}>

src/routes/Containers/List/store.js

@@ -0,0 +1,41 @@
+import { create } from 'zustand';
+import {devtools} from "zustand/middleware";
+import {closeSnackbar} from "notistack";
+
+const initState = {
+    loading: true,
+    containers: [],
+    snackbars: []
+};
+
+const store = create(devtools(() => initState));
+
+export const useContainerListStore = store;
+
+export const containerListActions = {
+    reset: () => {
+        store.setState(state => {
+            for (const key of state.snackbars) {
+                closeSnackbar(key);
+            }
+            return initState;
+        });
+    },
+    pushSnackbarKey: key => {
+        store.setState(state => {
+            return {snackbars: [...state.snackbars, key]};
+        });
+    },
+    setContainers: containers => {
+        store.setState(() => ({
+            containers,
+            loading: false
+        }));
+    },
+    setError: () => {
+        store.setState(() => ({
+            containers: null,
+            loading: false
+        }));
+    }
+};

src/routes/Images/List/ImageList.js

@@ -7,17 +7,15 @@ import {getController} from "../../../lib/HostGuestController";
 import ImagesTable from "./ImagesTable";
 import dataModel from "../../../lib/dataModel";
 import ImagePullDialog from "./ImagePullDialog";
-import {aioProvider, isDisconnectError} from "../../../lib/dataProvidor";
+import {aioProvider, isConnectError, isDisconnectError} from "../../../lib/dataProvidor";
 import {showWebsocketDisconnectError} from "../../../components/notifications/WebsocketDisconnectError";
 import ContainerUpLearnMore from "../../../components/ContainerUpLearnMore";
-import {closeSnackbar} from "notistack";
+import {closeSnackbar, enqueueSnackbar} from "notistack";
+import {imageListActions as storeActions} from "./store";
+import showWebsocketConnectError from "../../../components/notifications/WebsocketConnectError";
 
 export default function ImageList() {
-    const [loading, setLoading] = useState(true);
-    const [errMsg, setErrMsg] = useState('');
     const navigate = useNavigate();
-    const [images, setImages] = useState([]);
-
 
     useEffect(() => {
         let count = 0;
@@ -29,8 +27,7 @@ export default function ImageList() {
         let disconnectKey = null;
 
         const onData = data => {
-            setImages(data);
-            setLoading(false);
+            storeActions.setImages(data);
 
             if (disconnectKey) {
                 closeSnackbar(disconnectKey);
@@ -51,9 +48,17 @@ export default function ImageList() {
             if (error.response) {
                 e = error.response.data;
             }
-            if (loading) {
-                setErrMsg(e);
-                setLoading(false);
+            // loading
+            if (count === 0) {
+                if (isConnectError(error)) {
+                    storeActions.pushSnackbarKey(showWebsocketConnectError());
+                } else {
+                    storeActions.pushSnackbarKey(enqueueSnackbar(e, {
+                        variant: "error",
+                        persist: true
+                    }));
+                }
+                storeActions.setError();
             } else {
                 if (isDisconnectError(error) || count) {
                     // if count > 0, it must be a disconnect err
@@ -72,9 +77,10 @@ export default function ImageList() {
                             retryTimeout = null;
                         }, 1000 * tryCount * tryCount);
                     } else {
-                        // show connect error only when connecting
-                        // no retry
-                        setErrMsg(e);
+                        storeActions.pushSnackbarKey(enqueueSnackbar(e, {
+                            variant: "error",
+                            persist: true
+                        }));
                     }
                 }
             }
@@ -89,6 +95,7 @@ export default function ImageList() {
         tryConnect();
         return () => {
             cancel();
+            storeActions.reset();
             if (disconnectKey) {
                 closeSnackbar(disconnectKey);
                 disconnectKey = null;
@@ -97,7 +104,7 @@ export default function ImageList() {
                 clearTimeout(retryTimeout);
             }
         };
-    }, [loading, navigate]);
+    }, [navigate]);
 
     useEffect(() => {
         const ctrl = getController('bar_button');
@@ -117,11 +124,7 @@ export default function ImageList() {
 
     return (
         <>
-            <ImagesTable
-                loading={loading}
-                errMsg={errMsg}
-                imagesData={images}
-            />
+            <ImagesTable />
 
             <ContainerUpLearnMore variant="long" />
         </>

src/routes/Images/List/ImagesTable.js

@@ -1,5 +1,4 @@
 import {
-    Alert,
     Paper,
     Table,
     TableBody,
@@ -11,17 +10,24 @@ import MyTableRowsLoader from "../../../components/MyTableRowsLoader";
 import MyTableRowSingle from "../../../components/MyTableRowSingle";
 import Link from "@mui/material/Link";
 import {Link as RouterLink} from "react-router-dom";
-import {useMemo} from "react";
 import sizeUtil from "../../../lib/sizeUtil";
 import ImageActions from "./ImageActions";
 import CreatedAt from "../../../components/CreatedAt";
 import ImageRepo from "./ImageRepo";
 import {ResponsiveTableCell as TableCell} from "../../../components/ReponsiveTableCell";
+import {useImageListStore} from "./store";
 
-export default function ImagesTable({loading, errMsg, imagesData}) {
-    const imgd = useMemo(() => {
-        const ret = [];
+export default function ImagesTable() {
+    const loading = useImageListStore(state => state.loading);
+    const isErr = useImageListStore(state => !state.images);
+
+    const imgd = useImageListStore(state => {
+        const imagesData = state.images;
+        if (imagesData === null) {
+            return [];
+        }
 
+        const ret = [];
         for (const img of imagesData) {
             img.idShort = img.Id.substring(0, 12);
             img.sizeHuman = sizeUtil.humanReadableSize(img.Size);
@@ -58,7 +64,7 @@ export default function ImagesTable({loading, errMsg, imagesData}) {
         }
 
         return ret;
-    }, [imagesData]);
+    });
 
     return (
         <TableContainer component={Paper} sx={{maxHeight: "calc(100vh - 96px)"}}>
@@ -79,21 +85,19 @@ export default function ImagesTable({loading, errMsg, imagesData}) {
                         <MyTableRowsLoader rows={3} cols={7} sx={{height: '72px'}} />
                     )}
 
-                    {!!errMsg && (
+                    {isErr && (
                         <MyTableRowSingle cols={7}>
-                            <Alert severity="error">
-                                {errMsg}
-                            </Alert>
+                            ❌ Error occurred.
                         </MyTableRowSingle>
                     )}
 
-                    {!errMsg && !loading && !imagesData.length && (
+                    {!isErr && !loading && !imgd.length && (
                         <MyTableRowSingle cols={7}>
                             No image found. Pull one?
                         </MyTableRowSingle>
                     )}
 
-                    {!errMsg && !loading && imgd.map(img => (
+                    {!isErr && !loading && imgd.map(img => (
                         <TableRow key={img.repo + ':' + img.tag + '@' + img.Id}>
                             <TableCell>
                                 <Link component={RouterLink} to={img.idShort}>