Simple error handling in ImageGalleryLayout

Cannot use react-query at the moment as react 18 is not supported yet.

picture-gallery-client/src/ImageGalleryLayout.tsx

@@ -2,25 +2,32 @@ import React, { useEffect, useState } from "react";
 import { Photo } from "react-photo-album";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import { CircularProgress } from "@mui/material";
 import { Folders } from "./ImageGallery/models";
 import ImageGalleryAppBar from "./ImageGallery/ImageGalleryAppBar";
 import DrawerHeader from "./MuiLayout/DrawerHeader";
 import ImageGalleryDrawer from "./ImageGallery/ImageGalleryDrawer";
 import ImageGallery from "./ImageGallery/ImageGallery";
 import Main from "./MuiLayout/Main";
+import env from "./env";
 
 const drawerWidth = 240;
 
 function ImageGalleryLayout() {
   const [open, setOpen] = useState(true);
+  const [error, setError] = useState(false);
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+  const [images, setImages] = useState<Photo[]>([]);
   const [folders, setFolders] = useState<Folders>({
     name: "Home",
     fullPath: "/",
     numberOfFiles: 0,
     children: [],
   });
+
   const location = useLocation();
+  const navigate = useNavigate();
 
   const handleDrawerOpen = () => {
     setOpen(true);
@@ -29,12 +36,25 @@ function ImageGalleryLayout() {
   const handleDrawerClose = () => {
     setOpen(false);
   };
-  const [images, setImages] = useState<Photo[]>([]);
 
   useEffect(() => {
+    setImages([]);
+    setError(false);
+    setImagesLoaded(false);
     fetch(`/images${location.pathname}`)
       .then((res) => res.json())
-      .then((data) => setImages(data.images));
+      .then((data) => {
+        if (data.images === undefined) {
+          if (location.pathname !== "/") {
+            navigate("/");
+          } else {
+            setError(true);
+          }
+        } else {
+          setImages(data.images);
+          setImagesLoaded(true);
+        }
+      });
   }, [location.pathname]);
 
   useEffect(() => {
@@ -43,6 +63,15 @@ function ImageGalleryLayout() {
       .then((data) => setFolders(data));
   }, []);
 
+  if (error) {
+    return (
+      <p>
+        Unrecoverable error: Request for pictures failed. Please contact the
+        administrator.
+      </p>
+    );
+  }
+
   return (
     <Box sx={{ display: "flex" }}>
       <CssBaseline />
@@ -59,7 +88,13 @@ function ImageGalleryLayout() {
       />
       <Main open={open} drawerwidth={drawerWidth}>
         <DrawerHeader />
-        <ImageGallery images={images} />
+        {imagesLoaded ? (
+          <ImageGallery images={images} />
+        ) : (
+          <CircularProgress
+            style={{ color: env.REACT_APP_APPBAR_COLOR ?? "#1976D2" }}
+          />
+        )}
       </Main>
     </Box>
   );

picture-gallery-server/src/controller/images.ts

@@ -38,6 +38,6 @@ export const getImages =
       res.json(a<Folder>({ images }));
     } catch (e) {
       consoleLogger.warn(`Error when trying to access ${req.path}: ${e}`);
-      res.status(400).json(`Path ${req.path} not accessible.`);
+      res.status(400).json({ message: `Path ${req.path} not accessible.` });
     }
   };