Merge branch 'main' of https://github.com/langaracpsc/langaracpsc-next

langaracpsc · Apr 25, 2024 · 9253f77 · 9253f77
2 parents b439e39 + 6e10362
commit 9253f77
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 22 deletions.
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -26,7 +26,12 @@ const nextConfig = {
       {
         protocol: "https",
         hostname: "via.placeholder.com"
-      }
+      },
+      {
+        protocol: "https",
+        hostname: "api3.langaracs.tech",
+        pathname: "/executives/image/**"
+      },
     ]
   }
 }

diff --git a/frontend/src/app/ExecProfile.tsx b/frontend/src/app/ExecProfile.tsx
@@ -14,7 +14,7 @@ interface ExecProfileProps
 
     ImageBuffer: string;
 
-    Position: string;
+    Position: Array<string>;
 
     Description: string;
 }
@@ -30,12 +30,13 @@ const PositionStrings: string[] = [
     "Director of Public Relations",
     "Director of Finance",
     "Director of Events",
-    "Secratory",
-    "Directory of Media"
+    "Secretary",
+    "Director of Media"
 ];
 
 export default function ExecProfile({ID, Name, ImageBuffer, Position, Description} : ExecProfileProps)
 { 
+    // no clue what this value represents
     let initialValue: number = 200;
 
     useEffect(() => {
@@ -60,7 +61,6 @@ export default function ExecProfile({ID, Name, ImageBuffer, Position, Descriptio
 
         if (window !== undefined) 
         {
-
             window.addEventListener('resize', handleResize);
             window.addEventListener('load', handleResize);
         }
@@ -79,24 +79,26 @@ export default function ExecProfile({ID, Name, ImageBuffer, Position, Descriptio
                     <div>
                         <Dialog.Root>
                             <Dialog.Trigger className='font-bold flex flex-col items-center'>
-                                <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`} />
+
+                                <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 object-cover transition duration-300 ease-in-out hover:scale-105 `}/>
                                 <div>{Name}</div>
+
                             </Dialog.Trigger>
                             <Dialog.Portal>
                                 <Dialog.Overlay className="fixed inset-0 bg-black/60">
                                     <Dialog.Content className="fixed top-1/4 left-1/2 -translate-x-1/2 p-8" style={{ border: "2px solid #F15A22", backgroundColor: "#171717" }}>
                                         <ProfileModal
                                             ID={ID}
                                             Name={Name}
-                                            Position={Position}
+                                            Position={Position.join(" & ")}
                                             ImageBuffer={ImageBuffer}
                                             Description={Description}
                                             imageWidth={imageWidth} />
                                     </Dialog.Content>
                                 </Dialog.Overlay>
                             </Dialog.Portal>
                         </Dialog.Root>
-                        <p>{Position}</p>
+                        <p>{Position.join(" & ")}</p>
                     </div>
                 </div>
             </div>

diff --git a/frontend/src/app/ExecProfiles.tsx b/frontend/src/app/ExecProfiles.tsx
@@ -6,7 +6,7 @@ import { selectProfile, ExecProfileObject } from './slices/execProfileSlice';
 export default function ExecProfiles() {
     const profiles = useAppSelector(selectProfile);
 
-    const profilesSorted = [...profiles].sort((a, b) => (a.Position.ID - b.Position.ID)).slice(0, 12);
+    const profilesSorted = profiles;
 
     const [profileSections, setProfileSections] = useState<ExecProfileObject[][]>([]);
 
@@ -68,15 +68,15 @@ 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"} key={profileSections.indexOf(profiles)}>
+                    <div className={"flex flex-row gap-32 max-[800px]:gap-10 justify-around"} key={profileSections.indexOf(profiles)}>
                         {
                             profiles.map(profile => (
                                 <ExecProfile
                                     key={profile.ID}
-                                    Position={profile.Position.Title}
+                                    Position={profile.Position}
                                     ID={profile.ID}
                                     Name={profile.Name}
-                                    ImageBuffer={`https://${process.env.APIURL}/${profile.ImageBuffer}`}
+                                    ImageBuffer= {(profile.ImageBuffer != null) ? `https://api3.langaracs.tech/executives/image/${profile.ImageBuffer}` : "https://via.placeholder.com/200x200"}
                                     Description={profile.Description} />
                             ))
                         }

diff --git a/frontend/src/app/ProfileModal.tsx b/frontend/src/app/ProfileModal.tsx
@@ -35,7 +35,7 @@ export default function ProfileModal ({Name, Position, ImageBuffer, Description,
     return (
                 <div className="content flex" style={{ flexDirection: isSmallScreen ? "column" : "row", padding: '20px', overflowY: 'auto', boxSizing: 'border-box', maxWidth: "60vw", maxHeight: "60vh"}}>
                 <div className="flex flex-col items-center gap-3">
-                    <Image src={ImageBuffer} width={imageWidth} height={imageWidth} alt={Name} style={{borderRadius: "100%", minHeight: "20vb", minWidth: "20vb"}} className={`w-[${imageWidth}px] h-[${imageWidth}px] aspect-square rounded-2xl`}/>
+                    <Image src={ImageBuffer} width={imageWidth} height={imageWidth} alt={Name} style={{borderRadius: "100%", minHeight: "20vb", minWidth: "20vb"}} className={`w-[${imageWidth}px] h-[${imageWidth}px] aspect-square rounded-2xl object-cover`}/>
                     <div className='profile-info flex text-center' style={{flexDirection: "column"}}>
 
                         <h2 className='font-bold'>{Name}</h2>

diff --git a/frontend/src/app/about/AboutPage.tsx b/frontend/src/app/about/AboutPage.tsx
@@ -31,7 +31,7 @@ export default function AboutPage({} : AboutPageProps)
                 const promise: UnknownAction = mainDispatch(loadProfilesAsync() as AppDispatch);
 
                 ((await promise) as unknown as any[]).forEach((element) => {
-                    mainDispatch(AddExecProfile({ ...element, Position: { ID: element.Position.ID, Title: element.Position.Name} } as ExecProfileObject)); 
+                    mainDispatch(AddExecProfile({ ...element} as ExecProfileObject)); 
                 });
             }
 

diff --git a/frontend/src/app/slices/execProfileSlice.ts b/frontend/src/app/slices/execProfileSlice.ts
@@ -16,7 +16,7 @@ export interface ExecProfileObject
 
     ImageBuffer: string;
 
-    Position: ExecPosition; 
+    Position: Array<string>; 
 
     Description: string;
 } 

diff --git a/frontend/src/app/thunks/ProfileThunks.ts b/frontend/src/app/thunks/ProfileThunks.ts
@@ -3,20 +3,22 @@ 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(`https://${process.env.APIURL}/Exec/Profile/Active?image=true&complete=true`, {
+    const response = (await (await fetch(`https://api3.langaracs.tech/executives/active`, {
         method: "GET",
         headers: {
             "apikey": `${process.env.APIKEY}`
         }
-    })).json())["Payload"];
+    })).json());
+
+    // console.log(response)
 
     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
+                ID: element.student_id,
+                Name: element.name,
+                ImageBuffer: element.profile_picture,
+                Position: element.roles,
+                Description: element.bio
             };
 
             return execProfile;