Added notifications and a clear button (#434)

* Added notifications and a clear button * Allow uploading empty bio * small fixes (navigate(0) got rid of success notification) --------- Co-authored-by: evan-scales <[email protected]>
SCCapstone · Mar 28, 2024 · 4853a39 · 4853a39
1 parent 9eb00cd
commit 4853a39
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 22 deletions.
diff --git a/FU.SPA/src/components/pages/ProfileSettings.jsx b/FU.SPA/src/components/pages/ProfileSettings.jsx
@@ -8,24 +8,27 @@ import {
   Stack,
   Paper,
   Alert,
+  InputAdornment,
+  IconButton,
 } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
 import UserService from '../../services/userService';
 import { DatePicker } from '@mui/x-date-pickers';
-import { useNavigate } from 'react-router';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { styled } from '@mui/material/styles';
 import AvatarService from '../../services/avatarService';
 import ClearIcon from '@mui/icons-material/Clear';
+import { Store } from 'react-notifications-component';
+import UserContext from '../../context/userContext';
 
 export default function ProfileSettings() {
   const [bio, setBio] = useState('');
   const [dateOfBirth, setDateOfBirth] = useState(dayjs());
   const [newPfpUrl, setNewPfpUrl] = useState();
-  const navigate = useNavigate();
+  const { refreshUser } = useContext(UserContext);
 
   useEffect(() => {
     async function fetchUserInfo() {
@@ -51,7 +54,7 @@ export default function ProfileSettings() {
       const data = {
         pfpUrl: newPfpUrl,
         id: idJson.userId,
-        bio: bio !== '' ? bio : null,
+        bio: bio,
         // if the date of birth is the same as today, ignore and set as null
         // if not same day, update
         dob:
@@ -62,11 +65,37 @@ export default function ProfileSettings() {
       };
 
       await UserService.updateUserProfile(data);
+      refreshUser();
 
-      // Redirect to user profile
-      navigate(0);
+      // Profile notification success
+      Store.addNotification({
+        title: 'Profile Settings Updated',
+        message: 'Your profile settings have successfully changed.',
+        type: 'success',
+        insert: 'bottom',
+        container: 'bottom-right',
+        animationIn: ['animate__animated', 'animate__fadeIn'],
+        animationOut: ['animate__animated', 'animate__fadeOut'],
+        dismiss: {
+          duration: 5000,
+          onScreen: true,
+        },
+      });
     } catch (e) {
-      alert(e);
+      // Profile notification error
+      Store.addNotification({
+        title: 'Error has occured',
+        message: 'An error has occured. Please try again.\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);
     }
   };
@@ -76,6 +105,14 @@ export default function ProfileSettings() {
     console.log(imageUrl);
   };
 
+  const clearBio = () => {
+    try {
+      setBio('');
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   // Display component
   return (
     <Container component="main" maxWidth="xs">
@@ -110,6 +147,19 @@ export default function ProfileSettings() {
           value={bio}
           multiline
           onChange={(e) => setBio(e.target.value)}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  edge="end"
+                  color="primary"
+                  onClick={(e) => clearBio(e.target.value)}
+                >
+                  <ClearIcon />
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
         />
         <UploadAvatar onNewPreview={handlePreviewUrl} />
         <Button type="submit" fullWidth variant="contained">

diff --git a/FU.SPA/src/context/userContext.js b/FU.SPA/src/context/userContext.js
@@ -5,6 +5,7 @@ const UserContext = createContext({
   token: null,
   login: () => {},
   logout: () => {},
+  refreshUser: () => {},
 });
 
 export default UserContext;
diff --git a/FU.SPA/src/context/userProvider.jsx b/FU.SPA/src/context/userProvider.jsx
@@ -7,23 +7,23 @@ const UserProvider = ({ children }) => {
   const [user, setUser] = useState(null);
   const [token, setToken] = useState(localStorage.getItem('token') || null);
 
-  useEffect(() => {
-    const fetchCurrentUser = async () => {
-      try {
-        if (token) {
-          const currentUser = await UserService.getUserprofile('current');
-          setUser(currentUser);
-          startConnection();
-        } else {
-          setUser(null);
-        }
-      } catch (error) {
-        console.error('Error fetching current user:', error.message);
+  const fetchCurrentUser = async (token) => {
+    try {
+      if (token) {
+        const currentUser = await UserService.getUserprofile('current');
+        setUser(currentUser);
+        startConnection();
+      } else {
         setUser(null);
       }
-    };
+    } catch (error) {
+      console.error('Error fetching current user:', error.message);
+      setUser(null);
+    }
+  };
 
-    fetchCurrentUser();
+  useEffect(() => {
+    fetchCurrentUser(token);
   }, [token]);
 
   const login = (newToken) => {
@@ -38,8 +38,12 @@ const UserProvider = ({ children }) => {
     stopConnection();
   };
 
+  const refreshUser = async () => {
+    fetchCurrentUser(token);
+  };
+
   return (
-    <UserContext.Provider value={{ user, token, login, logout }}>
+    <UserContext.Provider value={{ user, token, login, logout, refreshUser }}>
       {children}
     </UserContext.Provider>
   );