Fixed build errors

langaracpsc · Dec 30, 2023 · 5708bdd · 5708bdd
1 parent 03926ce
commit 5708bdd
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 16 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -17,6 +17,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "langaracpsc.github.io",
         pathname: "/assets"
+      },
+      {
+        protocol: "https",
+        hostname: "via.placeholder.com"
       }
     ]
   }

diff --git a/frontend/src/app/HomePage.tsx b/frontend/src/app/HomePage.tsx
@@ -8,6 +8,8 @@ import { AddExecProfile, ExecProfileObject, selectProfile } from "./slices/execP
 import { AppDispatch, RootState } from "./stores/store";
 import { loadProfilesAsync } from "./thunks/ProfileThunks";
 import { UnknownAction } from "@reduxjs/toolkit";
+import { CalendarEvent, SetCalendarEvents, selectEvents } from "./slices/eventSlice";
+import { fetchEventsAsync } from "./thunks/EventThunks";
 
 let InstanceCount: number = 0;
 
@@ -28,8 +30,12 @@ export default function HomePage({} : HomePageProps)
 {
     const execProfiles = useAppSelector(selectProfile);
 
+    const events = useAppSelector(selectEvents);
+
     const mainDispatch = useAppDispatch();
+
 
+
     useEffect(() => {
         (async () => {
             if (execProfiles.length < 1)
@@ -43,6 +49,17 @@ export default function HomePage({} : HomePageProps)
         })();
     });
 
+    useEffect(() => {
+        (async () => {
+            if (events.length < 1) 
+            {
+                const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
+
+                mainDispatch(SetCalendarEvents(fetchedEvents));
+            }
+        })();
+    });
+
 
     let css: string = "", flexContainer: string = "flex flex-row max-[600px]:justify-center max-[600px]:mx-0 ml-[10%]";
 

diff --git a/frontend/src/app/events/Event.tsx b/frontend/src/app/events/Event.tsx
@@ -19,15 +19,15 @@ export default function EventInstance({Event} : EventProps)
             <div className={"flex flex-col self-start mt-2 gap-3"}>
                 <div className={"text-xl font-bold"}>{Event.Title}</div>
                 <IconLabel Label={Event.Start.toDateString()}>
-                    <svg fill="#ffffff" width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M19,4H17V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V12H20Zm0-9H4V7A1,1,0,0,1,5,6H7V7A1,1,0,0,0,9,7V6h6V7a1,1,0,0,0,2,0V6h2a1,1,0,0,1,1,1Z"></path></g></svg>
+                    <svg fill="#ffffff" width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M19,4H17V3a1,1,0,0,0-2,0V4H9V3A1,1,0,0,0,7,3V4H5A3,3,0,0,0,2,7V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm1,15a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V12H20Zm0-9H4V7A1,1,0,0,1,5,6H7V7A1,1,0,0,0,9,7V6h6V7a1,1,0,0,0,2,0V6h2a1,1,0,0,1,1,1Z"></path></g></svg>
                 </IconLabel>
 
                 <IconLabel Label={`${getTimeStamp(Event.Start)} - ${getTimeStamp(Event.End)}`}>
-                    <svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 7V12L14.5 10.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg> 
+                    <svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 7V12L14.5 10.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </g></svg> 
                 </IconLabel>
 
                 <IconLabel Label={Event.Location}>
-                    <svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+                    <svg width="32px" height="32px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" strokeWidth="0"></g><g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> <path d="M12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12Z" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path> </g></svg>
                 </IconLabel>
             </div>
         </div>

diff --git a/frontend/src/app/events/EventsPage.tsx b/frontend/src/app/events/EventsPage.tsx
@@ -1,31 +1,37 @@
 import { useEffect, useState } from "react";
-import { useAppDispatch } from "../hooks/hooks";
+import { useAppDispatch, useAppSelector } 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";
+import { CalendarEvent, SetCalendarEvents, selectEvents } from "../slices/eventSlice";
 
 export default function EventsPage()
 {
     const mainDispatch = useAppDispatch();
 
-    mainDispatch(SetCurrentPage("/events"));
+    const events = useAppSelector(selectEvents); 
 
-    const [events, setEvents] = useState(new Array<CalendarEvent>()); 
+    mainDispatch(SetCurrentPage("/events"));
 
     useEffect(() => {
         (async () => {
-            setEvents((await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[]); 
+            if (events.length < 1) 
+            {
+                const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
+
+                mainDispatch(SetCalendarEvents(fetchedEvents));
+            }
         })();
-    }); 
+    });
 
     return (<>
         <div className={"flex flex-col 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 Events={events}/></div>
+            <div className="mt-10"><Events Events={[...events]}/></div>
         </div>
     </>);
 } 
+
diff --git a/frontend/src/app/slices/eventSlice.ts b/frontend/src/app/slices/eventSlice.ts
@@ -31,11 +31,15 @@ const eventSlice = createSlice({
     reducers: {
         AddCalenderEvent: (state, action: PayloadAction<CalendarEvent>) => { 
                 return {...state, Events: [...state.Events, action.payload]};
-            }
+            },
+
+        SetCalendarEvents: (state, action: PayloadAction<CalendarEvent[]>) => {
+            return {Events: action.payload};            
+        }
     }
 });
 
-export const {AddCalenderEvent} = eventSlice.actions;
-export const selectCurrentPage = (state: RootState) => state.events.Events;
+export const {AddCalenderEvent, SetCalendarEvents} = eventSlice.actions;
+export const selectEvents = (state: RootState) => state.events.Events;
 export default eventSlice.reducer;
 
diff --git a/frontend/src/app/stores/store.ts b/frontend/src/app/stores/store.ts
@@ -8,7 +8,10 @@ export const store = configureStore({
         execProfiles: execProfileReducer,
         pages: pageReducer,
         events: eventsReducer
-    }
+    },
+    middleware: (getDefaultMiddlware) => getDefaultMiddlware({
+        serializableCheck: false // Allows putting date types in the store
+      })
 });
 
 export type RootState = ReturnType<typeof store.getState>;

diff --git a/frontend/src/app/thunks/EventThunks.ts b/frontend/src/app/thunks/EventThunks.ts
@@ -1,7 +1,7 @@
 import { CalendarEvent } from "../slices/eventSlice";
 import { AppDispatch, RootState } from "../stores/store";
 
-export const fetchEventsAsync = () => async (state: RootState, dispatch: AppDispatch) => {
+export const fetchEventsAsync = () => async (state: RootState, dispatch: AppDispatch): Promise<CalendarEvent[]> => {
     const response = await (await (fetch(`http://${process.env.APIURL}/Event/ListAll`, 
                                             {
                                                 method: "GET",
@@ -17,7 +17,7 @@ export const fetchEventsAsync = () => async (state: RootState, dispatch: AppDisp
             End: new Date(item.End),
             Description: item.Description,
             Location: item.Location,
-            Image: (item.Image != null) ? `data:image/png;base64, ${item.Image}` : ""
+            Image: (item.Image != null) ? `data:image/png;base64, ${item.Image}` : "https://via.placeholder.com/800x800"
         } as CalendarEvent;
      });
 };