From 5a87588851123e9f2d84c6475aa6dae3e929a504 Mon Sep 17 00:00:00 2001
From: aldriebarcena <aldrievbarcena@gmail.com>
Date: Sun, 27 Oct 2024 15:32:01 -0700
Subject: [PATCH 1/2] Install React Query

---
 package-lock.json | 16 ++++++++--------
 package.json      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 278a499..275e320 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "acm-ucr-static-website",
       "version": "0.1.0",
       "dependencies": {
-        "@tanstack/react-query": "^5.53.3",
+        "@tanstack/react-query": "^5.59.16",
         "lucide-react": "^0.417.0",
         "next": "^14.2.10",
         "react": "^18.3.1",
@@ -674,20 +674,20 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.0.tgz",
-      "integrity": "sha512-WGD8uIhX6/deH/tkZqPNcRyAhDUqs729bWKoByYHSogcshXfFbppOdTER5+qY7mFvu8KEFJwT0nxr8RfPTVh0Q==",
+      "version": "5.59.16",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.16.tgz",
+      "integrity": "sha512-crHn+G3ltqb5JG0oUv6q+PMz1m1YkjpASrXTU+sYWW9pLk0t2GybUHNRqYPZWhxgjPaVGC4yp92gSFEJgYEsPw==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.59.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.0.tgz",
-      "integrity": "sha512-YDXp3OORbYR+8HNQx+lf4F73NoiCmCcSvZvgxE29OifmQFk0sBlO26NWLHpcNERo92tVk3w+JQ53/vkcRUY1hA==",
+      "version": "5.59.16",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.16.tgz",
+      "integrity": "sha512-MuyWheG47h6ERd4PKQ6V8gDyBu3ThNG22e1fRVwvq6ap3EqsFhyuxCAwhNP/03m/mLg+DAb0upgbPaX6VB+CkQ==",
       "dependencies": {
-        "@tanstack/query-core": "5.59.0"
+        "@tanstack/query-core": "5.59.16"
       },
       "funding": {
         "type": "github",
diff --git a/package.json b/package.json
index fb11bf2..5ca102c 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.53.3",
+    "@tanstack/react-query": "^5.59.16",
     "lucide-react": "^0.417.0",
     "next": "^14.2.10",
     "react": "^18.3.1",

From 29f42c05c97a27a35752807ce4c48a7056758c84 Mon Sep 17 00:00:00 2001
From: aldriebarcena <aldrievbarcena@gmail.com>
Date: Sun, 27 Oct 2024 16:34:45 -0700
Subject: [PATCH 2/2] Implement events functionality

---
 src/components/events/Events.tsx | 84 ++++++++++++++++++++++----------
 1 file changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
index bd2d593..e1445fd 100644
--- a/src/components/events/Events.tsx
+++ b/src/components/events/Events.tsx
@@ -1,3 +1,5 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
 import Event from "@/components/events/Event";
 
 type EventProps = {
@@ -8,38 +10,66 @@ type EventProps = {
   side: "left" | "right";
 };
 
-const eventData: EventProps[] = [
-  {
-    name: "Event Name 1",
-    description:
-      "small description small description, small description, small description",
-    location: "Location Here",
-    time: "Time",
-    side: "left",
-  },
-  {
-    name: "Event Name 2",
-    description:
-      "small description, small description, small description, small description",
-    location: "Location 2 Here",
-    time: "Time",
-    side: "right",
-  },
-  {
-    name: "Event Name 3",
-    description:
-      "small description, small description, small description, small description",
-    location: "Location 3 Here",
-    time: "Time",
-    side: "left",
-  },
-];
+type ApiEvent = {
+  summary?: string;
+  description?: string;
+  location?: string;
+  start: {
+    dateTime?: string;
+    date?: string;
+  };
+  end: {
+    dateTime?: string;
+    date?: string;
+  };
+};
+
+const fetchEvents = async (): Promise<EventProps[]> => {
+  const response = await fetch(
+    `https://www.googleapis.com/calendar/v3/calendars/${
+      process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_EMAIL
+    }/events?key=${process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_API_KEY}
+    &singleEvents=true&orderBy=startTime&timeMin=${new Date().toISOString()}`,
+  );
+
+  if (!response.ok) {
+    throw new Error("Error fetching events");
+  }
+
+  const data = await response.json();
+
+  return (data.items || [])
+    .map((item: ApiEvent, index: number) => ({
+      name: item.summary || "Unnamed Event",
+      description: item.description || "No description available.",
+      location: item.location || "No location specified.",
+      time: item.start.dateTime
+        ? new Date(item.start.dateTime).toLocaleString()
+        : item.start.date
+          ? new Date(item.start.date).toLocaleString()
+          : "No time available",
+      side: index % 2 === 0 ? "left" : "right",
+    }))
+    .slice(0, 3);
+};
 
 const Events = () => {
+  const {
+    data: events = [],
+    error,
+    isLoading,
+  } = useQuery<EventProps[], Error>({
+    queryKey: ["events"],
+    queryFn: fetchEvents,
+  });
+
+  if (isLoading) return <p>Loading events...</p>;
+  if (error) return <p>Error fetching events: {error.message}</p>;
+
   return (
     <div className="flex w-full flex-col font-anek-telegu text-3xl">
       <div className="mt-8">
-        {eventData.map((event, index) => (
+        {events.map((event, index) => (
           <Event key={index} {...event} />
         ))}
       </div>