From ccde862889bd8cad48d52674eb17eabc18e4bad7 Mon Sep 17 00:00:00 2001 From: "Ram Christian D. Nacar" <139614619+remagII@users.noreply.github.com> Date: Sat, 4 Apr 2026 19:10:58 +0800 Subject: [PATCH 1/3] Implemented new alumni page + added alumni JSON --- .../sections/AlumniMeetTheTeamSection.tsx | 400 +++++------------- src/data/alumni.json | 107 +++++ 2 files changed, 208 insertions(+), 299 deletions(-) create mode 100644 src/data/alumni.json diff --git a/src/components/sections/AlumniMeetTheTeamSection.tsx b/src/components/sections/AlumniMeetTheTeamSection.tsx index 21d40f9..41ce4c6 100644 --- a/src/components/sections/AlumniMeetTheTeamSection.tsx +++ b/src/components/sections/AlumniMeetTheTeamSection.tsx @@ -1,326 +1,128 @@ "use client"; -import { RawMember } from "@/lib/features/members/types/members"; -import { MemberCard } from "../ui/MemberCard"; -import MembersFilter from "../ui/MembersFilter"; -import React, { useEffect } from "react"; -import { useRouter } from "next/navigation"; -import { departmentCards, DepartmentCard } from "../ui/DepartmentCard"; +import alumni from "@/data/alumni.json"; -// Placeholder alumni data -const placeholderAlumni: Record = { - "Full-Stack": [ - { - id: 1, - name: "John Doe", - email: "john.doe@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 2, - name: "Full-Stack", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - { - id: 2, - name: "Jane Smith", - email: "jane.smith@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 2, - name: "Full-Stack", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - ], - "Front-End": [ - { - id: 3, - name: "Alice Johnson", - email: "alice.johnson@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 5, - name: "Front-End", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - ], - "Back-End": [ - { - id: 4, - name: "Bob Wilson", - email: "bob.wilson@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 7, - name: "Back-End", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - ], - QA: [ - { - id: 5, - name: "Carol Brown", - email: "carol.brown@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 9, - name: "QA", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - ], - DevOps: [ - { - id: 6, - name: "David Lee", - email: "david.lee@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 1, - name: "DevOps", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - ], - "Project Manager": [ - { - id: 7, - name: "Eva Garcia", - email: "eva.garcia@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 4, - name: "Project Manager", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - ], - "UI/UX": [ - { - id: 8, - name: "Frank Miller", - email: "frank.miller@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 3, - name: "UI/UX", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - ], - Creatives: [ - { - id: 9, - name: "Grace Davis", - email: "grace.davis@alumni.addu.edu.ph", - photo: "/images/alumni-placeholder.jpg", - roles: [ - { - roles: { - id: 6, - name: "Creatives", - modifiedAt: "", - createdAt: "", - deletedAt: null, - }, - }, - ], - }, - ], -}; - -export interface AlumniMeetTheTeamSectionProps { - currentDepartment: string; - setCurrentDepartment: React.Dispatch>; +interface Person { + firstName: string; + lastName: string; + role?: string; } -export const AlumniMeetTheTeamSection: React.FC< - AlumniMeetTheTeamSectionProps -> = ({ currentDepartment, setCurrentDepartment }) => { - const router = useRouter(); - const [members, setMembers] = React.useState([]); - - // const officerRoles = [ - // "Director", - // "Deputy Director", - // "Secretary General", - // "Treasurer", - // "Auditor", - // "External Affairs Head", - // "Frontend Head", - // "Backend Head", - // "UI/UX Head", - // "Creatives Head", - // "Public Relations Officer", - // ]; - - // function extractMembers(res: unknown): RawMember[] { - // if ( - // res && - // typeof res === "object" && - // "data" in res && - // Array.isArray((res as { data?: unknown }).data) - // ) { - // return (res as { data: RawMember[] }).data; - // } - // if (Array.isArray(res)) { - // return res as RawMember[]; - // } - // return []; - // } +interface RoleSectionProps { + role: string; + members: Person[]; +} - useEffect(() => { - window.history.replaceState( - null, - "", - `/alumni?department=${encodeURIComponent(currentDepartment)}`, - ); - }, [currentDepartment]); +const AlumniCard: React.FC = ({ firstName, lastName, role }) => { + return ( +
+

+ {firstName} {lastName} +

+ + {role && ( + + {role} + + )} +
+ ); +}; - useEffect(() => { - // async function fetchData() { - // let res; - // switch (currentDepartment) { - // case "Full-Stack": - // res = await GetMembers(2); - // break; - // case "Front-End": - // res = await GetMembers(5); - // break; - // case "Back-End": - // res = await GetMembers(7); - // break; - // case "QA": - // res = await GetMembers(9); - // break; - // case "DevOps": - // res = await GetMembers(1); - // break; - // case "Project Manager": - // res = await GetMembers(4); - // break; - // case "UI/UX": - // res = await GetMembers(3); - // break; - // case "Creatives": - // res = await GetMembers(6); - // break; - // default: - // res = await GetMembers(); - // } +interface OfficersSectionProps { + officers: Person[]; +} - // const membersArray: RawMember[] = extractMembers(res); +const OfficersSection: React.FC = ({ officers }) => { + const top = officers.slice(0, 2); + const middle = officers.slice(2, 6); + const bottom = officers.slice(6, 10); - // // ✅ Filter out officers - // const filteredMembers = membersArray.filter( - // (member) => - // !member.roles.some((r) => officerRoles.includes(r.roles.name)) - // ); + return ( +
+ {/* Top (2 centered) */} +
+ {top.map((p, i) => ( + + ))} +
- // setMembers(filteredMembers); - // } + {/* Middle row */} +
+ {middle.map((p, i) => ( + + ))} +
- // Placeholder alumni data - const alumniData = placeholderAlumni[currentDepartment] || []; + {/* Bottom row */} +
+ {bottom.map((p, i) => ( + + ))} +
+
+ ); +}; - setMembers(alumniData); - // fetchData(); - }, [currentDepartment]); +const RoleSection: React.FC = ({ role, members }) => { + return ( +
+
+ {role} +
- useEffect(() => { - router.push(`/alumni?department=${encodeURIComponent(currentDepartment)}`); - }, [currentDepartment, router]); +
+ {members.map((m, i) => ( +

+ {m.firstName} {m.lastName} +

+ ))} +
+
+ ); +}; +export const AlumniMeetTheTeamSection = () => { return ( -
-
-
+
+ {/* HEADER */} +
+
+

Meet the Alumni

-

+ +

(A.Y. '23 - '24)

-

- The alumni of SYSDEV — former builders of solutions for a - better AdDU. + +

+ The alumni of SYSDEV — former builders of solutions for a better + AdDU.

-
- -
+ {/* OFFICERS */} +
+

+ Officers (A.Y. '23 - '24) +

- {/* Department Card */} - {departmentCards[currentDepartment as keyof typeof departmentCards] && ( - - )} + +
-
-
    - {members.map((member, idx) => ( -
  • - -
    • - ))} -
+ {/* ROLES */} +
+ {alumni.data.map((section, i) => ( + + ))}
); diff --git a/src/data/alumni.json b/src/data/alumni.json new file mode 100644 index 0000000..bd1b5c1 --- /dev/null +++ b/src/data/alumni.json @@ -0,0 +1,107 @@ +{ + "title": "Alumni (2024–2025)", + "batchYear": "2024–2025", + "officers": [ + { "firstName": "Jiyo Seth", "lastName": "Valmoria", "role": "Director" }, + { + "firstName": "Arabella Grace", + "lastName": "Mejorada", + "role": "Deputy Director" + }, + { + "firstName": "Jan Patrick", + "lastName": "Matayabas", + "role": "External Affairs Head" + }, + { + "firstName": "Mariel", + "lastName": "Mabano", + "role": "Secretary-General" + }, + { + "firstName": "Isabelle Faith", + "lastName": "Labuguen", + "role": "Auditor" + }, + { "firstName": "Aaron Justin", "lastName": "Macias", "role": "Treasurer" }, + { + "firstName": "Paolo Luis", + "lastName": "Ramirez", + "role": "Front End Head" + }, + { + "firstName": "Ivan Sam", + "lastName": "Wabina", + "role": "Back End Head" + }, + { + "firstName": "Maverick", + "lastName": "Pigao", + "role": "UI/UX Design Head" + }, + { "firstName": "Mark Lyod", "lastName": "Carin", "role": "Creatives Head" } + ], + "data": [ + { + "role": "Front-End Developer", + "members": [ + { "firstName": "Kervi Kent", "lastName": "Asombrado" }, + { "firstName": "Peter Andre", "lastName": "Casiano" }, + { "firstName": "Sean Elijah", "lastName": "Chavez" }, + { "firstName": "Anya Patricia", "lastName": "Kuan" }, + { "firstName": "Mariel", "lastName": "Mabano" }, + { "firstName": "Paolo Luis", "lastName": "Ramirez" }, + { "firstName": "Yassir", "lastName": "Utara" } + ] + }, + { + "role": "Back-End Developer", + "members": [ + { "firstName": "Adrianne Mykhel", "lastName": "Bulao" }, + { "firstName": "Mark Cyryl", "lastName": "Clarde" }, + { "firstName": "Isabelle Faith", "lastName": "Labuguen" }, + { "firstName": "Janriz Christian", "lastName": "Prado" }, + { "firstName": "Ivan Sam", "lastName": "Wabina" }, + { "firstName": "Anthony Dexter", "lastName": "Yap" } + ] + }, + { + "role": "FullStack Developer", + "members": [ + { "firstName": "Ron Joshua", "lastName": "Bersabal" }, + { "firstName": "Marvin Paul", "lastName": "Eloja" }, + { "firstName": "Derick Lance", "lastName": "Eroy" }, + { "firstName": "Aaron Justin", "lastName": "Macias" }, + { "firstName": "Jan Patrick", "lastName": "Matayabas" }, + { "firstName": "Marjhealou Nina Anne", "lastName": "Paraiso" }, + { "firstName": "Jiyo Seth", "lastName": "Valmoria" } + ] + }, + { + "role": "UI/UX Designer", + "members": [ + { "firstName": "Dominic Miguel", "lastName": "Almonte" }, + { "firstName": "Martina Aaron", "lastName": "Angeles" }, + { "firstName": "Clyde Cedrick", "lastName": "Macabangon" }, + { "firstName": "Maverick Jasper", "lastName": "Pigao" } + ] + }, + { + "role": "Creatives", + "members": [{ "firstName": "Josh Elizalde", "lastName": "Banggud" }] + }, + { + "role": "Project Manager", + "members": [ + { "firstName": "Martina Aaron", "lastName": "Angeles" }, + { "firstName": "Isabelle Faith", "lastName": "Labuguen" }, + { "firstName": "Jan Patrick", "lastName": "Matayabas" }, + { "firstName": "Jiyo Seth", "lastName": "Valmoria" } + ] + }, + { + "role": "Quality Assurance Specialist", + "members": [{ "firstName": "Jiyo Seth", "lastName": "Valmoria" }] + } + ] +} From 52285c0c3be6872c18832b9eb923f0bdb4e954fe Mon Sep 17 00:00:00 2001 From: "Ram Christian D. Nacar" <139614619+remagII@users.noreply.github.com> Date: Sat, 4 Apr 2026 19:15:45 +0800 Subject: [PATCH 2/3] fixed pull issues --- src/components/pages/Alumni.tsx | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/pages/Alumni.tsx b/src/components/pages/Alumni.tsx index 5861033..928f20f 100644 --- a/src/components/pages/Alumni.tsx +++ b/src/components/pages/Alumni.tsx @@ -1,22 +1,10 @@ import React from "react"; import { AlumniMeetTheTeamSection } from "../sections/AlumniMeetTheTeamSection"; -export interface AlumniPageProps { - currentDepartment: string; - setCurrentDepartment: React.Dispatch>; -} - -const Alumni: React.FC = ({ - currentDepartment, - setCurrentDepartment, -}) => { +const Alumni = ({}) => { return (
- - {/* */} +
); }; From 03a49effd75e28226a186e302c58258058e82318 Mon Sep 17 00:00:00 2001 From: "Ram Christian D. Nacar" <139614619+remagII@users.noreply.github.com> Date: Sat, 4 Apr 2026 19:18:51 +0800 Subject: [PATCH 3/3] Update page.tsx --- src/app/(public)/alumni/page.tsx | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/src/app/(public)/alumni/page.tsx b/src/app/(public)/alumni/page.tsx index f96c309..a114e43 100644 --- a/src/app/(public)/alumni/page.tsx +++ b/src/app/(public)/alumni/page.tsx @@ -1,26 +1,10 @@ "use client"; -import React, { useState, useEffect, Suspense } from "react"; +import React, { useEffect, Suspense } from "react"; import Alumni from "@/components/pages/Alumni"; -import { useSearchParams } from "next/navigation"; function AlumniWrapper() { - const searchParams = useSearchParams(); - const departmentParam = searchParams.get("department"); - const [currentDepartment, setCurrentDepartment] = useState(departmentParam || "Full-Stack"); - - // Optional: if URL changes during client-side navigation, update state - useEffect(() => { - const dept = searchParams.get("department"); - setCurrentDepartment(dept || "Full-Stack"); - }, [searchParams]); - - return ( - - ); + return ; } export default function AlumniPage() {