Implement Event fetch thunk

langaracpsc · Dec 29, 2023 · a1b1d79 · a1b1d79
1 parent d3856e2
commit a1b1d79
Show file tree

Hide file tree

Showing 8 changed files with 2,949 additions and 14 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -5,7 +5,11 @@ const nextConfig = {
   },
   env: {
     APIURL: process.env.APIURL,
-    APIKEY: process.env.APIKEY
+    APIKEY: process.env.APIKEY,
+    CALENDAR_API_KEY: process.env.CALENDAR_API_KEY,
+    CALENDAR_ID: process.env.CALENDAR_ID,
+    CALENDAR_BASE_URL: process.env.CALENDAR_BASE_URL,
+    CALENDAR_OAUTH_KEY: process.env.CALENDAR_OAUTH_KEY
   }, 
   images: {
     remotePatterns: [

diff --git a/frontend/package.json b/frontend/package.json
@@ -16,6 +16,7 @@
     "autoprefixer": "10.4.14",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
+    "googleapis": "^129.0.0",
     "next": "13.3.1",
     "postcss": "8.4.23",
     "react": "18.2.0",

diff --git a/frontend/src/app/NavBar.tsx b/frontend/src/app/NavBar.tsx
@@ -48,7 +48,7 @@ export default function NavBar({ Pages } : NavBarProps)
     const navButtons: Array<JSX.Element> = new Array<JSX.Element>();
 
     Pages.forEach((value, key, pageMap) => {
-        navButtons.push(<NavButton Label={key} Activated={currentPage == value} EndPoint={value} OnClick={onClickHandler}/>);
+        navButtons.push(<NavButton Label={key} key={key} Activated={currentPage == value} EndPoint={value} OnClick={onClickHandler}/>);
     }); 
 
     return (

diff --git a/frontend/src/app/events/Event.tsx b/frontend/src/app/events/Event.tsx
@@ -7,15 +7,14 @@ interface EventProps
     Event: CalendarEvent;
 }
 
-
 export default function EventInstance({Event} : EventProps)
 {
     const getTimeStamp = (time: Date) => time.toTimeString().split(' ')[0];
 
     return (<>
         <div className="flex flex-row bg-[#272626] h-[20vh] w-[50vw] max-[600px]:w-[90vw] rounded-lg items-center">
             <div className={"basis-1/6 self-center m-5"}>
-                <Image loader={({ src } ) => Event.Image} src={Event.Image} height={100} width={130} className={"rounded"}/>
+                <Image alt={"event-image"} loader={({ src } ) => Event.Image} src={Event.Image} height={100} width={130} className={"rounded"}/>
             </div>
             <div className={"flex flex-col self-start mt-2 gap-3"}>
                 <div className={"text-xl font-bold"}>{Event.Title}</div>

diff --git a/frontend/src/app/events/Events.tsx b/frontend/src/app/events/Events.tsx
@@ -1,16 +1,16 @@
+import { CalendarEvent } from "../slices/eventSlice";
 import EventInstance from "./Event";
 
+interface EventsProps
+{
+    Events: CalendarEvent[];
+}
 
-export default function Events()
+export default function Events({Events} : EventsProps)
 {
     return (<div className={"flex flex-col w-full max-[600px]:flex-col flex-wrap items-center gap-5"}>
-            <EventInstance Event={{
-                Title: "Board Games Social",
-                Start:  new Date(),
-                End: new Date(Date.now() + 100000000),
-                Description: "Event description",
-                Location: "T001", 
-                Image: "https://langaracpsc.github.io/assets/social.png"
-            }}/>
+            {
+                Events.map(event => <EventInstance Event={event}/>)
+            }
         </div>);
 }
diff --git a/frontend/src/app/events/EventsPage.tsx b/frontend/src/app/events/EventsPage.tsx
@@ -1,19 +1,32 @@
+import { useEffect, useState } from "react";
 import { useAppDispatch } from "../hooks/hooks";
 import { SetCurrentPage } from "../slices/pageSlice";
 import Events from "./Events";
+import { fetchEventsAsync } from "../thunks/EventThunks";
+import { AppDispatch } from "../stores/store";
+import { CalendarEvent } from "../slices/eventSlice";
 
 export default function EventsPage()
 {
     const mainDispatch = useAppDispatch();
 
     mainDispatch(SetCurrentPage("/events"));
 
+    const [events, setEvents] = useState(new Array<CalendarEvent>()); 
+
+    useEffect(() => {
+        (async () => {
+            setEvents((await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[]); 
+            console.log(events);
+        })();
+    }); 
+
     return (<>
         <div className={"flex flex-col h-[100vh] max-[600px]: h-[90vh] bg-body-gray items-center grow"}>
             <div className="flex flex-col mt-10">
                 <div className={"text-[36px] font-bold"}>EVENTS</div>
             </div>
-            <div className="mt-10"><Events/></div>
+            <div className="mt-10"><Events Events={events}/></div>
         </div>
     </>);
 } 
diff --git a/frontend/src/app/thunks/EventThunks.ts b/frontend/src/app/thunks/EventThunks.ts
@@ -0,0 +1,25 @@
+import { CalendarEvent } from "../slices/eventSlice";
+import { AppDispatch, RootState } from "../stores/store";
+
+export const fetchEventsAsync = () => async (state: RootState, dispatch: AppDispatch) => {
+    const response = await (await (fetch(`https://${process.env.CALENDAR_BASE_URL}/calendars/${process.env.CALENDER_ID}&key=${process.env.CALENDAR_API_KEY}`, 
+                                            {
+                                                method: "GET",
+                                                headers: {
+                                                    "Authorization": `Bearer ${process.env.CALENDAR_OAUTH_TOKEN}`
+                                                } 
+                                            }))).json();
+
+    console.log(response);
+
+    return response["items"].map((item: any) => { 
+        return {
+            Title: item.summary,
+            Start: new Date(item.start.dateTime),
+            End: new Date(item.end.dateTime),
+            Description: item.summary,
+            Location: "T001",
+            Image: "https://langaracpsc.github.io/assets/social.png" 
+        } as CalendarEvent;
+     });
+};