From da120c3aa6a9898e31a7fa891be04aca0d35dd30 Mon Sep 17 00:00:00 2001
From: Harsheel Singh <hsin212@aucklanduni.ac.nz>
Date: Wed, 17 Jul 2024 18:23:48 +1200
Subject: [PATCH] chore: Restored Events Page

---
 web/src/components/EventCard.tsx              |  43 ---
 .../components/__tests__/EventCard.test.tsx   |  23 --
 web/src/pages/Event.tsx                       |  79 +----
 web/src/pages/Home.tsx                        | 327 ++++++++++--------
 web/src/pages/__tests__/Event.test.tsx        |  90 -----
 5 files changed, 180 insertions(+), 382 deletions(-)
 delete mode 100644 web/src/components/EventCard.tsx
 delete mode 100644 web/src/components/__tests__/EventCard.test.tsx
 delete mode 100644 web/src/pages/__tests__/Event.test.tsx

diff --git a/web/src/components/EventCard.tsx b/web/src/components/EventCard.tsx
deleted file mode 100644
index 1ca6928..0000000
--- a/web/src/components/EventCard.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { EventCardProps } from "../utils/FrontendTypes";
-
-export default function EventCard({ event }: EventCardProps) {
-	const { name, date, description, image } = event;
-
-	// Create a date object for the event
-	const eventDate = new Date(date);
-	const currentDate = new Date();
-
-	// Determine if the event is upcoming, happening today, or past
-	const isToday = eventDate.toDateString() === currentDate.toDateString();
-	const isUpcoming = eventDate > currentDate;
-	const statusText = isToday ? "Happening Today" : isUpcoming ? "Upcoming Event" : "Passed";
-
-	// Format the event date
-	const eventMonth = eventDate.toLocaleString("default", { month: "long" });
-	const eventDay = eventDate.getDate();
-
-	return (
-		<>
-			<div className="w-96 flex flex-col bg-pink rounded-3xl overflow-hidden">
-				<div className="relative h-3/5 group">
-					<img src={image} alt="Background Image" className="w-full h-full object-cover" />
-					<div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white text-2xl font-bold opacity-0 cursor-pointer group-hover:opacity-100 transition-opacity duration-300">
-						{statusText}
-					</div>
-				</div>
-
-				<div className="flex-grow flex rounded-b-3xl">
-					<div className="w-1/3 bg-white rounded-bl-3xl flex flex-col justify-center items-center font-raleway text-black font-bold p-2">
-						<p className="text-xl">{eventMonth}</p>
-						<p className="text-3xl">{eventDay}</p>
-					</div>
-
-					<div className="bg-pink w-2/3 rounded-br-3xl py-2 px-5 text-light-pink flex flex-col">
-						<h4 className="font-bold text-xl">{name}</h4>
-						<p className="text-md">{description}</p>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}
diff --git a/web/src/components/__tests__/EventCard.test.tsx b/web/src/components/__tests__/EventCard.test.tsx
deleted file mode 100644
index fbc1205..0000000
--- a/web/src/components/__tests__/EventCard.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import EventCard from "../EventCard";
-import eventBackground from "../../assets/event.jpg";
-import { EventType } from "../../utils/FrontendTypes";
-
-describe("Event Card Component", () => {
-	const event: EventType = {
-		name: "Event 1",
-		date: "2024-01-01",
-		description: "Event 1 Description",
-		image: eventBackground,
-	};
-
-	it("Renders the EventCard component with correct details", () => {
-		render(<EventCard event={event} />);
-
-		expect(screen.getByText("1")).toBeInTheDocument();
-		expect(screen.getByText("January")).toBeInTheDocument();
-		expect(screen.getByText("Event 1")).toBeInTheDocument();
-		expect(screen.getByText("Event 1 Description")).toBeInTheDocument();
-	});
-});
diff --git a/web/src/pages/Event.tsx b/web/src/pages/Event.tsx
index dac7f55..3a2f599 100644
--- a/web/src/pages/Event.tsx
+++ b/web/src/pages/Event.tsx
@@ -1,84 +1,7 @@
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
-import { useState, useEffect } from "react";
-import cupcake from "../assets/cupcake.svg";
-import EventCard from "../components/EventCard";
-import axios from "axios";
-import { EventType } from "../utils/FrontendTypes";
-
 export default function Event() {
-	const [searchQuery, setSearchQuery] = useState("");
-	const [events, setEvents] = useState<EventType[]>([]);
-	const [displayedEvents, setDisplayedEvents] = useState<EventType[]>([]);
-
-	useEffect(() => {
-		async function fetchEvents() {
-			try {
-				const response = await axios.get("http://localhost:4000/api/events/");
-				setEvents(response.data);
-				setDisplayedEvents(response.data);
-			} catch (error) {
-				console.error("Error fetching event data", error);
-			}
-		}
-		fetchEvents();
-	}, []);
-
-	const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const query = e.target.value.toLowerCase();
-		setSearchQuery(query);
-
-		// Filter events based on the search query
-		const filteredEvents = events.filter((event) => event.name.toLowerCase().includes(query));
-		setDisplayedEvents(filteredEvents);
-	};
-
 	return (
 		<>
-			<Navbar />
-
-			<div className="max-w-screen h-auto bg-light-pink py-8 px-4 sm:px-8">
-				<div className="w-full h-auto mb-10 flex flex-col">
-					<div className="flex justify-between items-center">
-						<h1
-							className="text-3xl sm:text-4xl md:text-5xl font-bold font-raleway text-brown"
-							data-testid="eventsTitle"
-						>
-							Events
-						</h1>
-
-						<div className="items-end">
-							<img className="h-16 sm:h-20 md:h-24" src={cupcake} alt="Cupcake" />
-						</div>
-					</div>
-
-					<div className="w-full flex justify-center">
-						<input
-							type="text"
-							className="w-full h-12 py-2 border border-gray-300 bg-slate-50 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink px-4 sm:px-5"
-							placeholder="Search Events..."
-							value={searchQuery}
-							onChange={handleSearchChange}
-						/>
-					</div>
-				</div>
-
-				<div className="w-full h-auto flex flex-wrap justify-center gap-6">
-					{displayedEvents.length > 0 ? (
-						displayedEvents.map((event, index) => (
-							<div key={index} className="flex justify-center">
-								<EventCard event={event} />
-							</div>
-						))
-					) : (
-						<p className="text-2xl sm:text-3xl text-black font-bold">
-							Sorry, no events found for "{searchQuery}"
-						</p>
-					)}
-				</div>
-			</div>
-
-			<Footer />
+			<h1>Events Page</h1>
 		</>
 	);
 }
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index f155167..376a0dc 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -2,7 +2,6 @@ import { NavLink } from "react-router-dom";
 import uadslogo from "../assets/uads_logo_brown.svg";
 import creamcup from "../assets/cupcake.svg";
 import sundae from "../assets/sundae.svg";
-import EventCard from "../components/EventCard";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Socials from "../components/Socials";
@@ -17,164 +16,196 @@ import { useEffect, useState } from "react";
 import { EventType, SponsorType } from "../utils/FrontendTypes";
 
 export default function Home() {
-	const [events, setEvents] = useState<EventType[]>([]);
-	const [sponsors, setSponsors] = useState<SponsorType[]>([]);
+  const [events, setEvents] = useState<EventType[]>([]);
+  const [sponsors, setSponsors] = useState<SponsorType[]>([]);
 
-	useEffect(() => {
-		async function fetchEvents() {
-			try {
-				const response = await axios.get("http://localhost:4000/api/events/");
-				setEvents(response.data);
-			} catch (error) {
-				console.error("Error fetching event data", error);
-			}
-		}
-		async function fetchSponsors() {
-			try {
-				const response = await axios.get("http://localhost:4000/api/sponsors/");
-				setSponsors(response.data);
-			} catch (error) {
-				console.error("Error fetching sponsor data", error);
-			}
-		}
+  useEffect(() => {
+    async function fetchEvents() {
+      try {
+        const response = await axios.get("http://localhost:4000/api/events/");
+        setEvents(response.data);
+      } catch (error) {
+        console.error("Error fetching event data", error);
+      }
+    }
+    async function fetchSponsors() {
+      try {
+        const response = await axios.get("http://localhost:4000/api/sponsors/");
+        setSponsors(response.data);
+      } catch (error) {
+        console.error("Error fetching sponsor data", error);
+      }
+    }
 
-		fetchSponsors();
-		fetchEvents();
-	}, []);
+    fetchSponsors();
+    fetchEvents();
+  }, []);
 
-	return (
-		<>
-			<Navbar />
+  return (
+    <>
+      <Navbar />
 
-			<div className="max-w-screen bg-light-pink px-5 lg:px-10">
-				<div className="w-full flex flex-col md:flex-row justify-between items-center">
-					<img src={sundae} alt="Sundae Image" className="hidden md:block transform -rotate-12 opacity-50" />
-					<div className="w-full h-auto flex flex-col justify-center items-center font-bold font-raleway text-center py-10 md:py-20">
-						<img src={uadslogo} alt="UADS Logo" className="w-96" />
-						<h3 className="text-3xl text-brown">University of Auckland</h3>
-						<h1 className="text-7xl text-brown">Dessert Society</h1>
-						<br />
-						<h3 className="text-3xl text-pink">Where dessert lovers go to celebrate the art of eating and making desserts</h3>
-						<br />
-						<Socials background="bg-brown" hoverBackground="bg-pink" iconColor="text-light-pink" hoverIconColor="text-white" />
-					</div>
-					<img src={creamcup} alt="Cupcake Image" className="transform hidden md:block rotate-12 opacity-50" />
-				</div>
-			</div>
+      <div className="max-w-screen bg-light-pink px-5 lg:px-10">
+        <div className="w-full flex flex-col md:flex-row justify-between items-center">
+          <img
+            src={sundae}
+            alt="Sundae Image"
+            className="hidden md:block transform -rotate-12 opacity-50"
+          />
+          <div className="w-full h-auto flex flex-col justify-center items-center font-bold font-raleway text-center py-10 md:py-20">
+            <img src={uadslogo} alt="UADS Logo" className="w-96" />
+            <h3 className="text-3xl text-brown">University of Auckland</h3>
+            <h1 className="text-7xl text-brown">Dessert Society</h1>
+            <br />
+            <h3 className="text-3xl text-pink">
+              Where dessert lovers go to celebrate the art of eating and making desserts
+            </h3>
+            <br />
+            <Socials
+              background="bg-brown"
+              hoverBackground="bg-pink"
+              iconColor="text-light-pink"
+              hoverIconColor="text-white"
+            />
+          </div>
+          <img
+            src={creamcup}
+            alt="Cupcake Image"
+            className="transform hidden md:block rotate-12 opacity-50"
+          />
+        </div>
+      </div>
 
-			<div className="max-w-screen h-auto flex flex-col items-center py-4 px-5 md:px-10 lg:px-40 bg-pink">
-				<h1 className="text-4xl text-light-pink font-bold font-raleway text-center">Supported by our Sponsors</h1>
+      <div className="max-w-screen h-auto flex flex-col items-center py-4 px-5 md:px-10 lg:px-40 bg-pink">
+        <h1 className="text-4xl text-light-pink font-bold font-raleway text-center">
+          Supported by our Sponsors
+        </h1>
 
-				<div className="w-full h-auto mb-5">
-					<Swiper
-						slidesPerView={1}
-						spaceBetween={100}
-						loop={true}
-						centeredSlides={true}
-						pagination={{
-							clickable: true,
-						}}
-						autoplay={{
-							delay: 3000,
-							disableOnInteraction: false,
-						}}
-						modules={[Autoplay, Pagination]}
-						breakpoints={{
-							640: {
-								slidesPerView: 2,
-								spaceBetween: 250,
-							},
-							768: {
-								slidesPerView: 2,
-								spaceBetween: 200,
-							},
-							1024: {
-								slidesPerView: 2,
-								spaceBetween: 200,
-							},
-							1280: {
-								slidesPerView: 3,
-								spaceBetween: 300,
-							},
-						}}
-						className="mySwiper px-0 md:px-10 py-10"
-					>
-						{sponsors.map((sponsor, index) => {
-							return (
-								<SwiperSlide key={index}>
-									<SponsorCard sponsor={sponsor} />
-								</SwiperSlide>
-							);
-						})}
-					</Swiper>
-				</div>
+        <div className="w-full h-auto mb-5">
+          <Swiper
+            slidesPerView={1}
+            spaceBetween={100}
+            loop={true}
+            centeredSlides={true}
+            pagination={{
+              clickable: true,
+            }}
+            autoplay={{
+              delay: 3000,
+              disableOnInteraction: false,
+            }}
+            modules={[Autoplay, Pagination]}
+            breakpoints={{
+              640: {
+                slidesPerView: 2,
+                spaceBetween: 250,
+              },
+              768: {
+                slidesPerView: 2,
+                spaceBetween: 200,
+              },
+              1024: {
+                slidesPerView: 2,
+                spaceBetween: 200,
+              },
+              1280: {
+                slidesPerView: 3,
+                spaceBetween: 300,
+              },
+            }}
+            className="mySwiper px-0 md:px-10 py-10"
+          >
+            {sponsors.map((sponsor, index) => {
+              return (
+                <SwiperSlide key={index}>
+                  <SponsorCard sponsor={sponsor} />
+                </SwiperSlide>
+              );
+            })}
+          </Swiper>
+        </div>
 
-				<NavLink to="/sponsors" className="group flex justify-center items-center bg-light-pink hover:bg-brown py-2 px-5 rounded-xl">
-					<p className="text-2xl text-brown font-bold font-raleway group-hover:text-light-pink">See More Sponsors</p>
-				</NavLink>
-			</div>
+        <NavLink
+          to="/sponsors"
+          className="group flex justify-center items-center bg-light-pink hover:bg-brown py-2 px-5 rounded-xl"
+        >
+          <p className="text-2xl text-brown font-bold font-raleway group-hover:text-light-pink">
+            See More Sponsors
+          </p>
+        </NavLink>
+      </div>
 
-			<div className="max-w-screen h-auto flex flex-col items-center py-4 px-5 md:px-10 lg:px-40 bg-brown">
-				<h1 className="text-4xl text-light-pink font-bold font-raleway text-center">Our Exciting Events</h1>
+      <div className="max-w-screen h-auto flex flex-col items-center py-4 px-5 md:px-10 lg:px-40 bg-brown">
+        <h1 className="text-4xl text-light-pink font-bold font-raleway text-center">
+          Our Exciting Events
+        </h1>
 
-				<div className="w-full h-auto mb-5">
-					<Swiper
-						slidesPerView={1}
-						spaceBetween={100}
-						loop={true}
-						centeredSlides={true}
-						pagination={{
-							clickable: true,
-						}}
-						autoplay={{
-							delay: 3000,
-							disableOnInteraction: false,
-						}}
-						modules={[Autoplay, Pagination]}
-						breakpoints={{
-							640: {
-								slidesPerView: 2,
-								spaceBetween: 250,
-							},
-							768: {
-								slidesPerView: 2,
-								spaceBetween: 200,
-							},
-							1024: {
-								slidesPerView: 2,
-								spaceBetween: 200,
-							},
-							1280: {
-								slidesPerView: 3,
-								spaceBetween: 300,
-							},
-						}}
-						className="mySwiper px-0 md:px-10 py-10"
-					>
-						{events.map((event, index) => {
-							return (
-								<SwiperSlide key={index}>
-									<EventCard event={event} />
-								</SwiperSlide>
-							);
-						})}
-					</Swiper>
-				</div>
+        <div className="w-full h-auto mb-5">
+          <Swiper
+            slidesPerView={1}
+            spaceBetween={100}
+            loop={true}
+            centeredSlides={true}
+            pagination={{
+              clickable: true,
+            }}
+            autoplay={{
+              delay: 3000,
+              disableOnInteraction: false,
+            }}
+            modules={[Autoplay, Pagination]}
+            breakpoints={{
+              640: {
+                slidesPerView: 2,
+                spaceBetween: 250,
+              },
+              768: {
+                slidesPerView: 2,
+                spaceBetween: 200,
+              },
+              1024: {
+                slidesPerView: 2,
+                spaceBetween: 200,
+              },
+              1280: {
+                slidesPerView: 3,
+                spaceBetween: 300,
+              },
+            }}
+            className="mySwiper px-0 md:px-10 py-10"
+          >
+            {sponsors.map((sponsor, index) => {
+              return (
+                <SwiperSlide key={index}>
+                  <SponsorCard sponsor={sponsor} />
+                </SwiperSlide>
+              );
+            })}
+          </Swiper>
+        </div>
 
-				<NavLink to="/events" className="group flex justify-center items-center bg-light-pink hover:bg-pink py-2 px-5 rounded-xl">
-					<p className="text-2xl text-brown font-bold font-raleway group-hover:text-light-pink">See More Events</p>
-				</NavLink>
-			</div>
+        <NavLink
+          to="/events"
+          className="group flex justify-center items-center bg-light-pink hover:bg-pink py-2 px-5 rounded-xl"
+        >
+          <p className="text-2xl text-brown font-bold font-raleway group-hover:text-light-pink">
+            See More Events
+          </p>
+        </NavLink>
+      </div>
 
-			<div className="max-w-screen py-10 flex flex-col justify-center items-center bg-light-pink">
-				<h1 className="text-4xl text-brown font-bold font-raleway">Join UADS Today!</h1>
+      <div className="max-w-screen py-10 flex flex-col justify-center items-center bg-light-pink">
+        <h1 className="text-4xl text-brown font-bold font-raleway">Join UADS Today!</h1>
 
-				<NavLink to="/signup" className="flex justify-center items-center bg-pink hover:bg-brown py-2 px-16 my-5 rounded-xl">
-					<p className="text-2xl text-light-pink font-bold font-raleway">Join</p>
-				</NavLink>
-			</div>
+        <NavLink
+          to="/signup"
+          className="flex justify-center items-center bg-pink hover:bg-brown py-2 px-16 my-5 rounded-xl"
+        >
+          <p className="text-2xl text-light-pink font-bold font-raleway">Join</p>
+        </NavLink>
+      </div>
 
-			<Footer />
-		</>
-	);
+      <Footer />
+    </>
+  );
 }
diff --git a/web/src/pages/__tests__/Event.test.tsx b/web/src/pages/__tests__/Event.test.tsx
deleted file mode 100644
index bae6ce0..0000000
--- a/web/src/pages/__tests__/Event.test.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
-import "@testing-library/jest-dom";
-import Event from "../Event";
-import cupcake from "../../assets/cupcake.svg";
-//import eventBackground from "../../assets/event.jpg";
-
-/*
-const eventsData = [
-	{
-		name: "Meet and Greet",
-		date: "2024-01-02",
-		description: "Meet and Greet Description",
-		image: eventBackground,
-	},
-	{
-		name: "Event 2",
-		date: "2024-01-01",
-		description: "Event 2 Description",
-		image: eventBackground,
-	},
-];
-*/
-
-/*
- * Test suite to test if the elements in the Event Page are rendered correctly
- */
-describe("Event Page", () => {
-	beforeEach(() => {
-		render(
-			<MemoryRouter>
-				<Event />
-			</MemoryRouter>
-		);
-	});
-
-	it("Should render 'Events' section with correct title and image", () => {
-		const eventsTitle = screen.getByTestId("eventsTitle");
-		expect(eventsTitle).toBeInTheDocument();
-
-		const cupcakeImage = screen.getByAltText(/Cupcake/i);
-		expect(cupcakeImage).toBeInTheDocument();
-		expect(cupcakeImage).toHaveAttribute("src", cupcake);
-	});
-
-	/*
-	it("Should render event cards based on initial data", async () => {
-		await waitFor(
-			() => {
-				const eventTitle = screen.getByText("Meet and Greet");
-				expect(eventTitle).toBeInTheDocument();
-			},
-			{ timeout: 5000 }
-		);
-	});
-	*/
-
-	/*
-	it("Should filter events based on search query", async () => {
-		const searchInput = screen.getByPlaceholderText("Search Events...");
-		expect(searchInput).toBeInTheDocument();
-
-		// Simulate typing in the search input
-		// For example, search for "Meet"
-		fireEvent.change(searchInput, { target: { value: "Meet" } });
-
-		// Verify that only "Meet and Greet" event is displayed
-		await waitFor(
-			() => {
-				expect(screen.getByText("Meet and Greet")).toBeInTheDocument();
-				expect(screen.queryByText("Event 2")).not.toBeInTheDocument();
-			},
-			{ timeout: 5000 }
-		);
-	});
-	
-
-	it("Should display message when no events match the search query", () => {
-		const searchInput = screen.getByPlaceholderText("Search Events...");
-		expect(searchInput).toBeInTheDocument();
-
-		// Simulate typing in the search input
-		// For example, search for "asdf"
-		fireEvent.change(searchInput, { target: { value: "asdf" } });
-
-		// Verify that the "Sorry, no events found" message is displayed
-		expect(screen.getByText('Sorry, no events found for "asdf"')).toBeInTheDocument();
-	});
-	*/
-});