feat: Flashing error message on server error

client/src/components/auth/Auth.js

@@ -6,7 +6,6 @@ import { authLevelRedirect } from '../../utils/authUtils';
 
 import useAuth from '../../hooks/useAuth';
 import '../../sass/AdminLogin.scss';
-import { useSnackbar } from '../../context/snackbarContext';
 
 /** At the moment only users with the 'admin' accessLevel can login
  * and see the dashboard
@@ -19,7 +18,6 @@ const Auth = () => {
 
   const history = useHistory();
   const { auth } = useAuth();
-  const { showSnackbar } = useSnackbar();
 
   const [email, setEmail] = useState('');
   const [isDisabled, setIsDisabled] = useState(true);
@@ -64,7 +62,6 @@ const Auth = () => {
         const isAuth = await checkAuth(email, LOG_IN);
         if (isAuth) {
           history.push('/emailsent');
-          showSnackbar('Email Sent!!');
         } else {
           showError(
             'We don’t recognize your email address. Please, create an account.'

client/src/components/manageProjects/createNewEvent.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useSnackbar } from '../../context/snackbarContext';
 import '../../sass/ManageProjects.scss';
 import { findNextOccuranceOfDay } from './utilities/findNextDayOccuranceOfDay';
 import { addDurationToTime } from './utilities/addDurationToTime';
@@ -10,7 +11,6 @@ const CreateNewEvent = ({
   projectToEdit,
   projectID,
   createNewRecurringEvent,
-  setEventAlert,
   setIsCreateNew,
 }) => {
   // These are the initial form values
@@ -25,6 +25,7 @@ const CreateNewEvent = ({
   };
   const [formValues, setFormValues] = useState(initialFormValues);
   const [formErrors, setFormErrors] = useState({});
+  const { showSnackbar, hideSnackbar } = useSnackbar();
 
   // Handle form input changes
   const handleInputChange = (event) => {
@@ -77,9 +78,9 @@ const CreateNewEvent = ({
       handleEventCreate();
       setFormValues(initialFormValues);
       setIsCreateNew(false);
-      setEventAlert('Event created!');
+      showSnackbar('Event created!', 'success');
       await setTimeout(() => {
-        setEventAlert(null);
+        hideSnackbar();
       }, 5000);
     }
     setFormErrors(errors);

client/src/context/snackbarContext.js

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useState } from 'react';
 import Snackbar from '@mui/material/Snackbar';
 import Alert from '@mui/material/Alert';
+import Slide from '@mui/material/Slide';
 
 const SnackbarContext = createContext();
 
@@ -13,7 +14,7 @@ export const SnackbarProvider = ({ children }) => {
     severity: '',
   });
 
-  const showSnackbar = (message, severity = 'success') => {
+  const showSnackbar = (message, severity) => {
     setSnackbarState({ open: true, message, severity });
   };
 
@@ -28,11 +29,16 @@ export const SnackbarProvider = ({ children }) => {
         open={snackbarState.open}
         autoHideDuration={6000}
         onClose={hideSnackbar}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        TransitionComponent={Slide}
       >
         <Alert
-          icon={false}
           onClose={hideSnackbar}
-          severity={snackbarState.severity || 'info'}
+          severity={snackbarState.severity}
+          sx={{width: '100%'}}
         >
           {snackbarState.message}
         </Alert>