Create sorting

components/TeamMember.tsx

@@ -1,26 +1,26 @@
 import React from "react";
 
+import { Metadata } from "@/lib/team";
+
 import { Image } from "./Image";
 
 import styles from "./TeamMember.module.css";
 
-interface TeamMemberProps {
+export const TeamMember: React.FC<Metadata> = (metadata: Metadata) => {
-  name: string;
-  role: string;
-  image: string;
-}
-
-export const TeamMember: React.FC<TeamMemberProps> = ({
-  name,
-  role,
-  image,
-}) => {
   return (
     <div className={styles.container}>
-      <Image className={styles.img} src={image} alt={`Picture of ${name}`} />
+      <Image
+        className={styles.img}
+        src={metadata.image}
+        alt={`Picture of ${metadata.name}`}
+      />
       <div className={styles.caption}>
-        <div className={styles.name}>{name}</div>
+        <div className={styles.name}>{metadata.name}</div>
-        <div className={styles.role}>{role}</div>
+        <div className={styles.role}>
+          {Object.prototype.hasOwnProperty.call(metadata, "role")
+            ? metadata.role
+            : ""}
+        </div>
       </div>
     </div>
   );

content/team/external-affairs-team.json

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

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"
   }
-]
+]

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

@@ -146,7 +146,7 @@ export default function Team({
           {execs.map((exec) => {
             return (
               <div key={exec.metadata.name}>
-                <TeamMemberCard {...exec.metadata}>
+                <TeamMemberCard role="" {...exec.metadata}>
                   <MDXRemote {...exec.content} />
                 </TeamMemberCard>
               </div>
@@ -207,6 +207,25 @@ async function getTeamWithImages(team: TeamMember[]) {
   );
 }
 
+function sortTeam(team: Metadata[]): Metadata[] {
+  const teamLeads: Metadata[] = [];
+  const teamMembers: Metadata[] = [];
+  const teamOthers: Metadata[] = [];
+  for (const member of team) {
+    if (!Object.prototype.hasOwnProperty.call(member, "role")) {
+      teamMembers.push(member);
+    } else if (member.role === "Team Lead") {
+      teamLeads.push(member);
+    } else {
+      teamOthers.push(member);
+    }
+  }
+  teamLeads.sort((a, b) => a.name.localeCompare(b.name));
+  teamMembers.sort((a, b) => a.name.localeCompare(b.name));
+  teamOthers.sort((a, b) => a.name.localeCompare(b.name));
+  return [...teamLeads, ...teamMembers, ...teamOthers];
+}
+
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const execNamePosPairs = await getExecNamePosPairs();
 
@@ -216,7 +235,7 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
     )
   )) as SerializedExec[];
 
-  const [
+  let [
     design,
     discord,
     events,
@@ -240,6 +259,17 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
     getTeamWithImages(terminalData),
   ]);
 
+  design = sortTeam(design);
+  discord = sortTeam(discord);
+  events = sortTeam(events);
+  external = sortTeam(external);
+  marketing = sortTeam(marketing);
+  photography = sortTeam(photography);
+  reps = sortTeam(reps);
+  website = sortTeam(website);
+  systems = sortTeam(systems);
+  terminal = sortTeam(terminal);
+
   return {
     props: {
       execs,