492: Convert app to use useAlert

Author: carrollsa

src/client/src/pages/UserManagement/Components/Dialog/ChangePasswordDialog.jsx

@@ -13,16 +13,17 @@ import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 import { updateUser } from "../../../../utils/api";
 import { buildPasswordValidation } from '../../Validations';
+import useAlert from "../../../../hooks/useAlert";
 
 
 export default function ChangePasswordDialog(props) {
     const {
         onClose,
-        notifyResult,
         token,
         user
     } = props;
     const { username } = user;
+    const { setAlert } = useAlert();
 
     const validationSchema = Yup.object().shape({
         password: buildPasswordValidation(username),
@@ -39,14 +40,14 @@ export default function ChangePasswordDialog(props) {
         updateUser({ username, password }, token)
             .then((res) => {
                 if (res === "Updated") {
-                    notifyResult({ success: true, message: `Password for user ${username} successfully changed!` });
+                    setAlert({ type: "success", text: `Password for user ${username} successfully changed!` });
                 } else {
-                    notifyResult({ success: false, message: res });
+                    setAlert({ type: "error", text: res });
                 }
             })
             .catch(e => {
                 console.warn(e)
-                notifyResult({ success: false, message: e })
+                setAlert({ type: "error", text: e })
             });
         onClose();
     }

src/client/src/pages/UserManagement/Components/Dialog/NewUserDialog.jsx

@@ -18,13 +18,14 @@ import {
     buildRoleValidation,
     buildUsernameValidation
 } from '../../Validations';
+import useAlert from "../../../../hooks/useAlert";
 
 
 export default function NewUserDialog(props) {
     const [responseError, setResponseError] = React.useState(undefined);
+    const { setAlert } = useAlert();
     const {
         onClose,
-        notifyResult,
         token,
         updateUsers
     } = props;
@@ -56,7 +57,7 @@ export default function NewUserDialog(props) {
                 if (res.indexOf("duplicate key") > -1) {
                     setResponseError(`User with username ${data.username} already exists`)
                 } else {
-                    notifyResult({ success: true, message: `New user ${res} created successfully` });
+                    setAlert({ type: "success", text: `New user ${res} created successfully` });
                     updateUsers(newUser);
                     onClose();
                 }

src/client/src/pages/UserManagement/Components/Dialog/UpdateUserDialog.jsx

@@ -15,12 +15,12 @@ import { useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 import { updateUser } from "../../../../utils/api";
 import { buildNameValidation, buildRoleValidation } from '../../Validations';
+import useAlert from "../../../../hooks/useAlert";
 
 
 export default function UpdateUserDialog(props) {
     const {
         onClose,
-        notifyResult,
         token,
         updateUsers,
         user
@@ -32,6 +32,8 @@ export default function UpdateUserDialog(props) {
         active
     } = user;
 
+    const { setAlert } = useAlert();
+
     const validationSchema = Yup.object().shape({
         name: buildNameValidation(),
         role: buildRoleValidation(),
@@ -53,16 +55,16 @@ export default function UpdateUserDialog(props) {
         updateUser(newUser, token)
             .then((res) => {
                 if (res === "Updated") {
-                    notifyResult({ success: true, message: `User ${username} updated successfully` });
+                    setAlert({ type: "success", text: `User ${username} updated successfully` });
                     updateUsers(newUser);
                     onClose();
                 } else {
-                    notifyResult({ success: false, message: res })
+                    setAlert({ type: "error", text: res })
                 }
             })
             .catch(e => {
                 console.warn(e)
-                notifyResult({ success: false, message: e })
+                setAlert({ type: "error", text: e })
             })
     }
 

src/client/src/pages/UserManagement/Components/Dialog/UserDialog.jsx

@@ -11,7 +11,6 @@ export const DialogTypes = {
 
 export default function UserDialog(props) {
     const {
-        notifyResult,
         onClose,
         selectedUser,
         type,
@@ -23,7 +22,6 @@ export default function UserDialog(props) {
         case DialogTypes.NewUser:
             return (
                 <NewUserDialog
-                    notifyResult={notifyResult}
                     onClose={onClose}
                     token={token}
                     updateUsers={updateUsers}
@@ -32,7 +30,6 @@ export default function UserDialog(props) {
         case DialogTypes.UpdateUser:
             return (
                 <UpdateUserDialog
-                    notifyResult={notifyResult}
                     onClose={onClose}
                     token={token}
                     updateUsers={updateUsers}
@@ -42,7 +39,6 @@ export default function UserDialog(props) {
         case DialogTypes.ChangePassword:
             return (
                 <ChangePasswordDialog
-                    notifyResult={notifyResult}
                     onClose={onClose}
                     token={token}
                     user={selectedUser}

src/client/src/pages/UserManagement/UserManagement.jsx

@@ -12,7 +12,6 @@ import {
     TableRow,
     Typography
 } from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
 import _ from 'lodash';
 import React from 'react';
 import { fetchUsers } from '../../utils/api';
@@ -22,7 +21,6 @@ import UserRow from './Components/UserRow';
 export default function UserManagement(props) {
     const [users, setUsers] = React.useState(undefined);
     const [isLoading, setIsLoading] = React.useState(undefined);
-    const [resultBanner, setResultBanner] = React.useState(undefined);
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [dialogType, setDialogType] = React.useState(undefined)
     const [selectedUser, setSelectedUser] = React.useState(undefined);
@@ -36,17 +34,6 @@ export default function UserManagement(props) {
             })
         setIsLoading(false);
     }, [token]);
-
-    const notifyResult = ({ success, message }) => {
-        setResultBanner({ success, message });
-
-        if (success) {
-            setTimeout(() => {
-                setResultBanner(null);
-            }, 5000)
-        }
-    }
-
     const updateUsers = (newOrUpdatedUser) => {
         setUsers(prevUsers => {
             const existingUserIndex = _.findIndex(users, existingUser => {
@@ -108,12 +95,6 @@ export default function UserManagement(props) {
                     </Button>
                 </Grid>
             </Grid >
-            {resultBanner &&
-                <Alert onClose={() => setResultBanner(null)} severity={resultBanner.success ? "success" : "error"} spacing={2}>
-                    <AlertTitle><Typography variant='h6'>{resultBanner.success ? "Success" : "Error"}</Typography></AlertTitle>
-                    <Typography>{resultBanner.message}</Typography>
-                </Alert>
-            }
             {isLoading &&
                 <Backdrop open={true}>
                     <CircularProgress size={60} />
@@ -142,7 +123,6 @@ export default function UserManagement(props) {
             }
             {dialogOpen &&
                 <UserDialog
-                    notifyResult={notifyResult}
                     onClose={closeDialog}
                     selectedUser={selectedUser}
                     token={token}