Reviews #60: added api endpoint to retrieve past reviews for every ev…

…en from db and display to users so that they can tell if an event was good or not.

backend/server.js

@@ -5,7 +5,7 @@ const passport = require("./authentication/auth/passport");
 const routes = require("./authentication/routes");
 const path = require("path");
 
-const { Event, sequelize, User } = require("./database.js");
+const { Event, sequelize, User, Review } = require("./database.js");
 const express = require("express");
 const cors = require("cors");
 
@@ -209,17 +209,29 @@ app.delete("/events/:id", async (req, res) => {
 });
 
 app.post("/api/reviews", async (req, res) => {
+  console.log("in /api/reviews");
   // Handle review submission
   const { review_text, event_name } = req.body;
-  console.log("Server has received a review: ", review_text);
-  // Save the review or do other logic here
   res.status(200).json({ review_text });
-  console.log("THIS THE TEXTTT: ", req.body.review_text);
-  console.log(req.body.event_name);
+  console.log("Server has received a review: ", review_text);
+
   const newReview = await Review.create({
     review_text: req.body.review_text,
     event_name: req.body.event_name,
   });
+
+});
+
+app.get("/api/reviews", async (req, res) => {
+  const eventName = req.query.event_name;
+
+  try {
+    const reviews = await Review.findAll({ where: { event_name: eventName } });
+    res.json(reviews);
+  } catch (error) {
+    console.error("Error fetching reviews:", error);
+    res.status(500).json({ error: "Failed to fetch reviews" });
+  }
 });
 
 //start server

frontend/source/components/eventPage/compare.js

@@ -0,0 +1,208 @@
+import { openEventForm } from "../eventCreationForm/eventCreationForm.js";
+
+export function showEventDetails(event) {
+  const eventDetailView =
+    document.getElementById("event-detail-view") ||
+    document.createElement("div");
+  eventDetailView.id = "event-detail-view";
+  eventDetailView.classList.add("event-detail-view");
+  document.body.appendChild(eventDetailView);
+
+  eventDetailView.innerHTML = `
+        <div class="event-detail-view">
+            <div class="event-detail">
+                <button id="back-to-main">Back to Main</button>
+                <img src="${event.image}" alt="${
+    event.title
+  }" class="event-detail-image">
+                <h2 class="event-detail-title">${event.title}</h2>
+                <p class="event-detail-genre">Genre: ${event.genre || "N/A"}</p>
+                <p class="event-detail-location">Location: ${
+                  event.location || "N/A"
+                }</p>
+                <button id="add-to-interested">${
+                  event.interested ? "Remove" : "Add"
+                }</button>
+                <button id="rsvp-button">RSVP</button>
+                <button id="share-button">Share</button>
+                ${
+                  event.host === getCurrentUserName()
+                    ? `<button id="edit-event-button"> Edit </button>`
+                    : ""
+                }
+            </div>  
+            <div class="map-reviews-container">
+                <div class="map-container">
+                    <img src="https://developers.google.com/static/maps/images/landing/hero_maps_static_api.png" alt="Map Placeholder" class="map-image">
+                </div>
+
+                <div class="reviews-container">
+                    <div class="reviews-header">
+                        <h3>Reviews</h3>
+                    </div>
+                    <div class="review-box" id="review-box">
+                    </div>
+                    <div class="submit-review">
+                        <textarea id="review-text" placeholder="Write your review here..."></textarea>
+                        <button id="submit-review">Submit Review</button>
+                    </div>
+                </div>
+            
+            </div>
+            
+        </div>
+    `;
+
+  document
+    .getElementById("add-to-interested")
+    .addEventListener("click", () => updateInterested(event));
+  document.getElementById("back-to-main").addEventListener("click", backToMain);
+  document
+    .getElementById("share-button")
+    .addEventListener("click", () => shareEvent(event));
+  document.getElementById("rsvp-button").addEventListener("click", rsvpEvent);
+  document
+    .getElementById("submit-review")
+    .addEventListener("click", (event) => submitReview(event));
+
+  if (event.host === getCurrentUserName()) {
+    document
+      .getElementById("edit-event-button")
+      .addEventListener("click", () => {
+        openEventForm(event.id);
+      });
+  }
+}
+
+//fot testing
+
+localStorage.setItem("currentUser", "Rock Society");
+
+// this will be replaced with logic to get the current user
+function getCurrentUserName() {
+  const currentUser = localStorage.getItem("currentUser") || "Guest";
+  console.log(`Current User: ${currentUser}`);
+  return currentUser;
+}
+
+function updateInterested(event) {
+  event.interested = !event.interested;
+  document.getElementById("add-to-interested").textContent = event.interested
+    ? "Remove"
+    : "Add";
+  alert(
+    `Event ${
+      event.interested ? "added to" : "removed from"
+    } your Interested list!`
+  );
+}
+
+function backToMain() {
+  const eventDetailView = document.getElementById("event-detail-view");
+  if (eventDetailView) eventDetailView.remove();
+
+  document.getElementById("popular-events").style.display = "block";
+  document.getElementById("events-for-you").style.display = "block";
+  document.getElementById("search-results").style.display = "none";
+  document.getElementById("map-container").style.display = "none";
+}
+
+function shareEvent(event) {
+  const eventUrl = `${window.location.origin}${
+    window.location.pathname
+  }?event=${encodeURIComponent(event.title)}`;
+
+  navigator.clipboard
+    .writeText(eventUrl)
+    .then(() => alert(`Event link copied to clipboard: ${eventUrl}`))
+    .catch((error) => console.error("Error", error));
+}
+
+async function submitReview(event) {
+  // get the typed text
+  event.preventDefault();
+  const reviewText = document.getElementById("review-text").value;
+  const eventTitle = document.querySelector(".event-detail-title");
+  const eventName = eventTitle
+    ? eventTitle.innerText
+    : "No event name available";
+  // if there is text, then we need to post to db
+  if (reviewText) {
+    const response = await fetch("http://127.0.0.1:4000/api/reviews", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      // in db, records contain the text and the event its for
+      body: JSON.stringify({
+        review_text: reviewText,
+        event_name: eventName,
+      }),
+    });
+
+    // the post request should return res with just the text
+    const newReview = await response.json();
+    if (response.ok) {
+      const reviewBox = document.getElementById("review-box");
+      reviewBox.innerHTML += `<p>${newReview.review_text}</p>`; // Append review
+      document.getElementById("review-text").value = ""; // Clear text area
+      alert("Review Submitted!");
+    } else {
+      alert("Failed to submit review");
+    }
+  } else {
+    alert("Please write a review");
+  }
+}
+
+function rsvpEvent(event) {
+  const modal = document.getElementById("rsvp-modal");
+  if (!modal) {
+    const modalElement = document.createElement("div");
+    modalElement.id = "rsvp-modal";
+    modalElement.classList.add("modal");
+    modalElement.innerHTML = `
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <h3>RSVP for ${event.title}</h3>
+                <form id="rsvp-form">
+                    <label for="attendance">Will you attend?</label>
+                    <select id="attendance">
+                        <option value="yes">Yes</option>
+                        <option value="maybe">Maybe</option>
+                        <option value="no">No</option>
+                    </select>
+
+                    <label for="attendees">How many people are attending?</label>
+                    <input type="number" id="attendees" min="1" value="1">
+
+                    <label for="comments">Additional comments</label>
+                    <textarea id="comments" placeholder="Any additional information?"></textarea>
+
+                    <button type="submit" id="submit-rsvp">Submit RSVP</button>
+                </form>
+            </div>
+        `;
+
+    document.body.appendChild(modalElement);
+
+    document
+      .querySelector(".close")
+      .addEventListener("click", () => (modalElement.style.display = "none"));
+
+    document.getElementById("rsvp-form").addEventListener("submit", (e) => {
+      e.preventDefault();
+      const attendance = document.getElementById("attendance").value;
+      const attendeesCount = document.getElementById("attendees").value;
+      const comments = document.getElementById("comments").value;
+
+      console.log(`RSVP for event: ${event.title}`);
+      console.log(`Attendance: ${attendance}`);
+      console.log(`Number of people: ${attendeesCount}`);
+      console.log(`Comments: ${comments}`);
+
+      modalElement.style.display = "none";
+    });
+  }
+  modal.style.display = "block";
+}

frontend/source/components/eventPage/eventPage.css

@@ -125,6 +125,44 @@ footer {
     font-size: 32px;
 }
 
+.review-box {
+    width: 100%;
+    min-height: 100px;
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: #2a2a3f;
+    padding: 10px;
+    border-radius: 2px;
+    color: #e0c084;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
+}
+
+.review {
+    background-color: #1a002b;
+    border-radius: 5px;
+    padding: 10px;
+    color: #fafafa;;
+    font-size: 0.9em;
+    text-align: left;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    flex-shrink: 0; 
+}
+
+/* #review-text {
+    width: 100%;
+    height: 60px;
+    padding: 10px;
+    border-radius: 8px;
+    border: none;
+    margin-bottom: 10px;
+    resize: none;
+    background-color: #2a2a3f;
+    color: #e0c084;
+} */
+
 /* Prevent Modal Style Inheritance */
 .modal {
     display: none;