Redesign and update 'Meet the Team' data (#452)

Closes #450. Closes #436.

Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: #452
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>

components/TeamMember.tsx

@@ -6,13 +6,13 @@ import styles from "./TeamMember.module.css";
 
 interface TeamMemberProps {
   name: string;
-  role: string;
+  role?: string;
   image: string;
 }
 
 export const TeamMember: React.FC<TeamMemberProps> = ({
   name,
-  role,
+  role = "",
   image,
 }) => {
   return (

components/TeamMemberCard.tsx

@@ -8,14 +8,14 @@ import styles from "./TeamMemberCard.module.css";
 
 export interface TeamMemberCardProps {
   name: string;
-  role: string;
+  role?: string;
   image: string;
   children: React.ReactNode;
 }
 
 export function TeamMemberCard({
   name,
-  role,
+  role = "",
   image,
   children,
 }: TeamMemberCardProps) {
@@ -48,7 +48,12 @@ export function TeamMemberCard({
   );
 }
 
-function TeamMemberInfo({ name, role, image, children }: TeamMemberCardProps) {
+function TeamMemberInfo({
+  name,
+  role = "",
+  image,
+  children,
+}: TeamMemberCardProps) {
   return (
     <>
       <div className={styles.picture}>
@@ -69,7 +74,13 @@ interface PopupProps extends TeamMemberCardProps {
   handleClick: () => void;
 }
 
-function ExecPopup({ name, role, image, children, handleClick }: PopupProps) {
+function ExecPopup({
+  name,
+  role = "",
+  image,
+  children,
+  handleClick,
+}: PopupProps) {
   return (
     <>
       <div className={styles.popupBackground} onClick={handleClick} />

content/team/coordinators-team.json

@@ -0,0 +1,36 @@
+[
+  {
+    "name": "Sat Arora",
+    "role": "Team Lead"
+  },
+  {
+    "name": "Ivy Lei"
+  },
+  {
+    "name": "Govind Varma"
+  },
+  {
+    "name": "Guneet Bola"
+  },
+  {
+    "name": "Mayank Mehra"
+  },
+  {
+    "name": "Olivia Liu"
+  },
+  {
+    "name": "Colby Wang"
+  },
+  {
+    "name": "Harshitha Durai Babu",
+    "image": "/images/team/HarshithaDurai.jpg"
+  },
+  {
+    "name": "Amy Luo",
+    "role": "Advisor"
+  },
+  {
+    "name": "Juthika Hoque",
+    "role": "Advisor"
+  }
+]

content/team/design-team.json

@@ -1,18 +1,21 @@
 [
   {
-    "name": "Jenny Zhang",
+    "name": "Jenny Zhang"
-    "role": "Team Lead"
   },
   {
-    "name": "Vivian Guo",
+    "name": "Alice Li"
-    "role": "Team Lead"
   },
   {
-    "name": "Rachel Ma",
+    "name": "Rachel Ma"
-    "role": "Design"
   },
   {
     "name": "Aaryan Shroff",
-    "role": "Design"
+    "role": "Team Lead"
+  },
+  {
+    "name": "Joyce Ye"
+  },
+  {
+    "name": "Jessica Chan"
   }
 ]

content/team/discord-team.json

@@ -1,39 +1,50 @@
 [
   {
-    "name": "Andy Wang",
+    "name": "Mark Chen",
     "role": "Team Lead"
   },
   {
     "name": "Alex Zhang",
-    "role": "Developer"
+    "role": "Team Lead"
   },
   {
-    "name": "Allen Qin Lu",
+    "name": "Allen Lu"
-    "role": "Developer",
-    "image": "/images/team/AllenLu.png"
   },
   {
-    "name": "Chris Xie",
+    "name": "Andrew Wang"
-    "role": "Developer"
   },
   {
-    "name": "Edwin Yang",
+    "name": "Edwin Yi-Jan Yang",
-    "role": "Developer"
+    "image": "/images/team/EdwinYang.jpg"
   },
   {
-    "name": "Laura Nguyen",
+    "name": "Elaine Han"
-    "role": "Developer"
   },
   {
-    "name": "Marcus Chan",
+    "name": "Laura Nguyen"
-    "role": "Developer"
   },
   {
-    "name": "Mark Chen",
+    "name": "Marcus Chan"
-    "role": "Developer"
   },
   {
-    "name": "Victor Zheng",
+    "name": "Victor Zheng"
-    "role": "Developer"
+  },
+  {
+    "name": "Howe Wang"
+  },
+  {
+    "name": "Daniel Jemin Kim",
+    "image": "/images/team/DanielKim.jpg"
+  },
+  {
+    "name": "Andy Li"
+  },
+  {
+    "name": "Gen Nishiwaki"
+  },
+
+  {
+    "name": "Charles Zhang",
+    "role": "Advisor"
   }
-]
+]

content/team/events-team.json

@@ -1,75 +1,44 @@
 [
   {
-    "name": "Eden Chan",
+    "name": "Bonnie Peng",
     "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"
+    "role": "Team Lead"
   },
   {
-    "name": "Diana Brebeanu",
+    "name": "Ethan Hong"
-    "role": "Events"
   },
   {
-    "name": "Elaine Han",
+    "name": "Naman Chhawchharia"
-    "role": "Events"
   },
   {
-    "name": "Jonathan Cui",
+    "name": "Diana Brebeanu"
-    "role": "Events"
   },
   {
-    "name": "Kenson Hui",
+    "name": "Stephanie Xu"
-    "role": "Events"
   },
   {
-    "name": "Mabel Kwok",
+    "name": "Alan Wang"
-    "role": "Events"
   },
   {
-    "name": "Mashrur Chowdhury",
+    "name": "Freya Zhang"
-    "role": "Events"
   },
   {
-    "name": "Matthew Wang",
+    "name": "Siting Ban"
-    "role": "Events"
   },
   {
-    "name": "Naman Chhawchharia",
+    "name": "Keane Moraes"
-    "role": "Events"
   },
   {
-    "name": "Riddhi Bajaj",
+    "name": "Celine Chung"
-    "role": "Events"
   },
   {
-    "name": "Santiago Montemayor Gomez",
+    "name": "Jenn Zhang"
-    "role": "Events",
-    "image": "/images/team/SantiagoMontemayor.jpg"
   },
   {
-    "name": "Tommy Jiang",
+    "name": "Eric Huang",
-    "role": "Events"
+    "role": "Advisor"
-  },
-  {
-    "name": "William Tran",
-    "role": "Events"
   }
-]
+]

content/team/execs/raymond-li.md

@@ -3,4 +3,4 @@ name: Raymond Li
 role: Systems Administrator
 ---
 
-Hey there! I'm [Raymond Li](https://raymond.li). I'm on co-op after my 2B term of CS. As sysadmin, I lead syscom and termcom in maintaining all the club infrastructure, including our [machines](https://wiki.csclub.uwaterloo.ca/Machine_List), [mirror](https://mirror.csclub.uwaterloo.ca/stats), [wiki](https://wiki.csclub.uwaterloo.ca), [email service](https://mail.csclub.uwaterloo.ca), [Gitea instance](https://git.csclub.uwaterloo.ca), [Mattermost instance](https://mattermost.csclub.uwaterloo.ca), [TheLounge instance](https://chat.csclub.uwaterloo.ca), and much much more. Major projects I've got planned this term include setting up NextCloud and our own self-hosted URL shortener at csclub.ca! In my spare time, I like to code, ski, and play chess and violin.<br />#btwiusearch (at least until [Linux expires in 2038](https://youtu.be/dQw4w9WgXcQ))
+Hey there! I'm [Raymond Li](https://raymond.li). I'm on co-op after my 2B term of CS. As sysadmin, I lead [syscom](https://csclub.uwaterloo.ca/about/team/#system) and [termcom](https://csclub.uwaterloo.ca/about/team/#terminal) in maintaining all the club infrastructure, including our [machines](https://wiki.csclub.uwaterloo.ca/Machine_List), [mirror](https://mirror.csclub.uwaterloo.ca/stats), [wiki](https://wiki.csclub.uwaterloo.ca), [email service](https://mail.csclub.uwaterloo.ca), [Gitea instance](https://git.csclub.uwaterloo.ca), [Mattermost instance](https://mattermost.csclub.uwaterloo.ca), [TheLounge instance](https://chat.csclub.uwaterloo.ca), and much much more. Major projects I've got planned this term include setting up NextCloud and our own self-hosted URL shortener at csclub.ca! In my spare time, I like to code, ski, and play chess and violin.<br />#btwiusearch (at least until [Linux expires in 2038](https://youtu.be/dQw4w9WgXcQ))

content/team/external-affairs-team.json

@@ -1,22 +1,22 @@
 [
   {
-    "name": "David Chen",
+    "name": "Eric Liu",
     "role": "Team Lead"
   },
   {
-    "name": "Daniel Kim",
+    "name": "David Chen",
-    "role": "External Affairs"
+    "role": "Advisor"
   },
   {
-    "name": "Eric Liu",
+    "name": "Ernest Wong"
-    "role": "External Affairs"
   },
   {
-    "name": "Victor Wu",
+    "name": "Jason D'Souza"
-    "role": "External Affairs"
   },
   {
-    "name": "Wanda Song",
+    "name": "Oren Leung"
-    "role": "External Affairs"
+  },
+  {
+    "name": "Sameer Fettes"
   }
-]
+]

content/team/marketing-team.json

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

content/team/photography-team.json

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

content/team/representative-team.json

@@ -1,42 +0,0 @@
-[
-  {
-    "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"
-  }
-]

content/team/systems-committee.json

@@ -1,24 +1,28 @@
 [
   {
     "name": "Raymond Li",
-    "role": "Sysadmin"
+    "role": "Team Lead"
+  },
+  {
+    "name": "Max Erenberg",
+    "role": "Alumni"
+  },
+  {
+    "name": "Andrew Wang"
+  },
+  {
+    "name": "Rio Liu"
   },
   {
     "name": "Amin Bandali",
     "role": "Alumni"
   },
-  {
-    "name": "Andrew Wang",
-    "role": "",
-    "image": "/images/team/AndrewWang-Syscom.jpg"
-  },
   {
     "name": "Anthony Brennan",
     "role": "Alumni"
   },
   {
-    "name": "Edwin Zhang",
+    "name": "Edwin Zhang"
-    "role": "Alumni"
   },
   {
     "name": "Elana Hashman",
@@ -28,14 +32,6 @@
     "name": "Jennifer Zhou",
     "role": "Alumni"
   },
-  {
-    "name": "Max Erenberg",
-    "role": ""
-  },
-  {
-    "name": "Rio Liu",
-    "role": ""
-  },
   {
     "name": "Zachary Seguin",
     "role": "Alumni"

content/team/terminal-committee.json

@@ -1,22 +1,29 @@
 [
   {
-    "name": "Daniel Liu",
+    "name": "Yiao Shen"
-    "role": ""
   },
   {
-    "name": "David Hui",
+    "name": "Devin Lin"
-    "role": ""
   },
   {
-    "name": "Devin Lin",
+    "name": "Seshan Ravikumar"
-    "role": ""
   },
   {
-    "name": "Joseph Wang",
+    "name": "Daniel Liu"
-    "role": ""
   },
   {
-    "name": "Seshan Ravikumar",
+    "name": "Joseph Wang"
-    "role": ""
+  },
+  {
+    "name": "David Hui"
+  },
+  {
+    "name": "Rahul Tandon"
+  },
+  {
+    "name": "Justin Toft"
+  },
+  {
+    "name": "Patrick Luo"
   }
-]
+]

content/team/web-committee.json

@@ -8,23 +8,19 @@
     "role": "Team Lead"
   },
   {
-    "name": "Beihao Zhou",
+    "name": "Beihao Zhou"
-    "role": "Developer"
   },
   {
-    "name": "Emily Chiu",
+    "name": "Emily Chiu"
-    "role": "Developer"
   },
   {
-    "name": "Jared He",
+    "name": "Jared He"
-    "role": "Developer"
   },
   {
-    "name": "Shahan NedaDahandeh",
+    "name": "Shahan NedaDahandeh"
-    "role": "Developer"
   },
   {
     "name": "Aditya Thakral",
-    "role": "Alumni"
+    "role": "Advisor"
   }
 ]

lib/team.ts

@@ -30,7 +30,7 @@ const orderedExecPositions: string[] = [
 
 export interface Metadata {
   name: string;
-  role: string;
+  role?: string;
   image: string;
 }
 

pages/about/team.tsx

@@ -16,13 +16,13 @@ import {
   getMemberImagePath,
 } from "@/lib/team";
 
+import coordinatorsData from "../../content/team/coordinators-team.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";
@@ -36,13 +36,13 @@ interface SerializedExec {
 
 interface Props {
   execs: SerializedExec[];
+  coordinators: Metadata[];
   design: Metadata[];
   discord: Metadata[];
   events: Metadata[];
   external: Metadata[];
   marketing: Metadata[];
   photography: Metadata[];
-  reps: Metadata[];
   website: Metadata[];
   systems: Metadata[];
   terminal: Metadata[];
@@ -50,18 +50,23 @@ interface Props {
 
 export default function Team({
   execs,
+  coordinators,
   design,
   discord,
   events,
   external,
   marketing,
   photography,
-  reps,
   website,
   systems,
   terminal,
 }: Props) {
   const teams = [
+    {
+      id: "coordinators",
+      name: "Community Coordinators",
+      members: coordinators,
+    },
     {
       id: "design",
       name: "Design Team",
@@ -92,14 +97,9 @@ export default function Team({
       name: "Photography Team",
       members: photography,
     },
-    {
-      id: "reps",
-      name: "Class Representatives",
-      members: reps,
-    },
     {
       id: "website",
-      name: "Website Committee",
+      name: "Web Committee",
       members: website,
     },
     {
@@ -122,14 +122,14 @@ export default function Team({
             <h1 className={styles.header}>Meet the Team!</h1>
             <div className={styles.nav}>
               <Link href="#execs">The Executives</Link>
+              <Link href="#coordinators">Community Coordinators</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">Web Committee</Link>
-              <Link href="#website">Website Committee</Link>
               <Link href="#system">Systems Committee</Link>
               <Link href="#terminal">Terminal Committee</Link>
             </div>
@@ -207,6 +207,22 @@ async function getTeamWithImages(team: TeamMember[]) {
   );
 }
 
+function memberComparer(a: Metadata, b: Metadata) {
+  return a.name.localeCompare(b.name);
+}
+
+function sortTeam(team: Metadata[]): Metadata[] {
+  const leads = team
+    .filter(({ role }) => role === "Team Lead")
+    .sort(memberComparer);
+  const general = team.filter(({ role }) => !role).sort(memberComparer);
+  const others = team
+    .filter(({ role }) => !!role && role !== "Team Lead")
+    .sort(memberComparer);
+
+  return [...leads, ...general, ...others];
+}
+
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const execNamePosPairs = await getExecNamePosPairs();
 
@@ -216,40 +232,51 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
     )
   )) as SerializedExec[];
 
-  const [
+  let [
+    coordinators,
     design,
     discord,
     events,
     external,
     marketing,
     photography,
-    reps,
     website,
     systems,
     terminal,
   ] = await Promise.all([
+    getTeamWithImages(coordinatorsData),
     getTeamWithImages(designData),
     getTeamWithImages(discordData),
     getTeamWithImages(eventsData),
     getTeamWithImages(externalData),
     getTeamWithImages(marketingData),
     getTeamWithImages(photographyData),
-    getTeamWithImages(repsData),
     getTeamWithImages(webData),
     getTeamWithImages(systemsData),
     getTeamWithImages(terminalData),
   ]);
 
+  coordinators = sortTeam(coordinators);
+  design = sortTeam(design);
+  discord = sortTeam(discord);
+  events = sortTeam(events);
+  external = sortTeam(external);
+  marketing = sortTeam(marketing);
+  photography = sortTeam(photography);
+  website = sortTeam(website);
+  systems = sortTeam(systems);
+  terminal = sortTeam(terminal);
+
   return {
     props: {
       execs,
+      coordinators,
       design,
       discord,
       events,
       external,
       marketing,
       photography,
-      reps,
       website,
       systems,
       terminal,