BugFix/makeEditingReviewSpecific

server/controllers/reviews.js

@@ -143,7 +143,7 @@ const reviewController = {
                         'questions.careerGrowth': newRatings.careerGrowth,
                         'questions.diversityScale': newRatings.diversityScale,
                         'questions.companyCulture': newRatings.companyCulture,
-                        'questions.salary': newRatings.salaries,
+                        'questions.salary': newRatings.salary,
                         comment,
                     },
                 },

src/components/CompanyReviews/CompanyReviews.jsx

@@ -1,10 +1,8 @@
-import { useEffect, useState, useRef } from 'react'
+import { useState, useRef } from 'react'
 import './companyReviews.css'
-// import { Link } from 'react-router'
+import validateRatings from '../../utils/validateRatings'
 
-const CompanyReviews = () => {
-    //do a fetch request and populate the company reviews!
-    const [userReviews, setUserReviews] = useState([])
+const CompanyReviews = ({review, setReviews}) => {
     const [isEditing, setIsEditing] = useState(false)
 
     const positionRef = useRef()
@@ -17,26 +15,8 @@ const CompanyReviews = () => {
     const salaryRef = useRef()
     const commentRef = useRef()
 
-    console.log(userReviews, 'userReviews in Company Reviews')
-
-    useEffect(() => {
-        const getUserReviews = async () => {
-            try {
-                const response = await fetch('/api/review')
-                if (!response.ok) console.log(response.statusText)
-                const reviews = await response.json()
-
-                console.log(reviews, 'userReviews')
-                setUserReviews(reviews.userReviews)
-            } catch (error) {
-                console.error(`Error getting a user's reviews, ${error}`)
-            }
-        }
-        getUserReviews()
-    }, [])
 
     async function handleDeleteReview(reviewId) {
-        console.log({ reviewId })
         const response = await fetch(`/api/review/${reviewId}`, {
             method: 'DELETE',
             headers: {
@@ -45,38 +25,35 @@ const CompanyReviews = () => {
         })
         if (response.ok) {
             // set state to filtered list of reviews without that of deleted ID
-            setUserReviews((currentReviews) =>
+            setReviews((currentReviews) =>
                 currentReviews.filter((review) => review._id !== reviewId),
             )
         } else {
             console.error(`Failed to delete review: ${response.statusText}`)
         }
     }
 
-    async function handleEditReview(reviewId) {
-        console.log({ reviewId })
+    async function handleEditReview() {
         setIsEditing(true)
     }
 
     async function handleSave(reviewId) {
         setIsEditing(false)
-        console.log(positionRef.current.value)
-        console.log(accountabilityRef.current.value)
-        console.log(commentRef.current.value)
+         console.log(validateRatings(salaryRef.current.value))
         const response = await fetch(`/api/review/${reviewId}`, {
             method: 'PUT',
             headers: {
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify({
                 newRatings: {
-                    accountability: accountabilityRef.current.value,
-                    representation: representationRef.current.value,
-                    workLifeBalance: workLifeBalanceRef.current.value,
-                    careerGrowth: careerGrowthRef.current.value,
-                    diversityScale: diversityScaleRef.current.value,
-                    companyCulture: companyCultureRef.current.value,
-                    salary: salaryRef.current.value,
+                    accountability: validateRatings(accountabilityRef.current.value),
+                    representation: validateRatings(representationRef.current.value),
+                    workLifeBalance: validateRatings(workLifeBalanceRef.current.value),
+                    careerGrowth: validateRatings(careerGrowthRef.current.value),
+                    diversityScale: validateRatings(diversityScaleRef.current.value),
+                    companyCulture: validateRatings(companyCultureRef.current.value),
+                    salary: validateRatings(salaryRef.current.value),
                 },
                 comment: commentRef.current.value,
                 position: positionRef.current.value,
@@ -87,7 +64,7 @@ const CompanyReviews = () => {
                 const updatedResponse = await fetch('/api/review')
                 if (updatedResponse.ok) {
                     const updatedReviews = await updatedResponse.json()
-                    setUserReviews(updatedReviews.userReviews)
+                    setReviews(updatedReviews.userReviews)
                 } else {
                     console.error(
                         'Failed to fetch updated reviews:',
@@ -107,11 +84,9 @@ const CompanyReviews = () => {
     }
 
     return (
-        <div className="review">
-            <h3>Reviews You have Left (Only Visible to You)</h3>
+        <div className="review"> 
             <ul className="review-list">
-                {userReviews.map((review, index) => (
-                    <li key={`review${index}`}>
+                    <li>
                         {!isEditing ? (
                             <ul>
                                 <li>{`Company Name: ${review.companyName}`}</li>
@@ -301,7 +276,6 @@ const CompanyReviews = () => {
                             )}
                         </div>
                     </li>
-                ))}
             </ul>
         </div>
     )

src/components/CompanyReviews/companyReviews.css

@@ -26,9 +26,11 @@
     font-size: 1.6rem;
     color: #aaa;
     transition: background-color 0.3s;
+    margin-bottom: 0.5rem;
 }
 .review-list li:hover {
     background-color: #333;
+
 }
 /* Buttons */
 .action-btn {
@@ -54,6 +56,6 @@
 .btn-wrapper {
     display: flex;
     gap: 2rem;
-    margin-top: 20px;
+    margin-top: 1rem;
     justify-content: center;
 }

src/pages/Profile/Profile.jsx

@@ -8,31 +8,52 @@ function Profile() {
     const { isLoaded, user } = useUser()
     const [userName, setUserName] = useState()
     const [userImage, setUserImage] = useState()
-    console.log(userName, userImage); 
+    const [userReviews, setUserReviews] = useState([])
 
     useEffect(() => {
         if (!isLoaded || !user) {
-            return 
+            return
         } else {
             setUserImage(user.imageUrl)
             setUserName(user.username)
         }
     }, [isLoaded, user])
 
+    //do a fetch request and populate the company reviews!
+    useEffect(() => {
+        const getUserReviews = async () => {
+            try {
+                const response = await fetch('/api/review')
+                if (!response.ok) console.log(response.statusText)
+                const reviews = await response.json()
+
+                setUserReviews(reviews.userReviews)
+            } catch (error) {
+                console.error(`Error getting a user's reviews, ${error}`)
+            }
+        }
+        getUserReviews()
+    }, [])
+
     if (!isLoaded || !user) {
-        return <div>....Loading</div> //make this look pretty like a loading bar or something 
+        return <div>....Loading</div> //make this look pretty like a loading bar or something
     }
-    //load a user's reviews (done)
-    //delete button for a review (done)
-    //load the profile pic (done)
-    //load the userName (done)
-    //add an edit button for a review (TO DO!)
-    //add a list of favorite companies
+
     return (
         <main className="profile-container">
             <ProfileInfo userImage={userImage} userName={userName} />
+
+            <h3 className="profile_center">
+                Reviews You have Left (Only Visible to You)
+            </h3>
             <section className="reviews">
-                <CompanyReviews />
+                {userReviews.map((review, index) => (
+                    <CompanyReviews
+                        key={`userCompanyReview${index}`}
+                        review={review}
+                        setReviews={setUserReviews}
+                    />
+                ))}
             </section>
         </main>
     )

src/pages/Profile/profile.css

@@ -14,3 +14,7 @@
     border-radius: 4px;
     border: 1px solid #444;
 }
+
+.profile_center{
+    text-align: center;
+}

src/utils/validateRatings.js

@@ -0,0 +1,6 @@
+//a function to bound the rating between 1 and 5
+const validateRatings = (rating) => {
+    return Math.max(1, Math.min(rating, 5))
+}
+
+export default validateRatings