From 460ea7f65cacd11b82317e5f8edda4180878bb1d Mon Sep 17 00:00:00 2001
From: Yujin Hong <eh2843@nyu.edu>
Date: Sun, 28 Apr 2024 18:01:06 -0400
Subject: [PATCH] fixed profile css, edit profile questions

---
 back-end/App.js                |  2 +-
 front-end/src/EditProfile.js   |  6 ------
 front-end/src/OtherProfile.css | 15 +++++++++++++++
 front-end/src/OtherProfile.js  | 13 ++++---------
 front-end/src/Profile.css      |  8 ++++++++
 front-end/src/Profile.js       |  7 ++++++-
 6 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/back-end/App.js b/back-end/App.js
index 49c04a0..ae405fd 100644
--- a/back-end/App.js
+++ b/back-end/App.js
@@ -462,7 +462,7 @@ app.get('/chatUser', authenticateToken, (req, res) => {
 
 app.get('/profile', authenticateToken, (req, res) => {
   // Add 'year' to the list of fields to return
-  User.findById(req.user.id, 'username profile.year profile.bio imagePath')
+  User.findById(req.user.id, 'username answers.year profile.bio imagePath')
     .then(user => {
       if (!user) return res.status(404).json({ message: "User not found" });
       res.json(user);
diff --git a/front-end/src/EditProfile.js b/front-end/src/EditProfile.js
index 395b945..fa7120f 100644
--- a/front-end/src/EditProfile.js
+++ b/front-end/src/EditProfile.js
@@ -8,7 +8,6 @@ function EditProfile() {
     const navigate = useNavigate();
     const [userName, setUserName] = useState("");
     const [bio, setBio] = useState("");
-    const [year, setYear] = useState(""); // Added year state
     const [oldPassword, setOldPassword] = useState("");
     const [newPassword, setNewPassword] = useState("");
     const [errorMessage, setErrorMessage] = useState("");
@@ -18,7 +17,6 @@ function EditProfile() {
             new_password: newPassword,
             old_password: oldPassword,
             bio: bio,
-            year: year, 
             username: userName,
         };
 
@@ -62,10 +60,6 @@ function EditProfile() {
                 <label>
                     <textarea rows={7} cols={45} value={bio} onChange={e => setBio(e.target.value)} />
                 </label>
-                <h3 className="UpdateHeader">Update Year</h3>
-                <label>
-                    <input type="text" value={year} onChange={e => setYear(e.target.value)} />
-                </label>
                 <h3 className="UpdateHeader">Old Password (if changing password)</h3>
                 <label>
                     <input type="password" value={oldPassword} onChange={e => setOldPassword(e.target.value)} />
diff --git a/front-end/src/OtherProfile.css b/front-end/src/OtherProfile.css
index f14e491..2d05544 100644
--- a/front-end/src/OtherProfile.css
+++ b/front-end/src/OtherProfile.css
@@ -10,6 +10,8 @@
     align-items: center;
     margin: 20px;
     font-family: 'Montserrat';
+    padding-top: 70px;
+    padding-bottom: 30px;
 }
 
 .AboutText{
@@ -21,4 +23,17 @@
 .Footer{
     display: flex;
     justify-content: space-evenly;
+}
+
+.BottomFooter{
+    display: flex;
+    justify-content: space-evenly;
+    padding-top: 60px;
+}
+
+.logout-button {
+    text-align: center;
+    font-family: 'Montserrat';
+    font-weight: bold;
+    font-size: medium;
 }
\ No newline at end of file
diff --git a/front-end/src/OtherProfile.js b/front-end/src/OtherProfile.js
index e133800..6628253 100644
--- a/front-end/src/OtherProfile.js
+++ b/front-end/src/OtherProfile.js
@@ -4,12 +4,13 @@ import { useNavigate } from 'react-router-dom';
 import Header from './Header';
 import Button from './Button';
 import profilePicture from './ProfilePic.png';
-import "./Profile.css";
+import "./OtherProfile.css";
 import { socket } from './sockets/ReactSocket';
 
 function OtherProfile() {
     const [profileData, setProfileData] = useState({});
     const [username, setUsername] = useState(''); // Separate state for username
+    const [year, setYear] = useState('');
     const [error, setError] = useState('');
     const navigate = useNavigate();
 
@@ -24,6 +25,7 @@ function OtherProfile() {
             if (response.data && response.data.profile) {
                 setProfileData(response.data.profile); // Set the profile-specific data
                 setUsername(response.data.username); // Set username separately
+                setYear(response.data.answers.year);
             } else {
                 throw new Error('Profile data is missing');
             }
@@ -37,13 +39,6 @@ function OtherProfile() {
         fetchProfileData();
     }, []);
 
-    const handleLogout = () => {
-        console.log("Logging out...");
-        localStorage.removeItem('token');
-        socket.disconnect(); //disconnect the socket that was in use
-        navigate('/login', { replace: true });
-    };
-
     if (!profileData || Object.keys(profileData).length === 0) {
         return <p>Loading...</p>;
     }
@@ -59,7 +54,7 @@ function OtherProfile() {
             <div className="Profile">
                 <img src={profileData.imagePath || profilePicture} alt="Profile" />
                 <h2>{username || 'Username not set'}</h2>
-                <h4>{profileData.year || 'Year not set'}</h4>
+                <h4>{year || 'Year not set'}</h4>
                 <p className="AboutText">{profileData.bio || 'No bio available.'}</p>
             </div>
             <div className="Footer">
diff --git a/front-end/src/Profile.css b/front-end/src/Profile.css
index 88b5e67..2d05544 100644
--- a/front-end/src/Profile.css
+++ b/front-end/src/Profile.css
@@ -10,6 +10,8 @@
     align-items: center;
     margin: 20px;
     font-family: 'Montserrat';
+    padding-top: 70px;
+    padding-bottom: 30px;
 }
 
 .AboutText{
@@ -23,6 +25,12 @@
     justify-content: space-evenly;
 }
 
+.BottomFooter{
+    display: flex;
+    justify-content: space-evenly;
+    padding-top: 60px;
+}
+
 .logout-button {
     text-align: center;
     font-family: 'Montserrat';
diff --git a/front-end/src/Profile.js b/front-end/src/Profile.js
index 8369d47..7019964 100644
--- a/front-end/src/Profile.js
+++ b/front-end/src/Profile.js
@@ -9,6 +9,7 @@ import { socket } from './sockets/ReactSocket';
 
 function Profile() {
     const [profileData, setProfileData] = useState({});
+    const [year, setYear] = useState('');
     const [username, setUsername] = useState(''); // Separate state for username
     const [error, setError] = useState('');
     const navigate = useNavigate();
@@ -24,6 +25,7 @@ function Profile() {
             if (response.data && response.data.profile) {
                 setProfileData(response.data.profile); // Set the profile-specific data
                 setUsername(response.data.username); // Set username separately
+                setYear(response.data.answers.year)
             } else {
                 throw new Error('Profile data is missing');
             }
@@ -59,12 +61,15 @@ function Profile() {
             <div className="Profile">
                 <img src={profileData.imagePath || profilePicture} alt="Profile" />
                 <h2>{username || 'Username not set'}</h2>
-                <h4>{profileData.year || 'Year not set'}</h4>
+                <h4>{year || 'Year not set'}</h4>
                 <p className="AboutText">{profileData.bio || 'No bio available.'}</p>
             </div>
             <div className="Footer">
                 <Button text="Edit Profile" location="/editprofile" />
                 <Button text="Retake Survey" location="/retake" />
+            </div>
+            <br></br>
+            <div className='BottomFooter'>
                 <button onClick={handleLogout} className="logout-button">Logout</button>
             </div>
         </>