refactor to TeamMember

pages/about/executives.tsx

@@ -0,0 +1,126 @@
+import { GetStaticProps } from "next";
+import React from "react";
+
+import { Bubble } from "@/components/Bubble";
+import { DefaultLayout } from "@/components/DefaultLayout";
+import { Image } from "@/components/Image";
+import { Link } from "@/components/Link";
+import { TeamMember } from "@/components/TeamMember";
+import { Title } from "@/components/Title";
+import { Metadata, getMemberImagePath } from "@/lib/team";
+
+import F21ExecData from "../../content/past-execs/2021/fall.json";
+import S21ExecData from "../../content/past-execs/2021/spring.json";
+import W21ExecData from "../../content/past-execs/2021/winter.json";
+
+import styles from "./team.module.css";
+
+interface Props {
+  F21Exec: Metadata[];
+  S21Exec: Metadata[];
+  W21Exec: Metadata[];
+}
+
+export default function Team({ F21Exec, S21Exec, W21Exec }: Props) {
+  const teams = [
+    {
+      id: "F21Exec",
+      name: "Fall 2021",
+      members: F21Exec,
+    },
+    {
+      id: "S21Exec",
+      name: "Spring 2021",
+      members: S21Exec,
+    },
+    {
+      id: "W21Exec",
+      name: "Winter 2021",
+      members: W21Exec,
+    },
+  ];
+  return (
+    <>
+      <Title>Team</Title>
+      <DefaultLayout>
+        <div className={styles.headerContainer}>
+          <div className={styles.headerTextContainer}>
+            <h1 className={styles.header}>Meet the Past Executives!</h1>
+            <div className={styles.nav}>
+              <Link href="#F21Exec">Fall 2021</Link>
+              <Link href="#S21Exec">Spring 2021</Link>
+              <Link href="#W21Exec">Winter 2021</Link>
+            </div>
+          </div>
+          <Image src="images/team/team-codey.svg" className={styles.codey} />
+        </div>
+        {teams.map((team) => {
+          return (
+            <div id={team.id} key={team.id}>
+              <h2 className={styles.subheading}>{team.name}</h2>
+              <MembersList team={team.members} />
+            </div>
+          );
+        })}
+      </DefaultLayout>
+      <div className={styles.elections}>
+        <Bubble>
+          <h2 className={styles.electionSubheading}>More information</h2>
+          To learn more about our past executives, see our{" "}
+          <Link href="https://wiki.csclub.uwaterloo.ca/Past_Executive">
+            Wikipedia
+          </Link>
+          .
+        </Bubble>
+      </div>
+    </>
+  );
+}
+
+Team.Layout = function TeamLayout(props: { children: React.ReactNode }) {
+  return <div>{props.children}</div>;
+};
+
+interface MembersProps {
+  team: Metadata[];
+}
+
+function MembersList(props: MembersProps) {
+  return (
+    <div className={styles.members}>
+      {props.team.map((member) => (
+        <TeamMember {...member} key={member.name} />
+      ))}
+    </div>
+  );
+}
+
+type TeamMember = Omit<Metadata, "image"> & { image?: string };
+
+async function getTeamWithImages(team: TeamMember[]) {
+  return await Promise.all(
+    team.map(async (member) => {
+      const image = member.image ?? (await getMemberImagePath(member.name));
+      return {
+        ...member,
+        image,
+      };
+    })
+  );
+}
+
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  const [F21Exec, S21Exec, W21Exec] = await Promise.all([
+    getTeamWithImages(F21ExecData),
+    getTeamWithImages(S21ExecData),
+    getTeamWithImages(W21ExecData),
+  ]);
+
+  return {
+    props: {
+      F21Exec,
+      S21Exec,
+      W21Exec,
+    },
+  };
+};

pages/about/executives/[year]/[term].tsx

@@ -1,133 +0,0 @@
-import { ParsedUrlQuery } from "querystring";
-
-import { GetStaticPaths, GetStaticProps } from "next";
-import React from "react";
-
-import { Link } from "@/components/Link";
-import { TeamMemberCard } from "@/components/TeamMemberCard";
-import { Title } from "@/components/Title";
-import {
-  Exec,
-  getExecsPageProps,
-  getExecsYears,
-  getExecsTermsByYear,
-} from "@/lib/executives";
-import { capitalize, Term } from "@/utils";
-
-import styles from "./index.module.css";
-
-export interface Props {
-  year: string;
-  term: Term;
-  execs: Exec[];
-  pastTerms: { year: string; term: Term }[];
-  futureTerms: { year: string; term: Term }[];
-}
-
-export default function TermPage(props: Props) {
-  let headerTerms = [{ year: props.year, term: props.term }];
-
-  // p, Current, f
-  if (props.pastTerms.length > 0 && props.futureTerms.length > 0) {
-    headerTerms = [
-      ...props.pastTerms.slice(-1),
-      ...headerTerms,
-      ...props.futureTerms.slice(0, 1),
-    ];
-  }
-  // p, p, Current
-  else if (props.pastTerms.length > 0) {
-    headerTerms = [...props.pastTerms.slice(-2), ...headerTerms];
-  }
-  // Current, f, f
-  else {
-    headerTerms = [...headerTerms, ...props.futureTerms.slice(0, 2)];
-  }
-
-  headerTerms.reverse();
-
-  return (
-    <div className={styles.main}>
-      <Title>{["Executives", `${capitalize(props.term)} ${props.year}`]}</Title>
-      <div className={styles.header}>
-        {headerTerms.map((link) => (
-          <HeaderLink
-            {...link}
-            isCurrentTerm={link.year === props.year && link.term === props.term}
-            key={link.year + link.term}
-          />
-        ))}
-        <Link href="/about/executives/archive">Archive</Link>
-      </div>
-
-      <section>
-        <h1 className={styles.headerlink}>
-          Executives Archive:
-          <span className={styles.blue}>
-            {` ${capitalize(props.term)} ${props.year}`}
-          </span>
-        </h1>
-        <div className={styles.execs}>
-          {props.execs.map((exec) => {
-            return (
-              <div key={exec.name}>
-                <TeamMemberCard {...exec}></TeamMemberCard>
-              </div>
-            );
-          })}
-        </div>
-        <p className={styles.wikilink}>
-          See more of our past executives{" "}
-          <Link href="https://wiki.csclub.uwaterloo.ca/Past_Executive">
-            here
-          </Link>
-          .
-        </p>
-      </section>
-    </div>
-  );
-}
-
-function HeaderLink(props: {
-  year: string;
-  term: Term;
-  isCurrentTerm?: boolean;
-}) {
-  return (
-    <Link href={`/about/executives/${props.year}/${props.term}`}>
-      <span className={props.isCurrentTerm ? styles.curTerm : ""}>
-        {`${capitalize(props.term)} ${props.year}`}
-      </span>
-    </Link>
-  );
-}
-
-interface Params extends ParsedUrlQuery {
-  year: string;
-  term: Term;
-}
-
-export const getStaticProps: GetStaticProps<Props, Params> = async (
-  context
-) => {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return { props: await getExecsPageProps(context.params!) };
-};
-
-export const getStaticPaths: GetStaticPaths<Params> = async () => {
-  const years = await getExecsYears();
-  const paths = (
-    await Promise.all(
-      years.map(async (year) => {
-        const terms = await getExecsTermsByYear(year);
-        return terms.map((curTerm) => ({
-          params: { year: year, term: curTerm },
-        }));
-      })
-    )
-  ).flat();
-  return {
-    paths: paths,
-    fallback: false,
-  };
-};

pages/about/executives/[year]/index.module.css

@@ -1,51 +0,0 @@
-.main {
-  margin-top: calc(60rem / 16);
-}
-
-.headerlink {
-  padding-bottom: calc(16rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
-  margin-bottom: calc(66rem / 16);
-}
-
-.blue {
-  color: var(--primary-accent);
-}
-
-.header {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.header a {
-  color: var(--text);
-  font-size: calc(18rem / 16);
-  margin-right: 1rem;
-}
-
-.header a .curTerm {
-  color: var(--primary-accent);
-}
-
-.execs {
-  display: flex;
-  flex-direction: column;
-  gap: calc(56rem / 16);
-  margin-bottom: calc(56rem / 16);
-  margin: auto;
-  width: 80%;
-}
-
-@media only screen and (max-width: calc(768rem / 16)) {
-  .execs {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(calc(130rem / 16), 1fr));
-    justify-items: center;
-    column-gap: 0;
-  }
-}
-
-.wikilink {
-  text-align: right;
-  margin: calc(32rem / 16) calc(96rem / 16);
-}

pages/about/executives/[year]/index.tsx

@@ -1,65 +0,0 @@
-import { ParsedUrlQuery } from "querystring";
-
-import { GetStaticPaths, GetStaticProps } from "next";
-import React from "react";
-
-import { Link } from "@/components/Link";
-import { Title } from "@/components/Title";
-import { getExecsYears, getExecsTermsByYear } from "@/lib/executives";
-import { Term } from "@/utils";
-
-import styles from "./index.module.css";
-
-interface Props {
-  year: string;
-  terms: Term[];
-}
-
-export default function Year(props: Props) {
-  return (
-    <div className={styles.main}>
-      <Title>{["Executives", props.year]}</Title>
-      <h2>
-        Executives Archive:
-        <span className={styles.blue}>{` ${props.year}`}</span>
-      </h2>
-      <ul className={styles.list}>
-        {props.terms.map((term) => (
-          <li key={`${props.year}-${term}`}>
-            <Link href={`/executives/${props.year}/${term}`}>
-              {`${term.charAt(0).toUpperCase()}${term.slice(1)}`}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-interface Params extends ParsedUrlQuery {
-  year: string;
-}
-
-export const getStaticProps: GetStaticProps<Props, Params> = async (
-  context
-) => {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const { year } = context.params!;
-  return {
-    props: {
-      year: year,
-      terms: await getExecsTermsByYear(year),
-    },
-  };
-};
-
-export const getStaticPaths: GetStaticPaths<Params> = async () => {
-  const years = await getExecsYears();
-  const paths = years.map((curYear) => ({
-    params: { year: curYear },
-  }));
-  return {
-    paths: paths,
-    fallback: false,
-  };
-};

pages/about/executives/archive.tsx

@@ -1,29 +0,0 @@
-import { GetStaticProps } from "next";
-
-import { ArchivePage, Props } from "@/components/ArchivePage";
-import {
-  ShapesConfig,
-  defaultGetShapesConfig,
-  GetShapesConfig,
-} from "@/components/ShapesBackground";
-import { getExecsTermsByYear, getExecsYears } from "@/lib/executives";
-
-export default ArchivePage;
-
-ArchivePage.getShapesConfig = ((width, height) => {
-  return window.innerWidth <= 768
-    ? ({} as ShapesConfig)
-    : defaultGetShapesConfig(width, height);
-}) as GetShapesConfig;
-
-export const getStaticProps: GetStaticProps<Props> = async () => {
-  const years = (await getExecsYears()).reverse();
-  const yearsWithTerms = await Promise.all(
-    years.map(async (year) => ({
-      year,
-      terms: (await getExecsTermsByYear(year)).reverse(),
-    }))
-  );
-
-  return { props: { items: yearsWithTerms, type: "executives" } };
-};

pages/about/executives/index.tsx

@@ -1,13 +0,0 @@
-import { GetStaticProps } from "next";
-
-import { getCurrentTerm, getPastTerm } from "@/lib/events";
-import { getExecsPageProps } from "@/lib/executives";
-
-import TermPage, { Props } from "./[year]/[term]";
-
-export default TermPage;
-
-export const getStaticProps: GetStaticProps<Props> = async () => {
-  const { year, term } = getCurrentTerm();
-  return { props: await getExecsPageProps(getPastTerm(year, term)) };
-};