Implemented redux for ExecProfiles

langaracpsc · Dec 27, 2023 · 58fef5b · 58fef5b
1 parent 157ec17
commit 58fef5b
Show file tree

Hide file tree

Showing 11 changed files with 2,853 additions and 28 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.0.1",
     "@types/node": "18.16.1",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
@@ -19,6 +20,7 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-redux": "^9.0.4",
     "react-social-icons": "^5.15.0",
     "tailwindcss": "3.3.2",
     "triple-beam": "^1.4.1",

diff --git a/frontend/src/app/ExecProfile.tsx b/frontend/src/app/ExecProfile.tsx
@@ -26,22 +26,20 @@ const PositionStrings: string[] = [
 
 export default function ExecProfile({ID, Name, ImageBuffer, Position, Description} : ExecProfileProps)
 { 
-    console.log(`Position: ${Position}`);
-
     return (
         <div className={"flex items-start"}>
             <div className="box-border bg-[#262626]  p-4 rounded">
-                <div className={"flex flex-row gap-3"}>
-                    <div className={"relative border-box h-100 w-10 rounded basis-1/6 max-[600px]:basis-1/4 shrink-0"}>
-                        <Image src={ImageBuffer} width={200} height={200} alt={Name} className={"aspect-square object-contain h-[200px] w-[200px]"}/>
+                <div className={"flex flex-row gap-3  text-lg max-[600px]:text-xs items-start"}>
+                    <div className={"relative border-box h-100 w-10 rounded basis-1/6 max-[600px]:basis-1/4 shrink-0 "}>
+                        <Image src={ImageBuffer} width={200} height={200} alt={Name} className={"self-start aspect-square object-contain h-[300px] w-[300px]"}/>
                     </div>
                     <div className="flex flex-col gap-3 max-[600px]:items-center">
                         <div className="flex flex-row ">
                             <span className={"font-bold"}>{Name}</span>
                             <span>&nbsp;.&nbsp;</span>
                             <span> {PositionStrings[Position]}</span>
                         </div>
-                        <div className="flex text-s max-[600px]:text-xs">
+                        <div className="flex">
                             {Description} 
                         </div>
                     </div>

diff --git a/frontend/src/app/ExecProfiles.tsx b/frontend/src/app/ExecProfiles.tsx
@@ -1,6 +1,10 @@
 import {Component, useEffect, useState} from "react";
 import ExecProfile from "./ExecProfile";
 import { exec } from "child_process";
+import { AppDispatch, RootState } from './stores/store';
+import { AddExecProfile, selectProfile } from './slices/execProfileSlice';
+import { useAppDispatch, useAppSelector } from './hooks/hooks';
+
 
 interface ExecProfilesState
 {
@@ -31,30 +35,35 @@ class Profile
 
 export default function ExecProfiles({} : ExecProfilesProps)
 {
-    const [profiles, setProfiles] = useState([]);
+    // const [profiles, setProfiles] = useState([]);
+
+    const profiles = useAppSelector(selectProfile);
 
-    useEffect(() => {
+    // useEffect(() => {
 
-        (async () => {
-            const response = await (await fetch(`http://${process.env.APIURL}/Exec/Profile/Active?image=true&complete=true`, {
-                method: "GET",
-                headers: {
-                    "Content-Type": "application/json",
-                    "apikey" : `${process.env.APIKEY}`
-                }
-            })).json();
+    //     (async () => {
+    //         const response = await (await fetch(`http://${process.env.APIURL}/Exec/Profile/Active?image=true&complete=true`, {
+    //             method: "GET",
+    //             headers: {
+    //                 "Content-Type": "application/json",
+    //                 "apikey" : `${process.env.APIKEY}`
+    //             }
+    //         })).json();
 
-            setProfiles(response["Payload"]);
-       })();
-    }, [profiles]);
+    //         setProfiles(response["Payload"]);
+    //    })();
+    // }, [profiles]);
+
+    console.log(profiles); 
+
     return (
         <>
             {
             profiles.map((profile: any, index: any) => {
                 return <ExecProfile key={index} 
                                     Position={profile.Position} 
                                     ID={profile.ID} 
-                                    Name={`${profile.Name.FirstName} ${profile.Name.LastName}`} 
+                                    Name={profile.FirstName} 
                                     ImageBuffer={`data:image/png;base64, ${profile.Image}`} 
                                     Description={profile.Description}/>;
                 })

diff --git a/frontend/src/app/HomePage.tsx b/frontend/src/app/HomePage.tsx
@@ -1,10 +1,12 @@
 "use client";
 
-import {Component} from "react";
+import {Component, useEffect} from "react";
 import {Global, Vector2D} from "@/app/Global";
 import {SocialIcon} from "react-social-icons";
 import {SocialIcons} from "@/app/SocialIcons";
-import {ok} from "assert";
+import { useAppDispatch, useAppSelector } from "./hooks/hooks";
+import { AddExecProfile, selectProfile } from "./slices/execProfileSlice";
+import { AppDispatch, RootState } from "./stores/store";
 
 let InstanceCount: number = 0;
 
@@ -23,6 +25,40 @@ interface HomePageState
 
 export default function HomePage({} : HomePageProps) 
 {
+    const execProfiles = useAppSelector(selectProfile);
+
+    const mainDispatch = useAppDispatch();
+
+    const loadProfilesAsync = () => async (state: RootState, dispatch: AppDispatch) => {
+        const response = (await (await fetch(`http://${process.env.APIURL}/Exec/Profile/Active?complete=true&image=true`, {
+            method: "GET",
+            headers: {
+                "apikey": `${process.env.APIKEY}`
+            }
+        })).json())["Payload"];
+
+        console.log(response);
+
+        (response as any[]).forEach(element => {
+            mainDispatch(AddExecProfile({
+             ID: element.ID,
+                Name: `${element.Name.FirstName} ${element.Name.LastName}`,
+                ImageBuffer: element.Image,
+                Position: element.Position,
+                Description: element.Description
+            }));        
+        });
+    };
+
+    useEffect(() => {
+        if (execProfiles.length < 1)
+            mainDispatch(loadProfilesAsync() as AppDispatch);  
+
+
+        console.log(`size after dispatch: ${execProfiles.length}`);
+    });
+
+
     let css: string = "", flexContainer: string = "flex flex-row max-[600px]:justify-center max-[600px]:mx-0 ml-[10%]";
 
     let size: number = 5;

diff --git a/frontend/src/app/about/AboutPage.tsx b/frontend/src/app/about/AboutPage.tsx
@@ -15,15 +15,15 @@ export function AboutPage({} : AboutPageProps)
                     <div className={"text-[36px] font-bold flex items-center"}>
                         ABOUT US
                     </div>
-                    <div className={"text-s font-light items-center"}>
+                    <div className={"text-lg max-[600px]:text-s font-light items-center"}>
                         The Langara Computer Science Club is officially back! We are a student-run club dedicated to providing a space for students interested in computer science at Langara to learn, network, help each other out, and have fun! This year, we plan to host workshops, programming competitions, and meetups.                    
                     </div>
                 </div>
                 <div className={"flex flex-col m-5 items-center"}>
                     <div className={"text-[36px] font-bold flex max-[500px]:items-end max-[600px]: mt-10"}>
                         OUR EXECS
                     </div>
-                    <div className={"text-s font-light items-center"}>
+                    <div className={"text-lg max-[600px]:text-s font-light items-center"}>
                         We’re a team of enthusiasts who strive to make this club a fun place.
                     </div>
                 </div>

diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
@@ -2,12 +2,16 @@
 
 import {AboutPage} from "@/app/about/AboutPage";
 import NavBar from "../NavBar";
+import { Provider } from "react-redux";
+import { store } from "../stores/store";
 export default function Page()
 {
     return (
+        <Provider store={store}>
         <main className="grid grid-rows-[10vh_1fr] max-[600px]:grid-rows-[20vh_1fr] overflow-hidden">
             <NavBar></NavBar>
             <AboutPage></AboutPage>
         </main>    
+        </Provider>
     );
 }
diff --git a/frontend/src/app/hooks/hooks.ts b/frontend/src/app/hooks/hooks.ts
@@ -0,0 +1,5 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import { RootState, AppDispatch } from "../stores/store";
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -3,21 +3,24 @@
 import Image from 'next/image'
 import { Inter } from 'next/font/google'
 import NavBar from './NavBar';
-import {Component} from "react";
+import {Component, useEffect} from "react";
 import HomePage from './HomePage';
 import {Global} from "@/app/Global";
-
 const inter = Inter({ subsets: ['latin'] })
 
-// Global.SetupWindow();
-// let PageMap: Array<Component<any, any>> = [ HomePage ];
+import { Provider, ProviderProps } from 'react-redux'
+import { store } from './stores/store';
+
 
 export default function Home() {
+
     return (
+        <Provider store={store}>
         <main className="grid grid-rows-[10vh_1fr] max-[600px]:grid-rows-[10vh_1fr] overflow-hidden">
             <NavBar></NavBar>
             <HomePage></HomePage>
         </main>
+        </Provider>
     );
 }
 

diff --git a/frontend/src/app/slices/execProfileSlice.ts b/frontend/src/app/slices/execProfileSlice.ts
@@ -0,0 +1,39 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { RootState } from "../stores/store";
+
+export interface ExecProfileObject
+{
+    ID: string;
+
+    Name: string;
+
+    ImageBuffer: string;
+
+    Position: number;
+
+    Description: string;
+} 
+
+export interface ExecProfileState
+{
+    Profiles: ExecProfileObject[];
+} 
+
+const initialState: ExecProfileState = {
+    Profiles: []
+};
+
+export const execProfileSlice = createSlice(
+{
+    name: "execProfile",
+    initialState,
+    reducers:{ 
+        AddExecProfile: (state, action: PayloadAction<ExecProfileObject>) => {
+            return {...state, Profiles: [...state.Profiles, action.payload]}; 
+        } 
+    }
+});
+
+export const {AddExecProfile} = execProfileSlice.actions;
+export const selectProfile = (state: RootState) => state.execProfiles.Profiles;
+export default execProfileSlice.reducer;
diff --git a/frontend/src/app/stores/store.ts b/frontend/src/app/stores/store.ts
@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import execProfileReducer from "../slices/execProfileSlice"
+
+export const store = configureStore({
+    reducer: {
+        execProfiles: execProfileReducer
+    }
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;