Made Profile thunk global

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

Hide file tree

Showing 4 changed files with 62 additions and 49 deletions.
diff --git a/frontend/src/app/ExecProfiles.tsx b/frontend/src/app/ExecProfiles.tsx
@@ -35,26 +35,7 @@ class Profile
 
 export default function ExecProfiles({} : ExecProfilesProps)
 {
-    // const [profiles, setProfiles] = useState([]);
-
     const profiles = useAppSelector(selectProfile);
-
-    // 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();
-
-    //         setProfiles(response["Payload"]);
-    //    })();
-    // }, [profiles]);
-
-    console.log(profiles); 
 
     return (
         <>
@@ -63,8 +44,8 @@ export default function ExecProfiles({} : ExecProfilesProps)
                 return <ExecProfile key={index} 
                                     Position={profile.Position} 
                                     ID={profile.ID} 
-                                    Name={profile.FirstName} 
-                                    ImageBuffer={`data:image/png;base64, ${profile.Image}`} 
+                                    Name={profile.Name} 
+                                    ImageBuffer={`data:image/png;base64, ${profile.ImageBuffer}`} 
                                     Description={profile.Description}/>;
                 })
             }

diff --git a/frontend/src/app/HomePage.tsx b/frontend/src/app/HomePage.tsx
@@ -5,8 +5,10 @@ import {Global, Vector2D} from "@/app/Global";
 import {SocialIcon} from "react-social-icons";
 import {SocialIcons} from "@/app/SocialIcons";
 import { useAppDispatch, useAppSelector } from "./hooks/hooks";
-import { AddExecProfile, selectProfile } from "./slices/execProfileSlice";
+import { AddExecProfile, ExecProfileObject, selectProfile } from "./slices/execProfileSlice";
 import { AppDispatch, RootState } from "./stores/store";
+import { loadProfilesAsync } from "./thunks/ProfileThunks";
+import { UnknownAction } from "@reduxjs/toolkit";
 
 let InstanceCount: number = 0;
 
@@ -28,34 +30,18 @@ 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);  
-
+        (async () => {
+            if (execProfiles.length < 1)
+            {
+                const promise: UnknownAction = (mainDispatch(loadProfilesAsync() as AppDispatch));
 
-        console.log(`size after dispatch: ${execProfiles.length}`);
+                ((await promise) as unknown as ExecProfileObject[]).forEach((element: ExecProfileObject) => {
+                    mainDispatch(AddExecProfile(element)); 
+                });
+            }
+        })();
     });
 
 

diff --git a/frontend/src/app/about/AboutPage.tsx b/frontend/src/app/about/AboutPage.tsx
@@ -1,7 +1,12 @@
 "use client";
 
-import {Component} from "react";
+import {Component, useEffect} from "react";
 import ExecProfiles from "../ExecProfiles";
+import { useAppDispatch, useAppSelector } from "../hooks/hooks";
+import { AddExecProfile, ExecProfileObject, selectProfile } from "../slices/execProfileSlice";
+import { loadProfilesAsync } from "../thunks/ProfileThunks";
+import { AppDispatch } from "../stores/store";
+import { UnknownAction } from "@reduxjs/toolkit";
 interface AboutPageProps
 {}
 
@@ -10,6 +15,23 @@ interface AboutPageState
 
 export function AboutPage({} : AboutPageProps)
 {
+    const execProfiles = useAppSelector(selectProfile);
+
+    const mainDispatch = useAppDispatch();
+
+    useEffect(() => {
+        (async () => {
+            if (execProfiles.length < 1)
+            {
+                const promise: UnknownAction = (mainDispatch(loadProfilesAsync() as AppDispatch));
+
+                ((await promise) as unknown as ExecProfileObject[]).forEach((element: ExecProfileObject) => {
+                    mainDispatch(AddExecProfile(element)); 
+                });
+            }
+        })();
+    });
+
     return (<div className={"flex flex-col gap-5 bg-body-gray grow"}>
                 <div className={"flex flex-col  gap-3 ml-5 mr-5 mt-10 items-center"}>
                     <div className={"text-[36px] font-bold flex items-center"}>

diff --git a/frontend/src/app/thunks/ProfileThunks.ts b/frontend/src/app/thunks/ProfileThunks.ts
@@ -0,0 +1,24 @@
+import ExecProfile from "../ExecProfile";
+import { AppDispatch, RootState } from "../stores/store";
+import { ExecProfileObject } from "../slices/execProfileSlice";
+
+export const loadProfilesAsync = () => async (state: RootState, dispatch: AppDispatch): Promise<ExecProfileObject[]> => {
+    const response = (await (await fetch(`http://${process.env.APIURL}/Exec/Profile/Active?image=true&complete=true`, {
+        method: "GET",
+        headers: {
+            "apikey": `${process.env.APIKEY}`
+        }
+    })).json())["Payload"];
+
+    return response.map((element: any) => {
+            const execProfile: ExecProfileObject = {
+                ID: element.ID,
+                Name: `${element.Name.FirstName} ${element.Name.LastName}`,
+                ImageBuffer: element.Image,
+                Position: element.Position,
+                Description: element.Description
+            };
+
+            return execProfile;
+        });        
+};