From 661a34218cda516275dfb48cf4dcdfe2ac53864f Mon Sep 17 00:00:00 2001
From: gavinlin24 <gavinlin24@gmail.com>
Date: Wed, 8 Jan 2025 16:50:23 -0800
Subject: [PATCH 1/7] New Reaction Event Card

Created new event card with like/dislike button
---
 backend/controllers/reactionsController.js    |   0
 backend/models/reactions.js                   |  22 +
 .../src/components/Button/ThumbButtons.tsx    |  46 +++
 frontend/src/components/Event/EventRating.tsx | 389 ++++++++++++++++++
 .../components/Membership/EventsAttended.tsx  |   4 +-
 5 files changed, 459 insertions(+), 2 deletions(-)
 create mode 100644 backend/controllers/reactionsController.js
 create mode 100644 backend/models/reactions.js
 create mode 100644 frontend/src/components/Button/ThumbButtons.tsx
 create mode 100644 frontend/src/components/Event/EventRating.tsx

diff --git a/backend/controllers/reactionsController.js b/backend/controllers/reactionsController.js
new file mode 100644
index 00000000..e69de29b
diff --git a/backend/models/reactions.js b/backend/models/reactions.js
new file mode 100644
index 00000000..2e876303
--- /dev/null
+++ b/backend/models/reactions.js
@@ -0,0 +1,22 @@
+import { Schema, model } from 'mongoose';
+
+const reactionsSchema = new Schema({
+    userId: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'User',
+        required: true
+    },
+    eventId: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'Event',
+        required: true
+    },
+    reactionType: {
+        type: Number,
+        enum: [1, -1], // 1 = like, -1 = dislike
+        required: true
+    }
+});
+
+// Export model
+export default model('Reactions', reactionsSchema);
\ No newline at end of file
diff --git a/frontend/src/components/Button/ThumbButtons.tsx b/frontend/src/components/Button/ThumbButtons.tsx
new file mode 100644
index 00000000..d60f04a9
--- /dev/null
+++ b/frontend/src/components/Button/ThumbButtons.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import ThumbUpIcon from "@mui/icons-material/ThumbUp";
+import ThumbDownIcon from "@mui/icons-material/ThumbDown";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+
+const ThumbButtons = () => {
+  const [selected, setSelected] = useState<"up" | "down" | null>(null);
+
+  const handleThumbUp = () => {
+    setSelected(selected === "up" ? null : "up");
+  };
+
+  const handleThumbDown = () => {
+    setSelected(selected === "down" ? null : "down");
+  };
+
+  return (
+    <Stack direction="row" spacing={2}>
+      {/* Thumbs Up Button */}
+      <Button
+        variant="contained"
+        startIcon={<ThumbUpIcon />}
+        onClick={handleThumbUp}
+        style={{
+          backgroundColor: selected === "up" ? "#1976d2" : "#e0e0e0",
+          color: selected === "up" ? "#fff" : "#000",
+          textTransform: "none",
+        }}
+      />
+      {/* Thumbs Down Button */}
+      <Button
+        variant="contained"
+        startIcon={<ThumbDownIcon />}
+        onClick={handleThumbDown}
+        style={{
+          backgroundColor: selected === "down" ? "#d32f2f" : "#e0e0e0",
+          color: selected === "down" ? "#fff" : "#000",
+          textTransform: "none",
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default ThumbButtons;
diff --git a/frontend/src/components/Event/EventRating.tsx b/frontend/src/components/Event/EventRating.tsx
new file mode 100644
index 00000000..b1d41e02
--- /dev/null
+++ b/frontend/src/components/Event/EventRating.tsx
@@ -0,0 +1,389 @@
+import React, { useState, useEffect } from 'react';
+import { event_style } from './styles';
+import { Box } from '@mui/material';
+import calendarIcon from '../../images/calendarIcon.svg';
+import instagramIcon from '../../images/instaLogo.svg';
+import ThumbButtons from '../Button/ThumbButtons'
+
+interface EventBoxProps {
+  title: string;
+  targetDate: Date;
+  location: string;
+  style?: EventBoxStyles;
+  calendar_link: string;
+  description: string;
+  end_time: string;
+  instagram_link?: string;
+  start_time: string;
+  _id: string;
+  pastEvent?: boolean;
+}
+interface EventBoxStyles {
+  outerBox?: React.CSSProperties;
+  innerBox?: React.CSSProperties;
+  // Add more style properties if needed
+}
+
+/**
+ *
+ * @param title of the event
+ * @param targetDate date of the event
+ * @param location of the event
+ * @returns the an eventBox
+ */
+
+// title, targetDate, location
+const EventRating = ({
+  targetDate,
+  calendar_link,
+  description,
+  end_time,
+  instagram_link,
+  location,
+  start_time,
+  title,
+  _id,
+  pastEvent,
+}: EventBoxProps) => {
+  const styles = event_style();
+
+  /**
+   * Calculates the time in days, hours, mins, and secs by subtracting the target date, minus the curent date.
+   * @param targetDate Date given
+   * @returns Time left
+   */
+  const calculateTimeLeft = (targetDate: Date): TimeFuns => {
+    const difference = new Date(targetDate).getTime() - new Date().getTime();
+    let timeLeft: TimeFuns = {
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+    };
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / (1000 * 60)) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+
+    return timeLeft;
+  };
+
+  /**
+   * Returns the clean date
+   * @returns Returns the clean date
+   */
+  const cleanDate = () => {
+    const months = [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ];
+
+    const date = new Date(targetDate);
+    const dayOfWeek = date.toLocaleDateString('en-US', { weekday: 'long' });
+    const day = date.getDate();
+    const month = months[date.getMonth()];
+    const year = date.getFullYear();
+
+    return `${dayOfWeek}, ${day} ${month}, ${year}`;
+  };
+
+  /**
+   * This function takes a not clean string representing the time and returns the clean time.
+   * @returns Returns the clean time
+   */
+  const cleanTime = () => {
+    const startDate = new Date(start_time);
+    const endDate = new Date(end_time);
+
+    const startTime = startDate.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+
+    const endTime = endDate.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+
+    return `${startTime} - ${endTime}`;
+  };
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(targetDate));
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(calculateTimeLeft(targetDate)); // Pass targetDate as an argument
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  });
+
+  interface TimeFuns {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+  }
+
+  const { days, hours, minutes, seconds }: TimeFuns = timeLeft;
+
+  /**
+   * If the current the current function is just one character add a 0 beofore it.
+   * @param time includes, days, hours, min, sec.
+   * @returns Returns the modified number
+   */
+  const formatTime = (time: number): string => {
+    return time < 10 ? `0${time}` : `${time}`;
+  };
+  const countdownCharacters = `${formatTime(days)}:${formatTime(hours)}:${formatTime(
+    minutes,
+  )}:${formatTime(seconds)}`.split('');
+
+  return (
+    <Box style={{ display: 'flex' }}>
+      <Box className="outerBox" sx={styles?.outerBox}>
+        <div className="innerBox" style={styles?.innerBox}>
+          <p
+            style={{
+              color: 'white',
+              fontSize: 'clamp(25px, 1vw, 35px)',
+              fontFamily: 'Chakra Petch',
+              fontWeight: '600',
+              marginTop: '0',
+              height: '110px',
+              marginBottom: '15px',
+            }}
+          >
+            {title}
+          </p>
+          {pastEvent && (
+            <>
+              <div 
+                className="rating" 
+                style={{                       
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'center',
+                paddingBottom: "50px"
+                }}
+              >
+                <ThumbButtons />
+              </div>
+            </>
+          )}
+          {!pastEvent && (
+            <>
+              <div
+                className="countDown"
+                style={{
+                  marginTop: '2px',
+                  display: 'flex',
+                }}
+              >
+                {countdownCharacters.map((character, index) => (
+                  <div
+                    key={index}
+                    style={{
+                      width: '30px', // Adjust the width as needed
+                      height: '60px', // Adjust the height as needed
+                      alignItems: 'center',
+                      display: 'flex',
+                      justifyContent: 'center',
+                      backgroundColor: character === ':' ? 'transparent' : 'white',
+                      marginLeft: character === ':' ? '0px' : '4px',
+                      fontSize: '20px',
+                      fontFamily: 'Chakra Petch',
+                      fontWeight: '500',
+                      color: character === ':' ? 'white' : 'black',
+                      borderRadius: '4px',
+                    }}
+                  >
+                    {character}
+                  </div>
+                ))}
+              </div>
+              <div
+                style={{
+                  marginTop: '0',
+                  display: 'flex',
+                  flexDirection: 'row',
+                }}
+              >
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '16px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '600',
+                  }}
+                >
+                  &nbsp;days
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '20px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '500',
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '16px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '600',
+                  }}
+                >
+                  hours
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '20px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '500',
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '16px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '600',
+                  }}
+                >
+                  minutes
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '20px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '500',
+                  }}
+                >
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </p>
+                <p
+                  style={{
+                    color: 'white',
+                    fontSize: '16px',
+                    fontFamily: 'Chakra Petch',
+                    fontWeight: '600',
+                  }}
+                >
+                  seconds
+                </p>
+              </div>
+            </>
+          )}
+
+          <div
+            style={{
+              marginTop: '25px',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <p
+              style={{
+                color: 'white',
+                fontSize: '18px',
+                fontFamily: 'Chakra Petch',
+                fontWeight: '500',
+                marginTop: '5px',
+                lineHeight: '0px',
+              }}
+            >
+              {cleanDate()}
+            </p>
+            <p
+              style={{
+                color: 'white',
+                fontSize: '18px',
+                fontFamily: 'Chakra Petch',
+                fontWeight: '500',
+                marginTop: '5px',
+                lineHeight: '0px',
+              }}
+            >
+              {cleanTime()}
+            </p>
+
+            <p
+              style={{
+                color: 'white',
+                fontSize: '18px',
+                fontFamily: 'Chakra Petch',
+                fontWeight: '500',
+                marginTop: '5px',
+                lineHeight: '0px',
+              }}
+            >
+              {location}
+            </p>
+
+            <div style={{ display: 'flex', marginLeft: '250px', marginTop: '-35px', marginBottom: '30px' }}>
+              {instagram_link !== '' && (
+                <a href={instagram_link}>
+                  <img
+                    src={instagramIcon}
+                    alt="Instagram Icon"
+                    style={{
+                      width: '30px',
+                      height: '30px',
+                      filter: 'grayscale(100%)',
+                      transition: 'filter 0.3s',
+                    }}
+                    onMouseEnter={(e) => (e.currentTarget.style.filter = 'grayscale(0%)')}
+                    onMouseLeave={(e) => (e.currentTarget.style.filter = 'grayscale(100%)')}
+                  />
+                </a>
+              )}
+              
+              {calendar_link !== '' && (
+                <a 
+                  href={calendar_link}
+                  style={{ marginLeft: instagram_link === '' ? '0px' : '10px' }}>
+                  <img
+                    src={calendarIcon}
+                    alt="Calendar Icon"
+                    style={{
+                      width: '30px',
+                      height: '30px',
+                      filter: 'grayscale(100%)',
+                      transition: 'filter 0.3s',
+                    }}
+                    onMouseEnter={(e) => (e.currentTarget.style.filter = 'grayscale(0%)')}
+                    onMouseLeave={(e) => (e.currentTarget.style.filter = 'grayscale(100%)')}
+                  />
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+      </Box>
+    </Box>
+  );
+};
+
+export default EventRating;
\ No newline at end of file
diff --git a/frontend/src/components/Membership/EventsAttended.tsx b/frontend/src/components/Membership/EventsAttended.tsx
index 938940bc..c250cd62 100644
--- a/frontend/src/components/Membership/EventsAttended.tsx
+++ b/frontend/src/components/Membership/EventsAttended.tsx
@@ -1,6 +1,6 @@
 import useMediaQuery from '../../hooks/useMediaQuery';
 import { Link, Container, Typography } from '@mui/material';
-import EventBox from '../Event/Event';
+import EventRating from '../Event/EventRating';
 import { membershipStyles } from './styles';
 import alertLogo from '../../images/events-attended-alert.svg';
 import MobileEventBox from '../Event/MobileEvent';
@@ -54,7 +54,7 @@ const EventsAttended = ({ eventsAttended }: EventsAttendedProps) => {
       {!isMobile && (
         <div style={{ display: 'flex', flexDirection: 'row', gap: '40px', overflow: 'scroll' }}>
           {eventsAttended.map((event) => (
-            <EventBox
+            <EventRating
               title={event.title}
               targetDate={new Date(event.start_time)}
               location={event.location}

From bd3aa6fbfcba972da36f4bb7aab1b4d2e7bf1c06 Mon Sep 17 00:00:00 2001
From: gavinlin24 <gavinlin24@gmail.com>
Date: Wed, 8 Jan 2025 17:51:49 -0800
Subject: [PATCH 2/7] Reaction Routes

Added GET/POST reaction routes
---
 backend/controllers/reactionsController.js | 57 ++++++++++++++++++++++
 backend/index.js                           |  2 +
 backend/models/reactions.js                |  1 +
 3 files changed, 60 insertions(+)

diff --git a/backend/controllers/reactionsController.js b/backend/controllers/reactionsController.js
index e69de29b..12a49b55 100644
--- a/backend/controllers/reactionsController.js
+++ b/backend/controllers/reactionsController.js
@@ -0,0 +1,57 @@
+import Reactions from '../models/reactions.js';
+import asyncHandler from 'express-async-handler';
+
+export const getReaction = asyncHandler(async (req, res) => {
+    const { userId, eventId } = req.params;
+
+    if (!userId || !eventId) {
+        res.status(400);
+    }
+
+    const reaction = await Reactions.findOne({ userId, eventId });
+
+    if (reaction) {
+        res.status(200).json(reaction); // Return the found reaction
+    } else {
+        res.status(404).json({ message: 'Reaction not found' }); // No reaction found
+    }
+
+})
+
+export const createReaction = asyncHandler(async (req, res) => {
+    const { userId, eventId, reactionType } = req.body;
+
+    // Validate input
+    if (!userId || !eventId || ![1, -1].includes(reactionType)) {
+        res.status(400);
+    }
+
+    // Check if a reaction already exists
+    const existingReaction = await Reactions.findOne({ userId, eventId });
+
+    if (existingReaction) {
+        // Update the existing reaction
+        existingReaction.reactionType = reactionType;
+        await existingReaction.save();
+        res.status(200).json({
+            message: 'Reaction updated successfully',
+            reaction: existingReaction
+        });
+    } else {
+        // Create a new reaction
+        const newReaction = await Reactions.create({
+            userId,
+            eventId,
+            reactionType
+        });
+        res.status(201).json({
+            message: 'Reaction created successfully',
+            reaction: newReaction
+        });
+    }
+});
+
+export default {
+    getReaction,
+    createReaction
+};
diff --git a/backend/index.js b/backend/index.js
index 8ca7619c..b861118e 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -11,6 +11,7 @@ import connectMailchimp from './mailchimp/connect-mailchimp.js';
 import eventRoutes from './routes/event.js';
 import subscriptionRoutes from './routes/emailSubscription.js';
 import userRoutes from './routes/user.js';
+import reactionsRoutes from './routes/reactions.js'
 
 // initialize the application
 const app = express();
@@ -41,6 +42,7 @@ app.get('/', function (_, res) {
 app.use(`${baseApi}`, eventRoutes);
 app.use(`${baseApi}/subscribers`, subscriptionRoutes);
 app.use(`${baseApi}/users`, userRoutes);
+app.use(`${baseApi}/reactions`, reactionsRoutes);
 
 var server = app.listen(PORT, function () {
   var port = server.address().port;
diff --git a/backend/models/reactions.js b/backend/models/reactions.js
index 2e876303..ff7436ba 100644
--- a/backend/models/reactions.js
+++ b/backend/models/reactions.js
@@ -1,3 +1,4 @@
+import mongoose from 'mongoose';
 import { Schema, model } from 'mongoose';
 
 const reactionsSchema = new Schema({

From 8d0ab0fb43a6db7724483bba482c03ecef868908 Mon Sep 17 00:00:00 2001
From: gavinlin24 <gavinlin24@gmail.com>
Date: Wed, 8 Jan 2025 18:05:28 -0800
Subject: [PATCH 3/7] Create reactions endpoints

---
 backend/routes/reactions.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 backend/routes/reactions.js

diff --git a/backend/routes/reactions.js b/backend/routes/reactions.js
new file mode 100644
index 00000000..4818015f
--- /dev/null
+++ b/backend/routes/reactions.js
@@ -0,0 +1,14 @@
+import express from 'express';
+import reactionsController from '../controllers/reactionsController.js';
+
+const router = express.Router();
+
+//POST request for new reaction
+router.post('/create', reactionsController.createReaction);
+
+//GET request for user reaction
+router.get('/:userId/:eventId', reactionsController.getReaction);
+
+// Export router.
+export default router;
+

From 7f0ce00f3bdb695affebf3a3df02c142978b2eb7 Mon Sep 17 00:00:00 2001
From: gavinlin24 <gavinlin24@gmail.com>
Date: Fri, 17 Jan 2025 13:26:25 -0800
Subject: [PATCH 4/7] Schema Property Change

Changed userId property to userEmail
---
 backend/controllers/reactionsController.js | 14 +++++++-------
 backend/models/reactions.js                |  5 ++---
 backend/routes/reactions.js                |  2 +-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/backend/controllers/reactionsController.js b/backend/controllers/reactionsController.js
index 12a49b55..3a964ceb 100644
--- a/backend/controllers/reactionsController.js
+++ b/backend/controllers/reactionsController.js
@@ -2,13 +2,13 @@ import Reactions from '../models/reactions.js';
 import asyncHandler from 'express-async-handler';
 
 export const getReaction = asyncHandler(async (req, res) => {
-    const { userId, eventId } = req.params;
+    const { userEmail, eventId } = req.params;
 
-    if (!userId || !eventId) {
+    if (!userEmail || !eventId) {
         res.status(400);
     }
 
-    const reaction = await Reactions.findOne({ userId, eventId });
+    const reaction = await Reactions.findOne({ userEmail, eventId });
 
     if (reaction) {
         res.status(200).json(reaction); // Return the found reaction
@@ -19,15 +19,15 @@ export const getReaction = asyncHandler(async (req, res) => {
 })
 
 export const createReaction = asyncHandler(async (req, res) => {
-    const { userId, eventId, reactionType } = req.body;
+    const { userEmail, eventId, reactionType } = req.body;
 
     // Validate input
-    if (!userId || !eventId || ![1, -1].includes(reactionType)) {
+    if (!userEmail || !eventId || ![1, -1].includes(reactionType)) {
         res.status(400);
     }
 
     // Check if a reaction already exists
-    const existingReaction = await Reactions.findOne({ userId, eventId });
+    const existingReaction = await Reactions.findOne({ userEmail, eventId });
 
     if (existingReaction) {
         // Update the existing reaction
@@ -40,7 +40,7 @@ export const createReaction = asyncHandler(async (req, res) => {
     } else {
         // Create a new reaction
         const newReaction = await Reactions.create({
-            userId,
+            userEmail,
             eventId,
             reactionType
         });
diff --git a/backend/models/reactions.js b/backend/models/reactions.js
index ff7436ba..429ea3e2 100644
--- a/backend/models/reactions.js
+++ b/backend/models/reactions.js
@@ -2,9 +2,8 @@ import mongoose from 'mongoose';
 import { Schema, model } from 'mongoose';
 
 const reactionsSchema = new Schema({
-    userId: {
-        type: mongoose.Schema.Types.ObjectId,
-        ref: 'User',
+    userEmail: {
+        type: String,
         required: true
     },
     eventId: {
diff --git a/backend/routes/reactions.js b/backend/routes/reactions.js
index 4818015f..0ca72338 100644
--- a/backend/routes/reactions.js
+++ b/backend/routes/reactions.js
@@ -7,7 +7,7 @@ const router = express.Router();
 router.post('/create', reactionsController.createReaction);
 
 //GET request for user reaction
-router.get('/:userId/:eventId', reactionsController.getReaction);
+router.get('/:userEmail/:eventId', reactionsController.getReaction);
 
 // Export router.
 export default router;

From b3c48bb0a9e7b9a587201d46e9633638f5e9a6d5 Mon Sep 17 00:00:00 2001
From: mk7652 <130100151+mk7652@users.noreply.github.com>
Date: Fri, 17 Jan 2025 13:30:40 -0800
Subject: [PATCH 5/7] Edited thumbs button

---
 frontend/src/components/Button/ThumbButtons.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Button/ThumbButtons.tsx b/frontend/src/components/Button/ThumbButtons.tsx
index d60f04a9..d3b238ca 100644
--- a/frontend/src/components/Button/ThumbButtons.tsx
+++ b/frontend/src/components/Button/ThumbButtons.tsx
@@ -5,14 +5,14 @@ import Button from "@mui/material/Button";
 import Stack from "@mui/material/Stack";
 
 const ThumbButtons = () => {
-  const [selected, setSelected] = useState<"up" | "down" | null>(null);
+  const [selected, setSelected] = useState<1 | -1 | null>(null);
 
   const handleThumbUp = () => {
-    setSelected(selected === "up" ? null : "up");
+    setSelected(selected === 1 ? null : 1);
   };
 
   const handleThumbDown = () => {
-    setSelected(selected === "down" ? null : "down");
+    setSelected(selected === -1 ? null : -1);
   };
 
   return (
@@ -23,8 +23,8 @@ const ThumbButtons = () => {
         startIcon={<ThumbUpIcon />}
         onClick={handleThumbUp}
         style={{
-          backgroundColor: selected === "up" ? "#1976d2" : "#e0e0e0",
-          color: selected === "up" ? "#fff" : "#000",
+          backgroundColor: selected === 1 ? "#1976d2" : "#e0e0e0",
+          color: selected === 1 ? "#fff" : "#000",
           textTransform: "none",
         }}
       />
@@ -34,8 +34,8 @@ const ThumbButtons = () => {
         startIcon={<ThumbDownIcon />}
         onClick={handleThumbDown}
         style={{
-          backgroundColor: selected === "down" ? "#d32f2f" : "#e0e0e0",
-          color: selected === "down" ? "#fff" : "#000",
+          backgroundColor: selected === -1 ? "#d32f2f" : "#e0e0e0",
+          color: selected === -1 ? "#fff" : "#000",
           textTransform: "none",
         }}
       />

From 8a7533af9e2505756a478a90bd19ef0aef153348 Mon Sep 17 00:00:00 2001
From: mk7652 <130100151+mk7652@users.noreply.github.com>
Date: Fri, 17 Jan 2025 14:29:06 -0800
Subject: [PATCH 6/7] Created ThumbButtons Props

Added userEmail and eventId props to ThumbButtons
---
 frontend/src/components/Button/ThumbButtons.tsx |  8 +++++++-
 frontend/src/components/Event/EventRating.tsx   | 10 ++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Button/ThumbButtons.tsx b/frontend/src/components/Button/ThumbButtons.tsx
index d3b238ca..9eae9b8d 100644
--- a/frontend/src/components/Button/ThumbButtons.tsx
+++ b/frontend/src/components/Button/ThumbButtons.tsx
@@ -3,8 +3,14 @@ import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import Button from "@mui/material/Button";
 import Stack from "@mui/material/Stack";
+import axios from "axios";
 
-const ThumbButtons = () => {
+interface ThumbButtonProps {
+  userEmail: string;
+  eventId: string;
+}
+
+const ThumbButtons = ({ userEmail, eventId } : ThumbButtonProps) => {
   const [selected, setSelected] = useState<1 | -1 | null>(null);
 
   const handleThumbUp = () => {
diff --git a/frontend/src/components/Event/EventRating.tsx b/frontend/src/components/Event/EventRating.tsx
index b1d41e02..bb93f347 100644
--- a/frontend/src/components/Event/EventRating.tsx
+++ b/frontend/src/components/Event/EventRating.tsx
@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { event_style } from './styles';
 import { Box } from '@mui/material';
 import calendarIcon from '../../images/calendarIcon.svg';
 import instagramIcon from '../../images/instaLogo.svg';
 import ThumbButtons from '../Button/ThumbButtons'
+import { AuthContext } from '../../context/AuthContext';
 
 interface EventBoxProps {
   title: string;
@@ -46,6 +47,8 @@ const EventRating = ({
   pastEvent,
 }: EventBoxProps) => {
   const styles = event_style();
+  const { user } = useContext(AuthContext)
+  const eventId = String(_id)
 
   /**
    * Calculates the time in days, hours, mins, and secs by subtracting the target date, minus the curent date.
@@ -181,7 +184,10 @@ const EventRating = ({
                 paddingBottom: "50px"
                 }}
               >
-                <ThumbButtons />
+                <ThumbButtons 
+                  userEmail={user.email}
+                  eventId={eventId}
+                />
               </div>
             </>
           )}

From 914ecbb2ebd0c733b8bd89754a342740d35b4af1 Mon Sep 17 00:00:00 2001
From: gavinlin24 <gavinlin24@gmail.com>
Date: Fri, 17 Jan 2025 14:40:40 -0800
Subject: [PATCH 7/7] Setup Axios in ThumbButtons

Connected ThumbButtons with backend
---
 .../src/components/Button/ThumbButtons.tsx    | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Button/ThumbButtons.tsx b/frontend/src/components/Button/ThumbButtons.tsx
index 9eae9b8d..e5d5b176 100644
--- a/frontend/src/components/Button/ThumbButtons.tsx
+++ b/frontend/src/components/Button/ThumbButtons.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect} from "react";
 import ThumbUpIcon from "@mui/icons-material/ThumbUp";
 import ThumbDownIcon from "@mui/icons-material/ThumbDown";
 import Button from "@mui/material/Button";
@@ -12,13 +12,45 @@ interface ThumbButtonProps {
 
 const ThumbButtons = ({ userEmail, eventId } : ThumbButtonProps) => {
   const [selected, setSelected] = useState<1 | -1 | null>(null);
+  const API = axios.create({ baseURL: `${process.env.REACT_APP_BACKEND_URL}/api/v1` });
 
+  useEffect(() => {
+    const fetchReaction = async () => {
+      try {
+        const response = await API.get(`/reactions/${userEmail}/${eventId}`);
+        if (response.data && response.data.reactionType) {
+          setSelected(response.data.reactionType);
+        }
+      } catch (error) {
+        console.error("Error fetching reaction:", error);
+      }
+    };
+
+    fetchReaction();
+  }, [userEmail, eventId]);
+
+  const updateReaction = async (reaction: 1 | -1 | null) => {
+    try {
+      await API.post("/reactions/create", {
+        userEmail,
+        eventId,
+        reactionType: reaction,
+      });
+    } catch (error) {
+      console.error("Error updating reaction:", error);
+    }
+  };
+  
   const handleThumbUp = () => {
-    setSelected(selected === 1 ? null : 1);
+    const newReaction = selected === 1 ? null : 1;
+    setSelected(newReaction);
+    updateReaction(newReaction);
   };
 
   const handleThumbDown = () => {
-    setSelected(selected === -1 ? null : -1);
+    const newReaction = selected === -1 ? null : -1;
+    setSelected(newReaction);
+    updateReaction(newReaction);
   };
 
   return (