From 9bbb323d3b12c2eb73cdfeafc92a5c88184c5da7 Mon Sep 17 00:00:00 2001
From: rishit-singh <rsrishitsingh@gmail.com>
Date: Tue, 26 Mar 2024 12:00:47 -0700
Subject: [PATCH] Fixed build errors

---
 frontend/src/app/ExecProfile.tsx  | 42 +++++++++++++++++++--------
 frontend/src/app/ExecProfiles.tsx | 48 ++++++++++++++++++++++++-------
 frontend/src/app/Footer.tsx       |  2 +-
 frontend/src/app/HomePage.tsx     |  2 --
 4 files changed, 68 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/ExecProfile.tsx b/frontend/src/app/ExecProfile.tsx
index e694c4c..da6f2b3 100644
--- a/frontend/src/app/ExecProfile.tsx
+++ b/frontend/src/app/ExecProfile.tsx
@@ -1,6 +1,7 @@
 import {Component} from "react";
 import Image from "next/image";
 import {useState, useEffect} from "react";
+import { init } from "next/dist/compiled/@vercel/og/satori";
 
 interface ExecProfileProps
 {
@@ -32,28 +33,45 @@ const PositionStrings: string[] = [
  
 export default function ExecProfile({ID, Name, ImageBuffer, Position, Description} : ExecProfileProps)
 { 
-    const [imageWidth, setImageWidth] = useState<number>(window.innerWidth <= 800 ?  100 : 200);
+    let initialValue: number = 200;
     
     useEffect(() => {
-        const handleResize = () => {
+        if (window !== undefined) {
             if (window.innerWidth <= 800)
-                setImageWidth(100);
-            else
-                setImageWidth(200);
-        };
-    
-        window.addEventListener('resize', handleResize);
-        window.addEventListener('load', handleResize);
+                initialValue = 100;
+        }
+    });
+
+    const [imageWidth, setImageWidth] = useState<number>(initialValue);
     
+    useEffect(() => {
+        const handleResize = () => {
+            if (window !== undefined)
+            {
+                if (window.innerWidth <= 800)
+                    setImageWidth(100);
+                else
+                    setImageWidth(200);
+            }
+        };
+        
+        if (window !== undefined) 
+        {
+
+            window.addEventListener('resize', handleResize);
+            window.addEventListener('load', handleResize);
+        }
+
         return () => {
-            window.removeEventListener('resize', handleResize);
+            if (window !== undefined)
+                window.removeEventListener('resize', handleResize);
         };
     }, []);
-    
+        
     return (
             <div className="flex flex-col items-center gap-3">
                 <Image src={ImageBuffer} width={imageWidth} height={imageWidth} alt={Name} style={{borderRadius: "100%", height: imageWidth, width: imageWidth }} className={`w-[${imageWidth}px] h-[${imageWidth}px] aspect-square rounded-2xl`}/>
-                <span className="flex flex-col font-bold text-center">{Name.split(' ').map(name => <div>{name}</div>)}</span> {/* Adjust margin-top as needed to position below image center */}
+                <span className="flex flex-col font-bold text-center">{Name.split(' ').map(name => <div key={name}>{name}</div>)}</span> {/* Adjust margin-top as needed to position below image center */}
             </div>);
 }
 
diff --git a/frontend/src/app/ExecProfiles.tsx b/frontend/src/app/ExecProfiles.tsx
index 8bddf4b..8b072a7 100644
--- a/frontend/src/app/ExecProfiles.tsx
+++ b/frontend/src/app/ExecProfiles.tsx
@@ -10,32 +10,57 @@ export default function ExecProfiles() {
     
     const [profileSections, setProfileSections] = useState<ExecProfileObject[][]>([]);
 
-    const [cols, setCols] = useState<number>(window.innerWidth <= 800 ? 2 : 3);
+    let initialValue: number = 3;
 
     useEffect(() => {
+        if (window !== undefined) {
+            if (window.innerWidth <= 800)
+                initialValue = 2;
+        }
+    });
+
+    const [cols, setCols] = useState<number>(initialValue);
+
+    const updateSections = () => {
         const sections = [];
 
         for (let x = 0;  x < profilesSorted.length / cols; x++)
-        {
             sections.push(profilesSorted.slice(x * cols, x * cols + cols));
-        }
 
         setProfileSections(sections);
+    };
+
+    useEffect(() => {
+        if (profileSections.length < 1)
+            updateSections();
     });
 
     useEffect(() => {
         const handleResize = () => {
-            if (window.innerWidth <= 800)
-                setCols(2);
-            else
-                setCols(3);
+            if (window !== undefined) 
+            {
+                if (window.innerWidth <= 800)
+                {
+                    setCols(2);
+                    updateSections();
+                }
+                else
+                {
+                    setCols(3);
+                    updateSections();
+                }
+            }
         };
 
-        window.addEventListener('load', handleResize);
-        window.addEventListener('resize', handleResize);
+        if (window !== undefined) 
+        {
+            window.addEventListener('load', handleResize);
+            window.addEventListener('resize', handleResize);
+        }
 
         return () => {
-            window.removeEventListener('resize', handleResize);
+            if (window !== undefined)
+                window.removeEventListener('resize', handleResize);
         };
         }, []);
     // max-[800px]:grid max-[800px]:content-center max-[800px]:grid-flow-col max-[800px]:auto-cols-min max-[800px]:justify-items-center 
@@ -43,10 +68,11 @@ export default function ExecProfiles() {
         <div className="flex flex-col gap-5">
             {
                 profileSections.map(profiles => (
-                    <div className={"flex flex-row gap-32 max-[800px]:gap-10"}>
+                    <div className={"flex flex-row gap-32 max-[800px]:gap-10"} key={profileSections.indexOf(profiles)}>
                         {
                             profiles.map(profile => (
                                 <ExecProfile
+                                    key={profile.ID}
                                     Position={profile.Position.Title}
                                     ID={profile.ID}
                                     Name={profile.Name}
diff --git a/frontend/src/app/Footer.tsx b/frontend/src/app/Footer.tsx
index b4a5819..d217244 100644
--- a/frontend/src/app/Footer.tsx
+++ b/frontend/src/app/Footer.tsx
@@ -54,7 +54,7 @@ export default function Footer()
         if (links.length < 1)
             linksMap.forEach((value: string, key: string) => {
                 linksTemp.push(<>
-                    <a href={value} className="hover:text-lang-orange">{key}</a>
+                    <a key={key} href={value} className="hover:text-lang-orange">{key}</a>
                 </>);
             });
 
diff --git a/frontend/src/app/HomePage.tsx b/frontend/src/app/HomePage.tsx
index 85f44bf..1e377ca 100644
--- a/frontend/src/app/HomePage.tsx
+++ b/frontend/src/app/HomePage.tsx
@@ -15,8 +15,6 @@ import Footer from "./Footer";
 
 let InstanceCount: number = 0;
 
-// Global.SetupWindow();
-
 interface HomePageProps
 {
 }