fixed profile css, edit profile questions

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);

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)} />

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;
 }

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">

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';

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>
         </>