From 45af548bd05dcdd13cb84832b5265eaedbafa0fd Mon Sep 17 00:00:00 2001
From: epadams <epaadams2002@gmail.com>
Date: Sun, 24 Mar 2024 17:56:30 -0400
Subject: [PATCH 1/3] Added notifications and a clear button

---
 .../src/components/pages/ProfileSettings.jsx  | 56 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/FU.SPA/src/components/pages/ProfileSettings.jsx b/FU.SPA/src/components/pages/ProfileSettings.jsx
index 14d42213..c9fbe202 100644
--- a/FU.SPA/src/components/pages/ProfileSettings.jsx
+++ b/FU.SPA/src/components/pages/ProfileSettings.jsx
@@ -8,6 +8,8 @@ import {
   Stack,
   Paper,
   Alert,
+  InputAdornment,
+  IconButton,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { LocalizationProvider } from '@mui/x-date-pickers';
@@ -20,6 +22,7 @@ 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';
 
 export default function ProfileSettings() {
   const [bio, setBio] = useState('');
@@ -62,12 +65,38 @@ export default function ProfileSettings() {
       };
 
       await UserService.updateUserProfile(data);
-      alert('Info updated successfully!');
-
       // Redirect to user profile
       navigate('/profile/' + idJson.userId);
+
+      // 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);
     }
   };
@@ -77,6 +106,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">
@@ -112,6 +149,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>
+              ),
+            }}
           />
           <LocalizationProvider dateAdapter={AdapterDayjs}>
             <DatePicker

From e3df638339c9eef36bf67c40be89c48c6a9258bb Mon Sep 17 00:00:00 2001
From: epadams <epaadams2002@gmail.com>
Date: Wed, 27 Mar 2024 15:50:42 -0400
Subject: [PATCH 2/3] Allow uploading empty bio

---
 FU.SPA/src/components/pages/ProfileSettings.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/FU.SPA/src/components/pages/ProfileSettings.jsx b/FU.SPA/src/components/pages/ProfileSettings.jsx
index c9fbe202..87865502 100644
--- a/FU.SPA/src/components/pages/ProfileSettings.jsx
+++ b/FU.SPA/src/components/pages/ProfileSettings.jsx
@@ -54,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:

From 1b07256a8e444453ee886df6db35efdc1b570728 Mon Sep 17 00:00:00 2001
From: evan-scales <evan.m.scales@gmail.com>
Date: Thu, 28 Mar 2024 14:41:38 -0400
Subject: [PATCH 3/3] small fixes (navigate(0) got rid of success notification)

---
 .../src/components/pages/ProfileSettings.jsx  | 22 +++++++++---
 FU.SPA/src/context/userContext.js             |  1 +
 FU.SPA/src/context/userProvider.jsx           | 34 +++++++++++--------
 3 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/FU.SPA/src/components/pages/ProfileSettings.jsx b/FU.SPA/src/components/pages/ProfileSettings.jsx
index 87b5cfb6..314b2bdb 100644
--- a/FU.SPA/src/components/pages/ProfileSettings.jsx
+++ b/FU.SPA/src/components/pages/ProfileSettings.jsx
@@ -11,24 +11,24 @@ import {
   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() {
@@ -65,8 +65,7 @@ export default function ProfileSettings() {
       };
 
       await UserService.updateUserProfile(data);
-      // Redirect to user profile
-      navigate(0);
+      refreshUser();
 
       // Profile notification success
       Store.addNotification({
@@ -148,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
index 72ee442e..b024b167 100644
--- 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
index 090d3361..77d5aca7 100644
--- 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>
   );