finished survey answers

back-end/App.js

@@ -266,20 +266,13 @@ app.post('/matches', authenticateToken, async (req, res) => {
 });
 
 app.get('/otheruser', authenticateToken, (req, res) => {
-  // Add 'year' to the list of fields to return
-  console.log('in other user rn:', req.session.otheruser);
-
   try {
     User.find()
       .then(foundUser => {
         if (!foundUser) return res.status(404).json({ message: "User not found" });
 
-        //res.json(foundUser)
-
         for (const user of foundUser) {
-          console.log(user.username, req.session.otheruser)
           if(user.username === req.session.otheruser) {
-            console.log("found it")
             res.json(user);
           }
         }
@@ -291,7 +284,27 @@ app.get('/otheruser', authenticateToken, (req, res) => {
   } catch (err) {
     console.log(err);
   }
+});
 
+app.get('/useranswers', authenticateToken, (req, res) => {
+  console.log('in user answers', req.session.otheruser)
+  try {
+    User.find()
+      .then(foundUser => {
+        if (!foundUser) return res.status(404).json({ message: "User not found" });
+        for (const user of foundUser) {
+          if(user.username === req.session.otheruser) {
+            res.json(user);
+          }
+        }
+      })
+      .catch(err => {
+        console.log(err);
+        res.status(500).send('server error');
+      });
+  } catch (err) {
+    console.log(err);
+  }
 });
 
 
@@ -460,9 +473,6 @@ app.get('/profile', authenticateToken, (req, res) => {
     });
 });
 
-
-
-
 app.get('/retake', authenticateToken, async(req, res) => {
   User.findById(req.user.id, 'profile.name answers.gender answers.year answers.pets ' + 
   'answers.guests answers.smoke answers.drink ' +

front-end/src/App.js

@@ -9,8 +9,8 @@ import Survey from './Survey';
 import Profile from './Profile'
 import EditProfile from './EditProfile';
 import Retake from './Retake'
-import MyPreferences from './MyPreferences'
 import OtherProfile from './OtherProfile';
+import UserAnswers from './UserAnswers';
 import ProtectedRoute from './ProtectedRoute';
 import axios from 'axios'
 
@@ -29,8 +29,8 @@ function App() {
         <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
         <Route path="/editprofile" element={<ProtectedRoute><EditProfile /></ProtectedRoute>} />
         <Route path="/retake" element={<ProtectedRoute><Retake /></ProtectedRoute>} />
-        <Route path="/mypreferences" element={<ProtectedRoute><MyPreferences /></ProtectedRoute>} />
         <Route path="/otheruser" element={<ProtectedRoute><OtherProfile /></ProtectedRoute>} />
+        <Route path="/useranswers" element={<ProtectedRoute><UserAnswers /></ProtectedRoute>} />
         {/* Redirect all other paths to "/login" */}
         <Route path="*" element={<Navigate replace to="/login" />} />
       </Routes>

front-end/src/OtherProfile.js

@@ -63,7 +63,7 @@ function OtherProfile() {
                 <p className="AboutText">{profileData.bio || 'No bio available.'}</p>
             </div>
             <div className="Footer">
-                <Button text="Survey Answers" location="/" />
+                <Button text="Survey Answers" location="/useranswers" />
                 <Button text="Message" location="/chatpage" />
             </div>
         </>

front-end/src/Retake.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import "./Survey.css";
+import "./Retake.css";
 import Header from "./Header";
 import axios from 'axios';
 import { set } from 'mongoose';

front-end/src/UserAnswers.css

@@ -0,0 +1,45 @@
+
+.Survey {
+    display: flex;
+    flex-direction: column;
+    background-color: #e8e8e8;
+    height: 150vh;
+  }
+
+  .survey-question {
+    background-color: white;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+  }
+
+  .section {
+    padding: 0rem 0rem 0rem 1rem;
+    background-color: #BEBEBE;
+    margin-bottom: 1rem;
+  }
+
+  label {
+    display: block;
+  }
+
+  select,
+  input[type="number"] {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #D1D1D1;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+  }
+
+  button {
+    background-color: #57068C;
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #6D28D9;
+  }

front-end/src/UserAnswers.js

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import "./UserAnswers.css";
+import Header from "./Header";
+import Button from './Button';
+import axios from 'axios';
+import { set } from 'mongoose';
+
+function UserAnswers() {
+    const navigate = useNavigate();
+    const [error, setError] = useState('');
+    const [errorMessage, setErrorMessage] = useState("");
+
+    const[name, setName] = useState(null);
+    const [year, setYear] = useState(null);
+    const [genderAns, setGenderAns] = useState(null);
+    const [petsAns, setPetsAns] = useState(null);
+    const [guestsAns, setGuestsAns] = useState(null);
+    const [smokeAns, setSmokeAns] = useState(null);
+    const [drinkAns, setDrinkAns] = useState(null);
+    const [maxRent, setMaxRent] = useState(null);
+    const [minRent, setMinRent] = useState(null);
+    const [bedAns, setBedAns] = useState(null);
+    const [quietAns, setQuietAns] = useState(null);
+    const [cleanAns, setCleanAns] = useState(null);
+
+    const fetchSurveyData = async () => {
+        try {
+            const response = await axios.get('http://localhost:3001/useranswers', {
+                headers: {
+                    Authorization: `Bearer ${localStorage.getItem('token')}`
+                }
+            });
+            console.log('Fetching profile data', response.data);
+            if (response.data) {
+                setName(response.data.profile.name)
+                setYear(response.data.answers.year)
+                setGenderAns(response.data.answers.gender)
+                setPetsAns(response.data.answers.pets)
+                setGuestsAns(response.data.answers.guests)
+                setSmokeAns(response.data.answers.smoke)
+                setDrinkAns(response.data.answers.drink)
+                setMaxRent(response.data.answers.rent_max)
+                setMinRent(response.data.answers.rent_min)
+                setBedAns(response.data.answers.bedtime)
+                setQuietAns(response.data.answers.quietness)
+                setCleanAns(response.data.answers.cleanliness)
+            } else {
+                throw new Error('Profile data is missing');
+            }
+        } catch (error) {
+            console.error('Error fetching profile data:', error);
+            setError('Error fetching profile data: ' + error.message);
+        }
+    };
+
+    useEffect(() => {
+        fetchSurveyData();
+    }, []);
+
+
+    return (
+        <div className="Survey">
+            <Header />
+            <div className='section'>
+                <h3>Status</h3>
+            </div>
+            <div className="survey-question">
+                <p>Name: {name} </p>
+                <p>Year: {year}</p>
+                <p>Gender: {genderAns} </p>
+                <p>Do you have pets? {petsAns} </p>
+            </div>
+            <br></br>
+            <div className='section'>
+                <h3>Rent Range</h3>
+            </div>
+            <div className="survey-question">
+                <p>Max Rent: {maxRent} </p>
+                <p>Min Rent: {minRent} </p>
+            </div>
+            <br></br>
+            <div className='section'>
+                <h3>Living Habits</h3>
+            </div>
+            <div className="survey-question">
+                <p>How often do you bring over guests? {guestsAns} </p>
+                <p>How often do you smoke? {smokeAns} </p>
+                <p>How often do you drink? {drinkAns} </p>
+                <p>When is your usual bedtime(1: Before 10, 2: Between 10 pm and 12 am, 3: Between 12 am and 2 am, 
+                    4: Between 2 am and 4 am, 5:After 4 am, 6: Irregular)?  {bedAns} </p>
+                <p>How would you rate your loudness from 1 to 5(1 being quiet and 5 being loud)?  {quietAns} </p>
+                <p>How would you rate your cleanliness from 1 to 5(1 being messy and 5 being clean)?  {cleanAns} </p>
+            </div>
+            <Button text="Back" location="/otheruser" />
+        </div>
+    );
+}
+
+export default UserAnswers;