From afa6bc6029e5bbe19025c5aaa1222a1407bb6e5e Mon Sep 17 00:00:00 2001
From: rishit-singh <rsrishitsingh@gmail.com>
Date: Mon, 25 Dec 2023 01:52:05 -0800
Subject: [PATCH] Fixed ExecProfiles and ExecProfile

---
 frontend/next.config.js              |  4 ++
 frontend/src/app/ExecProfile.tsx     | 62 ++++++++++++----------------
 frontend/src/app/ExecProfiles.tsx    | 59 ++++++++++++--------------
 frontend/src/app/about/AboutPage.tsx | 27 +++---------
 frontend/src/app/about/page.tsx      |  2 +-
 5 files changed, 64 insertions(+), 90 deletions(-)

diff --git a/frontend/next.config.js b/frontend/next.config.js
index dafb0c8..beba0e6 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -3,6 +3,10 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  env: {
+    APIURL: process.env.APIURL,
+    APIKEY: process.env.APIKEY
+  }
 }
 
 module.exports = nextConfig
diff --git a/frontend/src/app/ExecProfile.tsx b/frontend/src/app/ExecProfile.tsx
index 084a9bf..ab3472b 100644
--- a/frontend/src/app/ExecProfile.tsx
+++ b/frontend/src/app/ExecProfile.tsx
@@ -1,54 +1,46 @@
 import {Component} from "react";
 import Image from "next/image";
 
-interface ExecProfileState
-{
-    ImageBuffer: string;
-}
-
 interface ExecProfileProps
 {
     ID: number;
     
     Name: string;
     
-    ImageID: string;
+    ImageBuffer: string;
     
     Position: number;
 }
 
-export class ExecProfile extends Component<ExecProfileProps, ExecProfileState>
-{   
-    public constructor(props: ExecProfileProps)
-    {
-        super(props);
-    }
-    
-    public async componentDidMount()
-    {
-        this.setState({ImageBuffer: (await (await fetch("http://localhost:5031/Exec/Image/" + this.props.ImageID, 
-                                                  {headers: { apikey: "eerSS5qfGUi0H+XQr702DYouu7E+55RWSZ8mLp+iu4QH6fZdqH1NFsaVgFx/CvUpRXioIiq8B9NomnSD2ClFUA==" }})).json())["Payload"]});
-        console.log(this.state.ImageBuffer);
-    }
+const PositionStrings: string[] = [
+    "President",
+    "Vice Presdent",
+    "Tech Lead",
+    "General Representative",
+    "Director of Public Relations",
+    "Director of Finance",
+    "Director of Events"
+];
+
+export default function ExecProfile({ID, Name, ImageBuffer, Position} : ExecProfileProps)
+{ 
+    console.log(`Position: ${Position}`);
     
-    public render()
-    {
-        return (
-            <div className={"flex items-start"}>
-                <div className="box-border bg-[#262626] h-32 w-[80vh] p-4 rounded">
-                   <div className={"grid grid-col-[40%_60%]"}>
-                       {/* <div className={"relative border-box bg-lang-orange h-[10vh] w-20 rounded"}>*/}
-                       {/*     <Image src={this.state.ImageBuffer} width={20} height={20} alt={""}/>*/}
-                       {/* </div>*/}
-                       {/*<div>*/}
-                       {/*    {this.props.Name}*/}
-                       {/*    {this.props.Position}*/}
-                       {/*</div>*/}
-                   </div>
+    return (
+        <div className={"flex items-start"}>
+            <div className="box-border bg-[#262626] h-32 w-[80vh] p-4 rounded">
+                <div className={"flex flex-row"}>
+                    <div className={"relative border-box bg-lang-orange h-[10vh] w-20 rounded"}>
+                        <Image src={ImageBuffer} width={100} height={100} alt={Name}/>
+                    </div>
+                    <div className="flex flex-row">
+                        <span>{Name} |</span>
+                        <span>{PositionStrings[Position]}</span>
+                    </div>
                 </div>
             </div>
-        );
-    }
+        </div>
+    );
 }
 
  
diff --git a/frontend/src/app/ExecProfiles.tsx b/frontend/src/app/ExecProfiles.tsx
index 92f927c..5fe74c5 100644
--- a/frontend/src/app/ExecProfiles.tsx
+++ b/frontend/src/app/ExecProfiles.tsx
@@ -1,5 +1,6 @@
-import {Component} from "react";
-import {ExecProfile} from "@/app/ExecProfile";
+import {Component, useEffect, useState} from "react";
+import ExecProfile from "./ExecProfile";
+import { exec } from "child_process";
 
 interface ExecProfilesState
 {
@@ -28,38 +29,32 @@ class Profile
     }
 }
 
-export class ExecProfiles extends Component<ExecProfilesProps, ExecProfilesState>
+export default function ExecProfiles({} : ExecProfilesProps)
 {
-    ExecProfiles: Profile[];
-        
-    public async componentDidMount() {
-        let request = await fetch("http://localhost:5031/Exec/Profile/Active", {
-            headers: {
-                "apikey" : ""
-            }
-        });
+    const [profiles, setProfiles] = useState([]);
+    
+    useEffect(() => {
         
-        let profileObjs: object[] = (await request.json())["Payload"];
+        (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();
         
-        for (let x = 0; x < profileObjs.length; x++) 
-        {
-            let profile: Profile = profileObjs[x] as Profile;
-
-            this.ExecProfiles.push(new Profile(profile.ID, profile.Name, profile.Position, profile.ImageID));
-        }
-    } 
-    
-    public render()
-    {
-        return this.ExecProfiles.map((profile, index, array)=> {
-                console.log("Rendering" + profile);
-                return <ExecProfile key={index} Position={profile.Position} ID={profile.ID} Name={profile.Name} ImageID={profile.ImageID}/>;
+            setProfiles(response["Payload"]);
+       })();
+    }, [profiles]);
+// ${profile.Name.FirstName} ${profile.Name.LastName}
+    return (
+        <>
+            {
+            profiles.map((profile: any, index: any) => {
+                return <ExecProfile key={index} Position={profile.Position} ID={profile.ID} Name={`placeholder`} ImageBuffer={`data:image/png;base64, ${profile.Image}`}/>;
+                })
             }
-        );
-    }
-    
-    public constructor(props: ExecProfilesProps) {
-        super(props);
-        this.ExecProfiles = new Array<Profile>();
-    }
+        </>
+    );
 }
\ No newline at end of file
diff --git a/frontend/src/app/about/AboutPage.tsx b/frontend/src/app/about/AboutPage.tsx
index a50ada7..aa28f8f 100644
--- a/frontend/src/app/about/AboutPage.tsx
+++ b/frontend/src/app/about/AboutPage.tsx
@@ -1,28 +1,16 @@
 "use client";
 
 import {Component} from "react";
-import {ExecProfile} from "@/app/ExecProfile";
-import {ExecProfiles} from "@/app/ExecProfiles";
-
+import ExecProfiles from "../ExecProfiles";
 interface AboutPageProps
 {}
 
 interface AboutPageState
 {}
 
-export class AboutPage extends Component<AboutPageProps, AboutPageState>
+export function AboutPage({} : AboutPageProps)
 {
-    public componentWillUnmount() {
-    }
-
-    public async componentDidMount() {
-    } 
-    
-
-    public render()
-    {
-        return (
-            <div className={"grid grid-rows-3 bg-body-gray"}>
+    return (<div className={"grid grid-rows-3 bg-body-gray"}>
                 <div className={"grid grid-rows-[40%_50%] max-[500px]:grid-rows-[30%_50%] ml-5"}>
                     <div className={"text-[36px] font-bold flex items-center"}>
                         ABOUT US
@@ -31,7 +19,7 @@ export class AboutPage extends Component<AboutPageProps, AboutPageState>
                         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={"grid grid-rows-[40%_10%] max-[500px]:grid-rows-[55%_10%] max-[350px]:grid-rows-[70%_10%]  ml-5"}>
+                <div className={"grid grid-rows-2 max-[500px]:grid-rows-[55%_10%] max-[350px]:grid-rows-[70%_10%]  ml-5"}>
                     <div className={"text-[36px] font-bold flex max-[500px]:items-end max-[600px]: mt-10"}>
                         OUR EXECS
                     </div>
@@ -40,15 +28,10 @@ export class AboutPage extends Component<AboutPageProps, AboutPageState>
                     </div>
                 </div>
                 <div className={"profileContainer"}>
-                    <div className={"flex flex-row ml-5"}>
+                    <div className={"flex flex-col ml-5 gap-3"}>
                         <ExecProfiles/> 
                     </div>
                 </div>
             </div>
         );      
-    }
-    
-    public constructor(props: AboutPageProps) {
-        super(props);
-    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
index 1875d9a..7e0ceb0 100644
--- a/frontend/src/app/about/page.tsx
+++ b/frontend/src/app/about/page.tsx
@@ -5,7 +5,7 @@ import NavBar from "../NavBar";
 export default function Page()
 {
     return (
-        <main className="grid grid-rows-[10vh_100vh] max-[600px]:grid-rows-[20vh_100vh] overflow-hidden">
+        <main className="grid grid-rows-[10vh_1fr] max-[600px]:grid-rows-[20vh_100vh] overflow-hidden">
             <NavBar></NavBar>
             <AboutPage></AboutPage>
         </main>