DynamicProfilePage

server/controllers/reviews.js

@@ -2,17 +2,40 @@ import Reviews from '../models/Reviews.js'
 import Company from '../models/Company.js'
 import User from '../models/User.js'
 const reviewController = {
+    // getUserReviews: async (req, res, next) => {
+    //     try {
+    //         const clerkId = req.auth.userId
+    //         const user = await User.find({ clerkId });
+    //         const userId = user[0]._id;
+    //         console.log({userId})
+    //         const userReviews = await Review.find({ userId })
+    //         res.json({ userReviews })
+    //     } catch (error) {
+    //         console.log('Error getting user reviews')
+    //         next(error)
+    //     }
+    // },
     getUserReviews: async (req, res, next) => {
         try {
             const clerkId = req.auth.userId
             const user = await User.find({ clerkId })
             const userId = user[0]._id
-            console.log({ userId })
 
-            const userReviews = await Reviews.find({ userId })
-            res.json({ userReviews })
+            // Fetch user reviews and populate companyId to get companyName
+            const userReviews = await Reviews.find({ userId }).populate({
+                path: 'companyId',
+                select: 'name',
+            })
+            // Transform the response to include companyName directly
+            const formattedReviews = userReviews.map((review) => ({
+                ...review.toObject(),
+                companyName: review.companyId?.name || null, 
+                companyId: review.companyId?._id, 
+            }))
+            console.log('I am formatted data', JSON.stringify(formattedReviews, null, 2))
+            res.json({ userReviews: formattedReviews })
         } catch (error) {
-            console.log('Error getting user reviews')
+            console.error('Error getting user reviews:', error)
             next(error)
         }
     },
@@ -21,7 +44,7 @@ const reviewController = {
             //maybe need the company id and review id
             //const { companyId } = req.params;
             //get all reviews
-            const reviews = await Reviews.find({})  //MAKE THIS POPULATE COMPANY DATA SO WE CAN GET THE NAME!
+            const reviews = await Reviews.find({})
             console.log(reviews)
             //display it in the feed component for the reviews
             res.json(reviews) // Send reviews as JSON response
@@ -33,11 +56,14 @@ const reviewController = {
         try {
             // extract reviewId
             const { reviewId } = req.params
+
             // find & delete review in db
             const deletedReview = await Reviews.findByIdAndDelete(reviewId)
+
             if (!deletedReview) {
                 return res.status(404).json({ message: 'Review not found' })
             }
+
             console.log(`Review ${reviewId} has been deleted`)
             res.status(200).json({ message: 'Review deleted successfully' })
         } catch (err) {

src/components/CompanyReviews/CompanyReviews.jsx

@@ -1,13 +1,66 @@
+import { useEffect, useState } from 'react'
 import './companyReviews.css'
+// import { Link } from 'react-router'
 
 const CompanyReviews = () => {
+    //do a fetch request and populate the company reviews!
+    const [userReviews, setUserReviews] = useState([])
+    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: {
+                'Content-Type': 'application/json',
+            },
+        })
+        if (response.ok) {
+            // set state to filtered list of reviews without that of deleted ID
+            setUserReviews((currentReviews) =>
+                currentReviews.filter((review) => review._id !== reviewId),
+            )
+        } else {
+            console.error(`Failed to delete review: ${response.statusText}`)
+        }
+    }
+
     return (
         <div className="review">
             <h3>Reviews You have Left (Only Visible to You)</h3>
             <ul className="review-list">
-                <li>Review 1</li>
-                <li>Review 2</li>
-                <li>Review 3</li>
+                {userReviews.map((review, index) => (
+                    <li key={`review${index}`}>
+                        <ul>
+                            <li>{`Company Name: ${review.companyName}`}</li>
+                            <li>{`Comment: ${review.comment}`}</li>
+                            <li>{`Date: ${new Date(review.updatedAt).toString()}`}</li>
+                            <li>{`Position: ${review.position}`}</li>
+                        </ul>
+                        <button
+                            onClick={() => handleDeleteReview(review._id)}
+                            className="action-btn delete-review"
+                        >
+                            Delete Review
+                        </button>
+                    </li>
+                ))}
             </ul>
         </div>
     )

src/components/CompanyReviews/companyReviews.css

@@ -30,3 +30,23 @@
 .review-list li:hover {
     background-color: #333;
 }
+/* Buttons */
+.action-btn {
+    border: none;
+    text-decoration: none;
+    padding: 1rem;
+    font-size: 1.6rem;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.2s;
+    font-family: inherit;
+    background-color: #9e1313;
+    color: white;
+    border-radius: 4px;
+}
+
+.action-btn:hover,
+.action-btn:active {
+    background-color: #282763;
+}