#204 Error management (#237)

* added error snackbar for api fails
* improved error page to be shown only for userdata errors and to allow retrying
* fixed test breaking only in local because of timezone and reduced warnings for easier reading of tests results
* added error management for failure inside calendars imports
* added error snackbar for api fails
* improved error page to be shown only for userdata errors and to allow retrying
* added error management for failure inside calendars imports

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Error/Error.tsx

@@ -1,3 +1,89 @@
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import ReplayIcon from "@mui/icons-material/Replay";
+import { Box, Button, Fade, Paper, Stack, Typography } from "@mui/material";
+import { useEffect } from "react";
+import { push } from "redux-first-history";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+
 export function Error() {
-  return <p>Error</p>;
+  const dispatch = useAppDispatch();
+  const userError = useAppSelector((state) => state.user.error);
+  const calendarError = useAppSelector((state) => state.calendars.error);
+
+  useEffect(() => {
+    if (!userError) {
+      dispatch(push("/"));
+    }
+  }, [calendarError, dispatch]);
+
+  const errorMessage = userError || calendarError || "Unknown error";
+
+  return (
+    <Fade in timeout={500}>
+      <Box
+        sx={{
+          minHeight: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          bgcolor: "background.default",
+          p: 3,
+        }}
+      >
+        <Paper
+          elevation={3}
+          sx={{
+            borderRadius: 4,
+            p: 6,
+            textAlign: "center",
+            maxWidth: 420,
+            width: "100%",
+          }}
+        >
+          <Stack spacing={2} alignItems="center">
+            <Box
+              sx={{
+                color: "error.main",
+                borderRadius: "50%",
+                width: 72,
+                height: 72,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <ErrorOutlineIcon sx={{ fontSize: 40 }} />
+            </Box>
+
+            <Typography variant="h5" fontWeight={600}>
+              Something went wrong
+            </Typography>
+
+            <Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
+              {errorMessage}
+            </Typography>
+
+            <Button
+              variant="contained"
+              color="error"
+              startIcon={<ReplayIcon />}
+              onClick={() => {
+                window.location.reload();
+              }}
+              sx={{
+                textTransform: "none",
+                fontWeight: 600,
+                borderRadius: 2,
+                px: 3,
+                py: 1,
+                boxShadow: "none",
+              }}
+            >
+              Try Again
+            </Button>
+          </Stack>
+        </Paper>
+      </Box>
+    </Fade>
+  );
 }

src/components/Error/ErrorSnackbar.tsx

@@ -1,13 +1,51 @@
 import Snackbar from "@mui/material/Snackbar";
 import Alert from "@mui/material/Alert";
 import Button from "@mui/material/Button";
+import { useAppDispatch } from "../../app/hooks";
+import { clearError as calendarClearError } from "../../features/Calendars/CalendarSlice";
+import { clearError as userClearError } from "../../features/User/userSlice";
 
-interface Props {
-  messages: string[];
-  onClose: () => void;
+export function ErrorSnackbar({
+  error,
+  type,
+}: {
+  error: string | null;
+  type: "user" | "calendar";
+}) {
+  const dispatch = useAppDispatch();
+  const handleCloseSnackbar = () => {
+    dispatch(type === "calendar" ? calendarClearError() : userClearError());
+  };
+
+  return (
+    <Snackbar
+      open={!!error}
+      onClose={handleCloseSnackbar}
+      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+    >
+      <Alert
+        severity="error"
+        onClose={handleCloseSnackbar}
+        sx={{ width: "100%" }}
+        action={
+          <Button color="inherit" size="small" onClick={handleCloseSnackbar}>
+            OK
+          </Button>
+        }
+      >
+        {error}
+      </Alert>
+    </Snackbar>
+  );
 }
 
-export function EventErrorSnackbar({ messages, onClose }: Props) {
+export function EventErrorSnackbar({
+  messages,
+  onClose,
+}: {
+  messages: string[];
+  onClose: () => void;
+}) {
   const open = messages.length > 0;
   const summary =
     messages.length === 1