added upcoming events
This commit is contained in:
chark1es
parent
597cc76c99
commit
3b69f744e8
2 changed files with 187 additions and 38 deletions
170
src/components/events/EventList.jsx
Normal file
170
src/components/events/EventList.jsx
Normal file
|
|
@ -0,0 +1,170 @@
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
const UpcomingEvent = ({ name, location, date, time, delay, description }) => (
|
||||||
|
<div className="text-white w-[40vw] pl-[8%] border-l-[0.3vw] border-white/70 pb-[5%] relative">
|
||||||
|
<p
|
||||||
|
data-inview
|
||||||
|
className={`animate-duration-500 animate-delay-${delay * 200} in-view:animate-fade-left py-[0.2%] px-[2%] w-fit border-[0.1vw] font-light rounded-full text-[1.3vw]`}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
data-inview
|
||||||
|
className={`animate-duration-500 animate-delay-${delay * 200 + 100} in-view:animate-fade-left flex justify-between items-center min-w-[70%] w-fit text-[1.2vw] my-[2%]`}
|
||||||
|
>
|
||||||
|
<p>Location: {location}</p>
|
||||||
|
{date && (
|
||||||
|
<>
|
||||||
|
<div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
|
||||||
|
<p>{date}</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{time && (
|
||||||
|
<>
|
||||||
|
<div className="bg-white h-[0.5vw] w-[0.5vw] rounded-full mx-[0.5vw]" />
|
||||||
|
<p>{time}</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
data-inview
|
||||||
|
className={`animate-duration-500 animate-delay-${delay * 200 + 200} in-view:animate-fade-left text-[1vw] text-white/60`}
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
<div className="bg-ieee-yellow h-[1.2vw] w-[1.2vw] rounded-full absolute -top-[1.5%] -left-[2%]" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const EventList = ({ CALENDAR_API_KEY }) => {
|
||||||
|
const [events, setEvents] = useState([]);
|
||||||
|
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 = async () => {
|
||||||
|
try {
|
||||||
|
console.log("Starting to load events...");
|
||||||
|
|
||||||
|
if (typeof window.gapi === "undefined") {
|
||||||
|
console.log("Loading GAPI script...");
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.src = "https://apis.google.com/js/api.js";
|
||||||
|
document.body.appendChild(script);
|
||||||
|
script.onload = () => {
|
||||||
|
console.log("GAPI script loaded");
|
||||||
|
window.gapi.load("client", resolve);
|
||||||
|
};
|
||||||
|
script.onerror = () => {
|
||||||
|
console.error("Failed to load GAPI script");
|
||||||
|
reject(new Error("Failed to load the Google API script."));
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("Initializing GAPI client...");
|
||||||
|
await window.gapi.client.init({
|
||||||
|
apiKey: apiKey,
|
||||||
|
discoveryDocs: [
|
||||||
|
"https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("Fetching events...");
|
||||||
|
const response = await window.gapi.client.calendar.events.list({
|
||||||
|
calendarId: calendarId,
|
||||||
|
timeZone: userTimeZone,
|
||||||
|
singleEvents: true,
|
||||||
|
timeMin: new Date().toISOString(),
|
||||||
|
maxResults: 3,
|
||||||
|
orderBy: "startTime",
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("Response received:", response);
|
||||||
|
|
||||||
|
if (response.result.items) {
|
||||||
|
setEvents(response.result.items);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Detailed Error: ", error);
|
||||||
|
setError(error.message || "Failed to load events");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!CALENDAR_API_KEY) {
|
||||||
|
setError("API key is missing");
|
||||||
|
setLoading(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
loadGapiAndListEvents();
|
||||||
|
}, [CALENDAR_API_KEY]);
|
||||||
|
|
||||||
|
if (!CALENDAR_API_KEY) {
|
||||||
|
return (
|
||||||
|
<div className="text-white">
|
||||||
|
Error: Calendar API key is not configured
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{error && <p className="text-white">Error: {error}</p>}
|
||||||
|
{!loading && !error && events.length === 0 && (
|
||||||
|
<UpcomingEvent
|
||||||
|
name="No Upcoming Events!"
|
||||||
|
location="¯\_(ツ)_/¯"
|
||||||
|
date=""
|
||||||
|
time=""
|
||||||
|
delay={0}
|
||||||
|
description="There are no upcoming events! Check back again soon :)
|
||||||
|
...or just wait for the entire page to load. This is here by default LOL"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{!loading && !error && events.length > 0 && (
|
||||||
|
<div>
|
||||||
|
{events.map((event, index) => {
|
||||||
|
const startDate = new Date(
|
||||||
|
event.start.dateTime || event.start.date,
|
||||||
|
);
|
||||||
|
const day = startDate.toLocaleDateString("en-US", {
|
||||||
|
weekday: "short",
|
||||||
|
});
|
||||||
|
const date = startDate.toLocaleDateString("en-US", {
|
||||||
|
day: "numeric",
|
||||||
|
month: "short",
|
||||||
|
year: "numeric",
|
||||||
|
});
|
||||||
|
const time = startDate.toLocaleTimeString("en-US", {
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UpcomingEvent
|
||||||
|
key={index}
|
||||||
|
name={event.summary || "No Title"}
|
||||||
|
location={event.location || "No location provided"}
|
||||||
|
date={`${day} ${date}`}
|
||||||
|
time={time}
|
||||||
|
delay={index}
|
||||||
|
description={event.description || "No description available."}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EventList;
|
||||||
|
|
@ -1,45 +1,24 @@
|
||||||
---
|
---
|
||||||
import UpcomingEvent from "./UpcomingEvent.astro";
|
import UpcomingEvent from "./UpcomingEvent.astro";
|
||||||
import { LiaDotCircle } from "react-icons/lia";
|
import { LiaDotCircle } from "react-icons/lia";
|
||||||
|
import EventList from "./EventList.jsx";
|
||||||
|
const CALENDAR_API_KEY = import.meta.env.CALENDAR_API_KEY;
|
||||||
---
|
---
|
||||||
<div class="flex ml-[15%] my-[10%]">
|
|
||||||
<div class="w-1/4 text-white pr-[5%] mr-[10%]">
|
<div class="flex ml-[15%] my-[10%]">
|
||||||
<div class="w-[6vw] h-[0.3vw] bg-ieee-yellow rounded-full"/>
|
<div class="w-1/4 text-white pr-[5%] mr-[10%]">
|
||||||
<div class="flex items-center text-[2vw] font-bold my-[10%]">
|
<div class="w-[6vw] h-[0.3vw] bg-ieee-yellow rounded-full"></div>
|
||||||
<LiaDotCircle className=" mr-[1vw] text-[2.5vw]"/>
|
<div class="flex items-center text-[2vw] font-bold my-[10%]">
|
||||||
<p>
|
<LiaDotCircle className=" mr-[1vw] text-[2.5vw]" />
|
||||||
Upcoming <br/> Events
|
<p>
|
||||||
</p>
|
Upcoming <br /> Events
|
||||||
</div>
|
|
||||||
<p class="text-[1.3vw] font-light">
|
|
||||||
SCROLL DOWN TO SEE THE UPCOMING EVENTS FOR IEEE!
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<p class="text-[1.3vw] font-light">
|
||||||
<UpcomingEvent
|
SCROLL DOWN TO SEE THE UPCOMING EVENTS FOR IEEE!
|
||||||
name="Beach Social"
|
</p>
|
||||||
location="La Jolla Cove"
|
|
||||||
date="Tue 9 Jun 2024"
|
|
||||||
time="2 pm"
|
|
||||||
delay="0"
|
|
||||||
description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
|
|
||||||
/>
|
|
||||||
<UpcomingEvent
|
|
||||||
name="Beach Social"
|
|
||||||
location="La Jolla Cove"
|
|
||||||
date="Tue 9 Jun 2024"
|
|
||||||
time="2 pm"
|
|
||||||
delay="300"
|
|
||||||
description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
|
|
||||||
/>
|
|
||||||
<UpcomingEvent
|
|
||||||
name="Beach Social"
|
|
||||||
location="La Jolla Cove"
|
|
||||||
date="Tue 9 Jun 2024"
|
|
||||||
time="2 pm"
|
|
||||||
delay="700"
|
|
||||||
description="Cursus nec orci pulvinar convallis mollis a diam. Nostra aptent praesent suscipit nisl dignissim consequat. Semper malesuada pharetra fusce; elementum maximus"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<EventList client:load CALENDAR_API_KEY={CALENDAR_API_KEY} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue