Merge pr #58 from Resilient-Labs/feature/dynamic-review-page; issue #40

#40 Feature/dynamic-review-page

README.md

@@ -36,7 +36,9 @@ npm run dev
    The backend server is loading from `http://localhost:3000`
 
 ### Environment Variables
+
 =======
+
 1. Start the backend server:
 
 ```bash
@@ -54,7 +56,6 @@ npm run dev
 
 3. Open your browser and go to `http://localhost:5173`
    The backend server is loading from `http://localhost:3000`
->>>>>>> 3ddd9d9 (company controller updates)
 
 One ENV goes inside of the config file inside the server and the other ENV is in the root
 

server/controllers/company.js

@@ -4,15 +4,14 @@ const companyController = {
     //fetches all companies: MIGHT NOT WORK WITHOUT FRONT END?
     getAllCompanies: async (req, res, next) => {
         try {
-            const companies = await Company.find({})
-            console.log(companies)
+            const companies = await Company.find()
             res.json({ companies })
         } catch (error) {
             next(error)
         }
     },
-    
-    //fetches a specfic company (and all of its data):
+
+    //fetches a specific company (and all of its data):
     getCompany: async (req, res, next) => {
         try {
             const { id } = req.params // Get the company ID from the route parameters

server/controllers/user.js

@@ -24,29 +24,30 @@ const userController = {
         } catch (error) {
             next(error)
         }
-  },
-  getAllUsers: async (req, res, next) => {
-    try {
-      const allUsers = await User.find({}); 
-      console.log(allUsers);
-    } catch (error) {
-      next(error)
-    }
-  },
-  addFavoriteCompany: async (req, res, next) => {
-    try {
-
-    } catch (error) {
-      next(error)
-    }
-  },
-  getFavoritesCompanies: async (req, res, next) => {
-    try {
-      const favorites = await User.find({ clerkId: req.auth.userId }).select('favoriteCompanies')
-    } catch (error) {
-      next(error)
-    }
-  }
+    },
+    getAllUsers: async (req, res, next) => {
+        try {
+            const allUsers = await User.find({})
+            console.log(allUsers)
+        } catch (error) {
+            next(error)
+        }
+    },
+    addFavoriteCompany: async (req, res, next) => {
+        try {
+        } catch (error) {
+            next(error)
+        }
+    },
+    getFavoritesCompanies: async (req, res, next) => {
+        try {
+            const favorites = await User.find({
+                clerkId: req.auth.userId,
+            }).select('favoriteCompanies')
+        } catch (error) {
+            next(error)
+        }
+    },
 }
 
 export default userController

server/routes/user.js

@@ -3,9 +3,9 @@ import userController from '../controllers/user.js'
 
 const userRouter = express.Router()
 
-userRouter.post('/', userController.addUser); 
-userRouter.get('/', userController.getAllUsers);
+userRouter.post('/', userController.addUser)
+userRouter.get('/', userController.getAllUsers)
 userRouter.get('/favorites', userController.getFavoritesCompanies)
-userRouter.post('/favorites', userController.addFavoriteCompany) 
+userRouter.post('/favorites', userController.addFavoriteCompany)
 
 export default userRouter

src/components/ReviewList/ReviewList.jsx

@@ -4,97 +4,141 @@ import './reviewList.css';
 const categories = [
   "accountability",
   "representation",
-  "work-life-balance",
-  "career-growth",
-  "diversity-scale",
-  "company-culture",
+  "workLifeBalance",
+  "careerGrowth",
+  "diversityScale",
+  "companyCulture",
   "salaries",
 ];
 
-const ReviewList = (props) => {
-  const [ratings, setRatings] = useState({});
-  const [comment, setComment] = useState("");
-  const [newCompany, setNewCompany] = useState("");
-
-  const handleMouseOver = (category, value) => {
-    setRatings((prev) => ({
-      ...prev,
-      [`${category}-hover`]: value,
-    }));
-  };
-
-  const handleMouseLeave = (category) => {
-    setRatings((prev) => ({
-      ...prev,
-      [`${category}-hover`]: undefined,
-    }));
-  };
-
-  const handleClick = (category, value) => {
-    setRatings((prev) => ({
-      ...prev,
-      [category]: value,
-    }));
-  };
-
-  const handleSubmit = () => {
-    const companyName = props.company;
-
-    if (!companyName) {
-      alert("Please select or add a company name.");
-      return;
+
+const ReviewList =  (props) => {
+    const [ratings, setRatings] = useState({})
+    const [comment, setComment] = useState('')
+    // const [newCompany, setNewCompany] = useState("");
+
+    console.log(ratings)
+
+    const handleMouseOver = (category, value) => {
+        setRatings((prev) => ({
+            ...prev,
+            [`${category}-hover`]: value,
+        }))
+    }
+
+    const handleMouseLeave = (category) => {
+        setRatings((prev) => ({
+            ...prev,
+            [`${category}-hover`]: undefined,
+        }))
     }
 
-    if (categories.some((category) => !ratings[category])) {
-      alert("Please rate all categories before submitting.");
-      return;
+    const handleClick = (category, value) => {
+        setRatings((prev) => ({
+            ...prev,
+            [category]: value,
+        }))
     }
 
-    console.log({ companyName, ratings, comment });
-    alert("Review submitted successfully!");
-  };
-
-
-  return (
-    <div>
-      <div className="rating-section">
-        {categories.map((category) => (
-          <div key={category} className="rating-category">
-            <label>{category.split('-').join(' ')}:</label>
-            <div className="star-rating">
-              {[1, 2, 3, 4, 5].map((value) => (
-                <img
-                  key={value}
-                  src={
-                    value <= (ratings[`${category}-hover`] || ratings[category])
-                      ? "../../public/img/star-yellow.png"
-                      : "../../public/img/star-white-transp.png"
-                  }
-                  alt="star"
-                  className="star"
-                  onMouseOver={() => handleMouseOver(category, value)}
-                  onMouseLeave={() => handleMouseLeave(category)}
-                  onClick={() => handleClick(category, value)}
-                />
-              ))}
+    const handleSubmit = async () => {
+        const companyName = props.company
+        const position = props.position
+        let newRatings = {}
+        for(let rating in ratings){
+            if(ratings[rating] !== undefined){
+                newRatings[rating] = ratings[rating]
+
+            }
+        }
+        console.log(newRatings)
+
+        const reviewData = {
+            companyName,
+            position,
+            newRatings,
+            comment,
+        };
+
+        if (!companyName || !position) {
+            alert('Please select or add a company name and role.')
+            return
+        }
+
+        if (categories.some((category) => !ratings[category])) {
+            alert('Please rate all categories before submitting.')
+            return
+        }
+
+        console.log({reviewData})
+        alert('Review submitted successfully!')
+
+
+
+        try {
+            const response = await fetch(`/api/review/${companyName}`, {
+                 method: 'POST',
+                 headers: {
+                     'Content-Type': 'application/json',
+                 },
+                 body: JSON.stringify(reviewData),
+            });
+            if (!response.ok) {
+                console.log({reviewData})
+                throw new Error (`Response status: ${response.status}`)
+            }
+            const responseData = await response.json()
+            console.log(`Response received: ${responseData}`);
+        } catch (error) {
+             console.log(error)
+        }
+
+    }
+    return (
+        <div>
+            <div className="rating-section">
+                {categories.map((category) => (
+                    <div key={category} className="rating-category">
+                        <label>{category.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, str => str.toUpperCase())}:</label>
+                        <div className="star-rating">
+                            {[1, 2, 3, 4, 5].map((value) => (
+                                <img
+                                    key={value}
+                                    src={
+                                        value <=
+                                        (ratings[`${category}-hover`] ||
+                                            ratings[category])
+                                            ? '../../public/img/star-yellow.png'
+                                            : '../../public/img/star-white-transp.png'
+                                    }
+                                    alt="star"
+                                    className="star"
+                                    onMouseOver={() =>
+                                        handleMouseOver(category, value)
+                                    }
+                                    onMouseLeave={() =>
+                                        handleMouseLeave(category)
+                                    }
+                                    onClick={() => handleClick(category, value)}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                ))}
             </div>
-          </div>
-        ))}
-      </div>
-
-      <textarea
-        id="comment"
-        rows="5"
-        placeholder="Add a comment"
-        value={comment}
-        onChange={(e) => setComment(e.target.value)}
-      />
-
-      <button id="submit-review" onClick={handleSubmit}>
-        Submit
-      </button>
-    </div>
-  );
+
+            <textarea
+                id="comment"
+                rows="5"
+                placeholder="Add a comment"
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+            />
+
+            <button id="submit-review" onClick={handleSubmit}>
+                Submit
+            </button>
+        </div>
+    )
 };
 
 export default ReviewList;