diff --git a/src/components/react/Event.jsx b/src/components/react/Event.jsx new file mode 100644 index 0000000..437153f --- /dev/null +++ b/src/components/react/Event.jsx @@ -0,0 +1,35 @@ +// Event.jsx +import React from "react"; +function stripHtml(html) { + return html.replace(/<\/?[^>]+(>|$)/g, ""); +} +const Event = ({ + index, + name, + description, + location, + start, + end, + month, + day, + year, +}) => { + return ( +
+

{name}

+ +
+ {description + ? stripHtml(description) + : "No description provided."} +
+
+ ); +}; + +export default Event; diff --git a/src/components/react/EventList.jsx b/src/components/react/EventList.jsx new file mode 100644 index 0000000..903ac4c --- /dev/null +++ b/src/components/react/EventList.jsx @@ -0,0 +1,176 @@ +import React, { useEffect, useState } from "react"; +import ReactDOM from "react-dom"; +import Event from "./Event"; // Adjust the import path as necessary + +const EventList = ({ CALENDAR_API_KEY }) => { + const [events, setEvents] = useState([]); // Use an array to store multiple events + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const apiKey = CALENDAR_API_KEY; + const calendarId = + "666sh64sku5n29qv2a2f4598jc@group.calendar.google.com"; + const userTimeZone = "America/Los_Angeles"; + + const loadGapiAndListEvents = () => { + return new Promise((resolve, reject) => { + if (typeof window.gapi === "undefined") { + const script = document.createElement("script"); + script.src = "https://apis.google.com/js/api.js"; + document.body.appendChild(script); + script.onload = () => { + window.gapi.load("client", resolve); + }; + script.onerror = (error) => { + reject( + new Error("Failed to load the Google API script.") + ); + }; + } else { + window.gapi.load("client", resolve); + } + }) + .then(() => { + return gapi.client.init({ + apiKey: apiKey, + discoveryDocs: [ + "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest", + ], + }); + }) + .then(() => { + return gapi.client.calendar.events.list({ + calendarId: calendarId, + timeZone: userTimeZone, + singleEvents: true, + timeMin: new Date().toISOString(), + maxResults: 10, + orderBy: "startTime", + }); + }) + .then((response) => { + if ( + response.result.items && + response.result.items.length > 0 + ) { + setEvents(response.result.items); + } else { + setError("No upcoming events found."); + } + }) + .catch((error) => { + console.error("Error: ", error.message); + setError(error.message); + }); + }; + + setLoading(true); + loadGapiAndListEvents().finally(() => { + setLoading(false); + }); + }, []); + if (events.length === 0) { + return ( +
+
+
+
+
+

+ Upcoming Events +

+ + Scroll down to see the upcoming events for + IEEE! + +
+
+ +
+
+
+

+ No Upcoming Events! +

+ +
+
+ There are no upcoming events! Check + back again soon :) +
+
+ ...or just wait for the entire page + to load. This is here by default LOL +
+
+
+
+
+
+
+
+ ); + } + return ( +
+
+
+
+
+

+ Upcoming Events +

+ + Scroll down to see the upcoming events for IEEE! + +
+
+ +
+
+ {events.map((event, index) => { + const startDate = moment(event.start.dateTime); + const month = startDate.format("MMMM"); + const day = startDate.format("D"); + const year = startDate.format("YYYY"); + + const startsAt = + startDate.format("L") + + " " + + startDate.format("LT"); + const endsAt = moment( + event.end.dateTime + ).format("LT"); + + return ( + + ); + })} +
+
+
+
+
+ ); +}; + +export default EventList; diff --git a/src/pages/events.astro b/src/pages/events.astro new file mode 100644 index 0000000..e286648 --- /dev/null +++ b/src/pages/events.astro @@ -0,0 +1,15 @@ +--- +import EventList from "../components/react/EventList.jsx"; +import Layout from "../layouts/Layout.astro"; +const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY; +--- + + +
+ Here is our timeline for the IEEE UCSD events: +
+ + +