Convert relevant alerts to react notifications

FU.SPA/src/components/pages/AccountSettings.jsx

@@ -32,10 +32,36 @@ export default function AccountSettings() {
 
     // Error checking common cases
     if (newPassword !== confirmPassword) {
-      alert('Passwords do not match');
+      // Passwords not matching notification
+      Store.addNotification({
+        title: 'Password Error',
+        message: 'Passwords must match',
+        type: 'danger',
+        insert: 'bottom',
+        container: 'bottom-right',
+        animationIn: ['animate__animated', 'animate__fadeIn'],
+        animationOut: ['animate__animated', 'animate__fadeOut'],
+        dismiss: {
+          duration: 5000,
+          onScreen: true,
+        },
+      });
       return;
     } else if (newPassword !== '' && oldPassword === '') {
-      alert('Old password must be supplied when updating password');
+      // Old password missing notification
+      Store.addNotification({
+        title: 'Password Error',
+        message: 'Old password must be supplied when updating password',
+        type: 'danger',
+        insert: 'bottom',
+        container: 'bottom-right',
+        animationIn: ['animate__animated', 'animate__fadeIn'],
+        animationOut: ['animate__animated', 'animate__fadeOut'],
+        dismiss: {
+          duration: 5000,
+          onScreen: true,
+        },
+      });
       return;
     }
 
@@ -50,16 +76,43 @@ export default function AccountSettings() {
       await UserService.updateAccountInfo(data);
       let alertMessage = 'Info updated successfully!';
       if (data.newPassword !== null) {
-        alertMessage += '\nYou will be logged out.';
+        alertMessage += '\nYou have been logged out.';
       }
-      alert(alertMessage);
+      // Info update notification
+      Store.addNotification({
+        title: 'Info Updated',
+        message: alertMessage,
+        type: 'success',
+        insert: 'bottom',
+        container: 'bottom-right',
+        animationIn: ['animate__animated', 'animate__fadeIn'],
+        animationOut: ['animate__animated', 'animate__fadeOut'],
+        dismiss: {
+          duration: 8000,
+          onScreen: true,
+        },
+      });
+      // redirect to signin & logout if password was changed
       if (data.newPassword !== null) {
         localStorage.clear();
         logout();
         navigate('/signin');
       }
     } catch (e) {
-      alert(e);
+      // Error notification
+      Store.addNotification({
+        title: 'Error has occured',
+        message: 'An error has occured.\n' + e,
+        type: 'danger',
+        insert: 'bottom',
+        container: 'bottom-right',
+        animationIn: ['animate__animated', 'animate__fadeIn'],
+        animationOut: ['animate__animated', 'animate__fadeOut'],
+        dismiss: {
+          duration: 8000,
+          onScreen: true,
+        },
+      });
       console.error(e);
     }
   };

FU.SPA/src/components/pages/CreatePost.jsx

@@ -1,5 +1,6 @@
 import PostService from '../../services/postService';
 import { useNavigate } from 'react-router-dom';
+import { Store } from 'react-notifications-component';
 import PostForm from '../PostForm';
 
 export default function CreatePost() {
@@ -10,7 +11,20 @@ export default function CreatePost() {
       const newPost = await PostService.createPost(post);
       navigate(`/posts/${newPost.id}`);
     } catch (e) {
-      window.alert(e);
+      // generic error notification
+      Store.addNotification({
+        title: 'Error has occured',
+        message: 'An error has occured.\n' + e,
+        type: 'danger',
+        insert: 'bottom',
+        container: 'bottom-right',
+        animationIn: ['animate__animated', 'animate__fadeIn'],
+        animationOut: ['animate__animated', 'animate__fadeOut'],
+        dismiss: {
+          duration: 8000,
+          onScreen: true,
+        },
+      });
       console.error(e);
     }
   };

FU.SPA/src/components/pages/EditPost.jsx

@@ -3,6 +3,7 @@ import PostService from '../../services/postService';
 import { useParams } from 'react-router';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Store } from 'react-notifications-component';
 
 export default function EditPost() {
   const { postId } = useParams();
@@ -20,10 +21,36 @@ export default function EditPost() {
   const handleSubmit = async (newPost) => {
     try {
       await PostService.updatePost(newPost, postId);
-      alert('Post updated successfully!');
+      // Success notification
+      Store.addNotification({
+        title: 'Post Updated',
+        message: 'Successfully updated post\n',
+        type: 'success',
+        insert: 'bottom',
+        container: 'bottom-right',
+        animationIn: ['animate__animated', 'animate__fadeIn'],
+        animationOut: ['animate__animated', 'animate__fadeOut'],
+        dismiss: {
+          duration: 8000,
+          onScreen: true,
+        },
+      });
       navigate(`/posts/${postId}`);
     } catch (e) {
-      window.alert(e);
+      // Error notification
+      Store.addNotification({
+        title: 'Error has occured',
+        message: 'An error has occured.\n' + e,
+        type: 'danger',
+        insert: 'bottom',
+        container: 'bottom-right',
+        animationIn: ['animate__animated', 'animate__fadeIn'],
+        animationOut: ['animate__animated', 'animate__fadeOut'],
+        dismiss: {
+          duration: 8000,
+          onScreen: true,
+        },
+      });
       console.error(e);
     }
   };