adds alertcontext and validationmesage errors to login

Author: Emile Frey

frontend/src/App.tsx

@@ -1,11 +1,13 @@
-import React, { Dispatch } from 'react';
+import React, { Dispatch, useContext } from 'react';
 import Router from './routes/Router';
 import Layout from './components/Layout/Layout';
 import { connect } from 'react-redux';
 import * as actions from './auth/authActions';
 import { PrivateRouteProps } from './routes/PrivateRoute';
-import { ThemeProvider } from '@material-ui/core';
+import { Snackbar, ThemeProvider } from '@material-ui/core';
 import { theme } from './Theme'
+import { AlertContext } from './contexts/AlertContext';
+import Alert from '@material-ui/lab/Alert';
 export interface AuthProps {
   logout: Function
   setAuthenticatedIfRequired: Function
@@ -25,6 +27,8 @@ export interface AppProps extends AuthProps, PrivateRouteProps { }
 
 function App(props: AppProps) {
 
+  const { alertType, openAlert, alertMessage, handleAlertClose } = useContext(AlertContext);
+
   React.useEffect(() => {
     props.setAuthenticatedIfRequired();
   }, [props]);
@@ -35,6 +39,11 @@ function App(props: AppProps) {
         <Layout {...props}>
           <Router {...props} />
         </Layout>
+        <Snackbar id="appAlertSnackbar" open={openAlert} autoHideDuration={6000} onClose={handleAlertClose}>
+          <Alert onClose={handleAlertClose} severity={alertType}>
+            {alertMessage}
+          </Alert>
+        </Snackbar>
       </ThemeProvider>
     </div>
   );

frontend/src/components/Login/Login.tsx

@@ -14,8 +14,7 @@ import * as actions from '../../auth/authActions';
 
 import { useHistory, useLocation } from "react-router-dom";
 import { AppProps } from '../../App';
-import MuiAlert from '@material-ui/lab/Alert';
-
+import validationErrorMessages from '../../helpers/validationErrorMessages'
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -48,7 +47,6 @@ function Login(props: AppProps) {
   const classes = useStyles();
   const [username, setuserName] = useState("");
   const [password, setPassword] = useState("");
-  const [validationErrors, setValidationErrors] = useState<string[]>([])
 
   let history = useHistory();
   let location = useLocation<LocationState>();
@@ -58,32 +56,19 @@ function Login(props: AppProps) {
     if (props.isAuthenticated) { history.replace(from) };
   });
 
-  useEffect(() => {
-    setValidationErrors(props.error.response.data.non_field_errors)
-  }, [props.error])
-
-
   const handleFormFieldChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     switch (event.target.id) {
       case 'username': setuserName(event.target.value); break;
       case 'password': setPassword(event.target.value); break;
       default: return null;
     }
-
   };
 
   const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
     props.onAuth(username, password);
   }
 
-  const validationErrorMessages = (
-		validationErrors.map((value, index) => (
-			<MuiAlert key={index} elevation={6} variant="filled" severity="warning" id="Validation-Message">{value}</MuiAlert>
-		))
-	);
-
-
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
@@ -119,6 +104,7 @@ function Login(props: AppProps) {
             autoComplete="current-password"
             onChange={handleFormFieldChange}
           />
+          {validationErrorMessages(props.error ? props.error.response.data.non_field_errors : [])}
           <Button
             type="submit"
             fullWidth
@@ -134,7 +120,6 @@ function Login(props: AppProps) {
   );
 }
 
-
 const mapDispatchToProps = (dispatch: Dispatch<any>) => {
   return {
     onAuth: (username: string, password: string) => dispatch(actions.authLogin(username, password))

frontend/src/contexts/AlertContext.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, useState } from 'react';
+import { Color } from '@material-ui/lab/Alert';
+
+export type AlertContextProps = {
+  TSAlert: (message: string, severity: Color) => void,
+  openAlert: boolean,
+  alertMessage: string,
+  alertType: Color,
+  handleAlertClose: (event?: React.SyntheticEvent<Element, Event> | undefined, reason?: string | undefined) => void
+};
+
+export const AlertContext = createContext<AlertContextProps>({
+  TSAlert: () => {},
+  openAlert: false,
+  alertMessage: '',
+  alertType: 'info',
+  handleAlertClose: () => {}
+});
+
+const AlertContextProvider = (props: any) => {
+  const [openAlert, setOpenAlert] = useState(false);
+  const [alertMessage, setAlertMessage] = useState('');
+  const [alertType, setAlertType] = useState<Color>('error');
+
+  const TSAlert = (message: string, severity: Color = 'info') => {
+    setAlertMessage(message);
+    setAlertType(severity);
+    setOpenAlert(true);
+  }
+
+  const handleAlertClose = (event?: React.SyntheticEvent, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setOpenAlert(false);
+  };
+
+  return (
+    <AlertContext.Provider value={{
+      TSAlert,
+      openAlert,
+      alertMessage,
+      alertType,
+      handleAlertClose
+    }}>
+      {props.children}
+    </AlertContext.Provider>
+  )
+}
+
+export default AlertContextProvider;

frontend/src/helpers/validationErrorMessages.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import MuiAlert from '@material-ui/lab/Alert';
+
+const validationErrorMessages = (validationErrors: string[]) =>
+  validationErrors.map((value, index) =>
+    <MuiAlert key={index} elevation={6} variant="filled" severity="warning" id="Validation-Message">{value}</MuiAlert>
+  );
+
+export default validationErrorMessages

frontend/src/index.js

@@ -7,6 +7,7 @@ import { combineReducers, createStore, compose, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 import authReducer from './auth/authReducer';
+import AlertContextProvider from './contexts/AlertContext'
 
 const reducer = combineReducers({ auth: authReducer }); // Using Combine Reducers here although only one reducer is present.
 // Official explaination here: https://react-redux.js.org/using-react-redux/connect-mapstate#mapstatetoprops-will-not-run-if-the-store-state-is-the-same
@@ -18,7 +19,9 @@ const store = createStore(reducer, composeEnhanced(applyMiddleware(thunk))); //
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <AlertContextProvider>
+        <App />
+      </AlertContextProvider>
     </Provider>
   </React.StrictMode>,
   document.getElementById('root')