Separate Teams on Meet the Team page (Close #346) (#404)

Co-authored-by: Rebecca-Chou <beihaozhou@gmail.com>
Reviewed-on: #404
Reviewed-by: n3parikh <n3parikh@csclub.uwaterloo.ca>

content/team/design-team.json

@@ -0,0 +1,18 @@
+[
+  {
+    "name": "Jenny Zhang",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Vivian Guo",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Rachel Ma",
+    "role": "Design"
+  },
+  {
+    "name": "Aaryan Shroff",
+    "role": "Design"
+  }
+]

content/team/discord-team.json

@@ -0,0 +1,39 @@
+[
+  {
+    "name": "Andy Wang",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Alex Zhang",
+    "role": "Developer"
+  },
+  {
+    "name": "Allen Qin Lu",
+    "role": "Developer",
+    "image": "/images/team/AllenLu.png"
+  },
+  {
+    "name": "Chris Xie",
+    "role": "Developer"
+  },
+  {
+    "name": "Edwin Yang",
+    "role": "Developer"
+  },
+  {
+    "name": "Laura Nguyen",
+    "role": "Developer"
+  },
+  {
+    "name": "Marcus Chan",
+    "role": "Developer"
+  },
+  {
+    "name": "Mark Chen",
+    "role": "Developer"
+  },
+  {
+    "name": "Victor Zheng",
+    "role": "Developer"
+  }
+]

content/team/events-team.json

@@ -0,0 +1,75 @@
+[
+  {
+    "name": "Eden Chan",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Eric Huang",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Adele Chen",
+    "role": "Events"
+  },
+  {
+    "name": "Amya Singhal",
+    "role": "Events"
+  },
+  {
+    "name": "Anna Wang",
+    "role": "Events"
+  },
+  {
+    "name": "Catherine Wan",
+    "role": "Events"
+  },
+  {
+    "name": "Diana Brebeanu",
+    "role": "Events"
+  },
+  {
+    "name": "Elaine Han",
+    "role": "Events"
+  },
+  {
+    "name": "Jonathan Cui",
+    "role": "Events"
+  },
+  {
+    "name": "Kenson Hui",
+    "role": "Events"
+  },
+  {
+    "name": "Mabel Kwok",
+    "role": "Events"
+  },
+  {
+    "name": "Mashrur Chowdhury",
+    "role": "Events"
+  },
+  {
+    "name": "Matthew Wang",
+    "role": "Events"
+  },
+  {
+    "name": "Naman Chhawchharia",
+    "role": "Events"
+  },
+  {
+    "name": "Riddhi Bajaj",
+    "role": "Events"
+  },
+  {
+    "name": "Santiago Montemayor Gomez",
+    "role": "Events",
+    "image": "/images/team/SantiagoMontemayor.jpg"
+  },
+  {
+    "name": "Tommy Jiang",
+    "role": "Events"
+  },
+  {
+    "name": "William Tran",
+    "role": "Events"
+  }
+]

content/team/external-affairs-team.json

@@ -0,0 +1,22 @@
+[
+  {
+    "name": "David Chen",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Daniel Kim",
+    "role": "External Affairs"
+  },
+  {
+    "name": "Eric Liu",
+    "role": "External Affairs"
+  },
+  {
+    "name": "Victor Wu",
+    "role": "External Affairs"
+  },
+  {
+    "name": "Wanda Song",
+    "role": "External Affairs"
+  }
+]

content/team/marketing-team.json

@@ -0,0 +1,31 @@
+[
+  {
+    "name": "Dina Orucevic",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Arjun Amit Athalye",
+    "role": "Marketing",
+    "image": "/images/team/ArjunAthalye.jpeg"
+  },
+  {
+    "name": "Catherine Tao",
+    "role": "Marketing"
+  },
+  {
+    "name": "Ethan Hong",
+    "role": "Marketing"
+  },
+  {
+    "name": "Gurnika Kaur",
+    "role": "Marketing"
+  },
+  {
+    "name": "Haley Song",
+    "role": "Marketing"
+  },
+  {
+    "name": "Kshama Patel",
+    "role": "Marketing"
+  }
+]

content/team/photography-team.json

@@ -0,0 +1,18 @@
+[
+  {
+    "name": "Bonnie Peng",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Annie Zhang",
+    "role": "Photographer"
+  },
+  {
+    "name": "Calvin Zhong",
+    "role": "Photographer"
+  },
+  {
+    "name": "Jesse Liu",
+    "role": "Photographer"
+  }
+]

content/team/programme-committee.json

@@ -1,233 +0,0 @@
-[
-  {
-    "name": "Jenny Zhang",
-    "role": "Head of Design"
-  },
-  {
-    "name": "Vivian Guo",
-    "role": "Head of Design"
-  },
-  {
-    "name": "Rachel Ma",
-    "role": "Design"
-  },
-  {
-    "name": "Aaryan Shroff",
-    "role": "Design"
-  },
-  {
-    "name": "Andy Wang",
-    "role": "Head of Discord"
-  },
-  {
-    "name": "Alex Zhang",
-    "role": "Discord"
-  },
-  {
-    "name": "Allen Qin Lu",
-    "role": "Discord",
-    "image": "/images/team/AllenLu.png"
-  },
-  {
-    "name": "Chris Xie",
-    "role": "Discord"
-  },
-  {
-    "name": "Edwin Yang",
-    "role": "Discord"
-  },
-  {
-    "name": "Laura Nguyen",
-    "role": "Discord"
-  },
-  {
-    "name": "Marcus Chan",
-    "role": "Discord"
-  },
-  {
-    "name": "Mark Chen",
-    "role": "Discord"
-  },
-  {
-    "name": "Victor Zheng",
-    "role": "Discord"
-  },
-  {
-    "name": "Eden Chan",
-    "role": "Head of Events"
-  },
-  {
-    "name": "Eric Huang",
-    "role": "Head of Events"
-  },
-  {
-    "name": "Adele Chen",
-    "role": "Events"
-  },
-  {
-    "name": "Amya Singhal",
-    "role": "Events"
-  },
-  {
-    "name": "Anna Wang",
-    "role": "Events"
-  },
-  {
-    "name": "Catherine Wan",
-    "role": "Events"
-  },
-  {
-    "name": "Diana Brebeanu",
-    "role": "Events"
-  },
-  {
-    "name": "Elaine Han",
-    "role": "Events"
-  },
-  {
-    "name": "Jonathan Cui",
-    "role": "Events"
-  },
-  {
-    "name": "Kenson Hui",
-    "role": "Events"
-  },
-  {
-    "name": "Mabel Kwok",
-    "role": "Events"
-  },
-  {
-    "name": "Mashrur Chowdhury",
-    "role": "Events"
-  },
-  {
-    "name": "Matthew Wang",
-    "role": "Events"
-  },
-  {
-    "name": "Naman Chhawchharia",
-    "role": "Events"
-  },
-  {
-    "name": "Riddhi Bajaj",
-    "role": "Events"
-  },
-  {
-    "name": "Santiago Montemayor Gomez",
-    "role": "Events",
-    "image": "/images/team/SantiagoMontemayor.jpg"
-  },
-  {
-    "name": "Tommy Jiang",
-    "role": "Events"
-  },
-  {
-    "name": "William Tran",
-    "role": "Events"
-  },
-  {
-    "name": "David Chen",
-    "role": "Head of External Affairs"
-  },
-  {
-    "name": "Daniel Kim",
-    "role": "External Affairs"
-  },
-  {
-    "name": "Eric Liu",
-    "role": "External Affairs"
-  },
-  {
-    "name": "Victor Wu",
-    "role": "External Affairs"
-  },
-  {
-    "name": "Wanda Song",
-    "role": "External Affairs"
-  },
-  {
-    "name": "Dina Orucevic",
-    "role": "Head of Marketing"
-  },
-  {
-    "name": "Arjun Amit Athalye",
-    "role": "Marketing",
-    "image": "/images/team/ArjunAthalye.jpeg"
-  },
-  {
-    "name": "Catherine Tao",
-    "role": "Marketing"
-  },
-  {
-    "name": "Ethan Hong",
-    "role": "Marketing"
-  },
-  {
-    "name": "Gurnika Kaur",
-    "role": "Marketing"
-  },
-  {
-    "name": "Haley Song",
-    "role": "Marketing"
-  },
-  {
-    "name": "Kshama Patel",
-    "role": "Marketing"
-  },
-  {
-    "name": "Bonnie Peng",
-    "role": "Head of Photography"
-  },
-  {
-    "name": "Annie Zhang",
-    "role": "Photographer"
-  },
-  {
-    "name": "Calvin Zhong",
-    "role": "Photographer"
-  },
-  {
-    "name": "Jesse Liu",
-    "role": "Photographer"
-  },
-  {
-    "name": "Amy Luo",
-    "role": "Head of Reps"
-  },
-  {
-    "name": "Govind Varma",
-    "role": "Representative"
-  },
-  {
-    "name": "Guneet Bola",
-    "role": "Representative"
-  },
-  {
-    "name": "Ivy Lei",
-    "role": "Representative"
-  },
-  {
-    "name": "Jasmine Bal",
-    "role": "Representative"
-  },
-  {
-    "name": "Mayank Mehra",
-    "role": "Representative"
-  },
-  {
-    "name": "Olivia Liu",
-    "role": "Representative"
-  },
-  {
-    "name": "Sat Arora",
-    "role": "Representative"
-  },
-  {
-    "name": "Star Xie",
-    "role": "Representative"
-  },
-  {
-    "name": "Tracy Dong",
-    "role": "Representative"
-  }
-]

content/team/representative-team.json

@@ -0,0 +1,42 @@
+[
+  {
+    "name": "Amy Luo",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Govind Varma",
+    "role": "Representative"
+  },
+  {
+    "name": "Guneet Bola",
+    "role": "Representative"
+  },
+  {
+    "name": "Ivy Lei",
+    "role": "Representative"
+  },
+  {
+    "name": "Jasmine Bal",
+    "role": "Representative"
+  },
+  {
+    "name": "Mayank Mehra",
+    "role": "Representative"
+  },
+  {
+    "name": "Olivia Liu",
+    "role": "Representative"
+  },
+  {
+    "name": "Sat Arora",
+    "role": "Representative"
+  },
+  {
+    "name": "Star Xie",
+    "role": "Representative"
+  },
+  {
+    "name": "Tracy Dong",
+    "role": "Representative"
+  }
+]

lib/team.ts

@@ -53,6 +53,10 @@ export async function getMemberImagePath(name: string) {
     (await getImage(imgPath + ".png")) ??
     (await getImage(imgPath + ".gif")) ??
     (await getImage(imgPath + ".jpeg")) ??
+    (await getImage(imgPath + ".JPG")) ??
+    (await getImage(imgPath + ".PNG")) ??
+    (await getImage(imgPath + ".GIF")) ??
+    (await getImage(imgPath + ".JPEG")) ??
     placeholder;
   return img;
 }

pages/about/team.tsx

@@ -16,7 +16,13 @@ import {
   getMemberImagePath,
 } from "@/lib/team";
 
-import programmeData from "../../content/team/programme-committee.json";
+import designData from "../../content/team/design-team.json";
+import discordData from "../../content/team/discord-team.json";
+import eventsData from "../../content/team/events-team.json";
+import externalData from "../../content/team/external-affairs-team.json";
+import marketingData from "../../content/team/marketing-team.json";
+import photographyData from "../../content/team/photography-team.json";
+import repsData from "../../content/team/representative-team.json";
 import systemsData from "../../content/team/systems-committee.json";
 import terminalData from "../../content/team/terminal-committee.json";
 import webData from "../../content/team/web-committee.json";
@@ -30,7 +36,13 @@ interface SerializedExec {
 
 interface Props {
   execs: SerializedExec[];
-  programme: Metadata[];
+  design: Metadata[];
+  discord: Metadata[];
+  events: Metadata[];
+  external: Metadata[];
+  marketing: Metadata[];
+  photography: Metadata[];
+  reps: Metadata[];
   website: Metadata[];
   systems: Metadata[];
   terminal: Metadata[];
@@ -38,11 +50,69 @@ interface Props {
 
 export default function Team({
   execs,
-  programme,
+  design,
+  discord,
+  events,
+  external,
+  marketing,
+  photography,
+  reps,
   website,
   systems,
   terminal,
 }: Props) {
+  const teams = [
+    {
+      id: "design",
+      name: "Design Team",
+      members: design,
+    },
+    {
+      id: "discord",
+      name: "Discord Team",
+      members: discord,
+    },
+    {
+      id: "events",
+      name: "Events Team",
+      members: events,
+    },
+    {
+      id: "external",
+      name: "External Affairs Team",
+      members: external,
+    },
+    {
+      id: "marketing",
+      name: "Marketing Team",
+      members: marketing,
+    },
+    {
+      id: "photography",
+      name: "Photography Team",
+      members: photography,
+    },
+    {
+      id: "reps",
+      name: "Class Representatives",
+      members: reps,
+    },
+    {
+      id: "website",
+      name: "Website Committee",
+      members: website,
+    },
+    {
+      id: "system",
+      name: "Systems Committee",
+      members: systems,
+    },
+    {
+      id: "terminal",
+      name: "Terminal Committee",
+      members: terminal,
+    },
+  ];
   return (
     <>
       <Title>Team</Title>
@@ -52,7 +122,13 @@ export default function Team({
             <h1 className={styles.header}>Meet the Team!</h1>
             <div className={styles.nav}>
               <Link href="#execs">The Executives</Link>
-              <Link href="#programme">Programme Committee</Link>
+              <Link href="#design">Design</Link>
+              <Link href="#discord">Discord</Link>
+              <Link href="#events">Events</Link>
+              <Link href="#external">External Affairs</Link>
+              <Link href="#marketing">Marketing</Link>
+              <Link href="#photography">Photography</Link>
+              <Link href="#reps">Class Representatives</Link>
               <Link href="#website">Website Committee</Link>
               <Link href="#system">Systems Committee</Link>
               <Link href="#terminal">Terminal Committee</Link>
@@ -77,22 +153,14 @@ export default function Team({
             );
           })}
         </div>
-        <div id="programme">
+        {teams.map((team) => {
-          <h2 className={styles.subheading}>Programme Committee</h2>
+          return (
-          <MembersList team={programme} />
+            <div id={team.id} key={team.id}>
-        </div>
+              <h2 className={styles.subheading}>{team.name}</h2>
-        <div id="website">
+              <MembersList team={team.members} />
-          <h2 className={styles.subheading}>Website Committee</h2>
+            </div>
-          <MembersList team={website} />
+          );
-        </div>
+        })}
-        <div id="system">
-          <h2 className={styles.subheading}>Systems Committee</h2>
-          <MembersList team={systems} />
-        </div>
-        <div id="terminal">
-          <h2 className={styles.subheading}>Terminal Committee</h2>
-          <MembersList team={terminal} />
-        </div>
       </DefaultLayout>
       <div className={styles.elections}>
         <Bubble>
@@ -141,17 +209,48 @@ async function getTeamWithImages(team: TeamMember[]) {
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const execNames = await getExecNames();
+
   const execs = (await Promise.all(
     execNames.map((name) => getExec(name))
   )) as SerializedExec[];
-  const [programme, website, systems, terminal] = await Promise.all([
+
-    getTeamWithImages(programmeData),
+  const [
+    design,
+    discord,
+    events,
+    external,
+    marketing,
+    photography,
+    reps,
+    website,
+    systems,
+    terminal,
+  ] = await Promise.all([
+    getTeamWithImages(designData),
+    getTeamWithImages(discordData),
+    getTeamWithImages(eventsData),
+    getTeamWithImages(externalData),
+    getTeamWithImages(marketingData),
+    getTeamWithImages(photographyData),
+    getTeamWithImages(repsData),
     getTeamWithImages(webData),
     getTeamWithImages(systemsData),
     getTeamWithImages(terminalData),
   ]);
 
   return {
-    props: { execs, programme, website, systems, terminal },
+    props: {
+      execs,
+      design,
+      discord,
+      events,
+      external,
+      marketing,
+      photography,
+      reps,
+      website,
+      systems,
+      terminal,
+    },
   };
 };