Events Section (#31)

* Set up structure for homepage

* Added landing card and restructured

* Added starter code for components

* Fixed the scroll for arrow icon + updated components template code

* Fixing yarn stuff

* Team cards added to homepage

* Made page responsive and minor fixes

* Fixed errors for Alexis changes

* Dark mode isn't set up yet

* Fixed index key error during vercel build (#25)

Co-authored-by: avVergnet <[email protected]>

* Minor cleanup

* Improved flexbox

* Accidentally deleted the wrong code

* Title doesn't move with typewriter

* Created events card

* Fixed bug with layout in safari

* Smoother for mobile/tablet

* Added photos and changed styling for event card

* Last bit of styling

* Remove react for now

---------

Co-authored-by: avVergnet <[email protected]>
Co-authored-by: AVERGNET <[email protected]>

pages/index.mdx

@@ -1,2 +1,22 @@
 import HomePage from '../src/homepage';
-export default HomePage;
+import { useSSG } from 'nextra/ssg';
+import { getAllHackEvents, getHackEvent } from '../src/api/events_api';
+
+export async function getStaticProps() {
+  const uuids = ["1668587f-5816-45cc-8b5e-1a4825dff9e4", "2ba9e5ed-614e-4c19-9d7c-ab2cfd57e140", "73fc61ef-b3db-46c4-a5bf-71aba152e2f6", "3b922d84-9c57-4f2a-9e76-19e4e9130fe2", "6124d23b-ab77-481f-9248-920565ac07f3", "fdd1c33f-f31b-4421-abc9-0887158147cc"]
+  const promises = uuids.map(uuid => getHackEvent(uuid))
+  const past_events = await Promise.all(promises);
+  const future_events = await getAllHackEvents('future');
+
+  return {
+    props: {
+        ssg: {
+            past_events: past_events || [],
+            future_events: future_events || []
+        }
+    },
+    revalidate: 1 * 60 * 60, // once every hour (in seconds)
+  };
+}
+
+<HomePage past_events={useSSG().past_events} future_Events={useSSG().future_events} />

src/api/events_api.tsx

@@ -0,0 +1,66 @@
+// Modified from https://github.com/acmucsd/main-website/blob/main/src/api/EventsAPI.ts
+const EVENT_API = 'https://api.acmucsd.com/api/v2/event';
+
+export type EventObject = {
+  uuid: string;
+  organization: string;
+  committee: string;
+  cover: string;
+  title: string;
+  description: string;
+  location: string;
+  eventLink?: string;
+  start: string;
+  end: string;
+  pointValue: number;
+  requiresStaff: boolean;
+  staffPointBonus: number;
+};
+
+export type EventsArray = EventObject[];
+
+export type EventsResponse = {
+  error: unknown;
+  events: EventsArray;
+};
+
+export type EventResponse = {
+  error: unknown;
+  event: EventObject;
+};
+
+const handleErrors = (response: Response) => {
+  if (!response.ok) {
+    throw Error(response.statusText);
+  }
+  return response.json();
+};
+
+const getAllHackEvents = async (
+  type: 'past' | 'future' | '' = ''
+): Promise<EventsArray | undefined> => {
+  const api_url = `${EVENT_API}/${type}`;
+
+  try {
+    const response: Response = await fetch(api_url);
+    const result: EventsResponse = await handleErrors(response);
+    const filteredEvents = result.events.filter(event => event.committee === 'Hack');
+    return filteredEvents;
+  } catch (error) {
+    return undefined;
+  }
+};
+
+const getHackEvent = async (uuid: string): Promise<EventObject | undefined> => {
+  const api_url = `${EVENT_API}/${uuid}`;
+
+  try {
+    const response: any = await fetch(api_url);
+    const result: EventResponse = await handleErrors(response);
+    return result.event;
+  } catch (error) {
+    return undefined;
+  }
+};
+
+export { getAllHackEvents, getHackEvent };

src/components/event-card/index.tsx

@@ -1,7 +1,52 @@
 import styles from './style.module.css';
+import { EventObject } from '../../api/events_api';
 
-const EventsCard: React.FC = () => {
-  return <h3>Event Card</h3>;
+const EventsCard: React.FC<{ event: EventObject }> = ({ event }) => {
+  const months = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'June',
+    'July',
+    'Aug',
+    'Sept',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+  const days = ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'];
+  const date = new Date(event.start).getDate();
+  const month = months[new Date(event.start).getMonth()];
+  const day = days[new Date(event.start).getDay()];
+  const year = new Date(event.start).getFullYear();
+  const { uuid, title, cover, location } = event;
+  const formatTitle = (title: string): string => {
+    return encodeURIComponent(title.toLowerCase().trim().replace(/ /g, '-'));
+  };
+  return (
+    <div className={styles.container}>
+      <a href={`https://acmucsd.com/events/${formatTitle(title)}-${uuid}`} target="_blank">
+        <div className={styles.card}>
+          <div className={styles.card_header}>
+            <h1 className={styles.card_date}>
+              <b>{month} </b>
+              {date} {year}
+            </h1>
+            <h2 className={styles.card_day}>{day}</h2>
+          </div>
+          <div className={styles.card_cover}>
+            <img className={styles.card_image} src={cover} alt="Event cover" />
+          </div>
+          <div className={styles.card_info}>
+            <h3 className={styles.card_title}>{title}</h3>
+            <h3 className={styles.card_location}>{location}</h3>
+          </div>
+        </div>
+      </a>
+    </div>
+  );
 };
 
 export default EventsCard;

src/components/event-card/style.module.css

@@ -0,0 +1,38 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border: 2px solid #333;
+    border-radius: 20px;
+    position: relative;
+    padding: 1rem;
+    cursor: pointer;
+}
+
+.card_header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+}
+
+.card_cover {
+    flex-grow: 1;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.card_image {
+    border-radius: 20px;
+}
+
+.card_title {
+    color: var(--docs-accent-color) !important;
+}
+
+.card_day {
+    font-size: 1rem;
+}

src/homepage.tsx

@@ -5,12 +5,17 @@ import About from './sections/About';
 import Events from './sections/Events';
 import Team from './sections/Team';
 
-const HomePage: NextPage = () => {
+import { EventsArray } from './api/events_api';
+
+const HomePage: NextPage<{ past_events: EventsArray; future_events: EventsArray }> = ({
+  past_events,
+  future_events,
+}) => {
   return (
     <main>
       <Hero />
       <About />
-      <Events />
+      <Events past_events={past_events} future_events={future_events} />
       <Team />
     </main>
   );

src/sections/Events/index.tsx

@@ -1,7 +1,48 @@
+import { useState } from 'react';
 import styles from './style.module.css';
+import EventsCard from '../../components/event-card';
+import { EventsArray } from '../../api/events_api';
 
-const Events: React.FC = () => {
-  return <h3 className={styles.events}>Event Section</h3>;
+const Events: React.FC<{ past_events: EventsArray; future_events: EventsArray }> = ({
+  past_events,
+  future_events,
+}) => {
+  const [selectedOption, setSelectedOption] = useState('Upcoming'); // State to store the selected option
+  const [filteredEvents, setFilteredEvents] = useState(future_events);
+
+  // Function to handle option change
+  const handleOptionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = event.target.value;
+    setSelectedOption(selected);
+
+    // Set filtered events based on the selected option
+    if (selected === 'Upcoming') {
+      setFilteredEvents(future_events);
+    } else if (selected === 'Past') {
+      setFilteredEvents(past_events);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>Events</h1>
+        <div className={styles.event_type}>
+          <select onChange={handleOptionChange} value={selectedOption}>
+            <option value="Upcoming">Upcoming</option>
+            <option value="Past">Past</option>
+          </select>
+        </div>
+      </div>
+      <div className={styles.events}>
+        {!filteredEvents ? (
+          <h3>No upcoming events. Check again later!</h3>
+        ) : (
+          filteredEvents.map(event => <EventsCard key={event.uuid} event={event} />)
+        )}
+      </div>
+    </div>
+  );
 };
 
 export default Events;

src/sections/Events/style.module.css

@@ -1,9 +1,31 @@
-.events {
+.container {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
     align-items: center;
-    width: 100%;
-    height: 30vh;
-    max-height: 100vh;
-    border-bottom: 1px solid black;
+}
+.events {
+    display: grid;
+    margin: 0 auto;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    row-gap: 2rem;
+    column-gap: 2rem; 
+    max-width: 90%;
+    text-align: center;
+}
+
+.header {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    font-weight: 700;
+}
+
+.title {
+    font-size: 2rem;
+}
+
+.event_type {
+    margin-top: 1rem;
+    border: 2px solid;
+    border-radius: 4px;
 }

src/sections/Hero/style.module.css

@@ -7,6 +7,7 @@
     background-color: var(--docs-accent-color);
     color: #fff;
     overflow: hidden;
+    transition: all 0.5s ease-in-out;
 }
 
 .backdrop {
@@ -24,6 +25,7 @@
 .backdrop_left, .backdrop_right {
     object-fit: contain;
     width: 100%;
+    height: 100%;
 }
 
 /* Landing Card Text */
@@ -43,6 +45,7 @@
 /* Landing Card Scroll Down */
 
 .arrow {
+    margin-top: auto;
     margin-bottom: 1em;
     text-align: center;
     font-size: 1.5em;
@@ -67,11 +70,13 @@
     }
     .backdrop {
         grid-template-columns: minmax(18em, 1fr);
+        grid-template-rows: minmax(0, 0.7fr);
         max-width: 95%;
     }
     .backdrop_left{
         justify-self: center;
-        width: 70%;
+        max-width: 70%;
+        max-height: 100%;
     }
     .backdrop_right {
         display: none;
@@ -86,10 +91,11 @@
 @media screen and (min-device-width : 768px) and (max-device-width : 1024px) {
     .backdrop {
         grid-template-columns: 1fr 2fr;
+        grid-template-rows: 1fr;
         max-width: 95%;
     }
     .backdrop_left{
-        width: 100%;
+        max-width: 100%;
     }
     .backdrop_right {
         display: none;
@@ -116,4 +122,4 @@ html[class~='dark'] .landing_title {
 
 html[class~='dark'] .arrow {
     filter: brightness(85%);
-}
+}