Add events archive (#187)

Closes #117

Reviewed-on: #187
Reviewed-by: j285he <j285he@localhost>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>

components/ArchivePage.module.css

@@ -2,6 +2,11 @@
   margin-bottom: calc(40rem / 16);
 }
 
+.page > h1 {
+  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  padding-bottom: 1rem;
+}
+
 .list {
   list-style: none;
   padding: 0;

components/ArchivePage.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+import { Link } from "@/components/Link";
+import {
+  ShapesConfig,
+  GetShapesConfig,
+  defaultGetShapesConfig,
+} from "@/components/ShapesBackground";
+import { capitalize } from "@/utils";
+
+import styles from "./ArchivePage.module.css";
+
+export interface Props {
+  type: "news" | "events";
+  items: {
+    year: string;
+    terms: string[];
+  }[];
+}
+
+export function ArchivePage({ items, type }: Props) {
+  return (
+    <div className={styles.page}>
+      <h1>{capitalize(type)} Archive</h1>
+      <ul className={styles.list}>
+        {items.map(({ year, terms }) =>
+          terms.map((term) => (
+            <li key={`/${type}/${year}/${term}`}>
+              <Link href={`/${type}/${year}/${term}`}>
+                {capitalize(term)} {year}
+              </Link>
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+}
+
+ArchivePage.getShapesConfig = ((width, height) => {
+  return window.innerWidth <= 768
+    ? ({} as ShapesConfig)
+    : defaultGetShapesConfig(width, height);
+}) as GetShapesConfig;

pages/events/[year]/[term]/index.tsx

@@ -13,6 +13,7 @@ import {
   getEventYears,
   getEventTermsByYear,
 } from "@/lib/events";
+import { capitalize } from "@/utils";
 
 import styles from "./index.module.css";
 
@@ -154,7 +155,3 @@ export const getStaticPaths: GetStaticPaths<Params> = async () => {
     fallback: false,
   };
 };
-
-function capitalize(str: string) {
-  return str.slice(0, 1).toUpperCase() + str.slice(1);
-}

pages/events/archive.tsx

@@ -0,0 +1,18 @@
+import { GetStaticProps } from "next";
+
+import { ArchivePage, Props } from "@/components/ArchivePage";
+import { getEventTermsByYear, getEventYears } from "@/lib/events";
+
+export default ArchivePage;
+
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  const years = (await getEventYears()).reverse();
+  const yearsWithTerms = await Promise.all(
+    years.map(async (year) => ({
+      year,
+      terms: (await getEventTermsByYear(year)).reverse(),
+    }))
+  );
+
+  return { props: { items: yearsWithTerms, type: "events" } };
+};

pages/news/[year]/[term].tsx

@@ -17,6 +17,7 @@ import {
   getNewsYears,
   News,
 } from "@/lib/news";
+import { capitalize } from "@/utils";
 
 import styles from "./[term].module.css";
 
@@ -89,7 +90,3 @@ export const getStaticPaths: GetStaticPaths<Params> = async () => {
     fallback: false,
   };
 };
-
-function capitalize(str: string) {
-  return str.slice(0, 1).toUpperCase() + str.slice(1);
-}

pages/news/archive.tsx

@@ -1,47 +1,9 @@
-import { getNewsTermsByYear, getNewsYears } from "lib/news";
 import { GetStaticProps } from "next";
-import React from "react";
 
-import { Link } from "@/components/Link";
-import {
-  ShapesConfig,
-  GetShapesConfig,
-  defaultGetShapesConfig,
-} from "@/components/ShapesBackground";
+import { ArchivePage, Props } from "@/components/ArchivePage";
+import { getNewsTermsByYear, getNewsYears } from "@/lib/news";
 
-import styles from "./archive.module.css";
-
-interface Props {
-  items: {
-    year: string;
-    terms: string[];
-  }[];
-}
-
-export default function NewsArchive({ items }: Props) {
-  return (
-    <div className={styles.page}>
-      <h1>News Archive</h1>
-      <ul className={styles.list}>
-        {items.map(({ year, terms }) =>
-          terms.map((term) => (
-            <li key={`${year}-${term}`}>
-              <Link href={`/news/${year}/${term}`}>
-                {capitalize(term)} {year}
-              </Link>
-            </li>
-          ))
-        )}
-      </ul>
-    </div>
-  );
-}
-
-NewsArchive.getShapesConfig = ((width, height) => {
-  return window.innerWidth <= 768
-    ? ({} as ShapesConfig)
-    : defaultGetShapesConfig(width, height);
-}) as GetShapesConfig;
+export default ArchivePage;
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
   const years = (await getNewsYears()).reverse();
@@ -52,9 +14,5 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
     }))
   );
 
-  return { props: { items: yearsWithTerms } };
+  return { props: { items: yearsWithTerms, type: "news" } };
 };
-
-function capitalize(str: string) {
-  return str.slice(0, 1).toUpperCase() + str.slice(1);
-}

tsconfig.json

@@ -23,7 +23,8 @@
     "paths": {
       "@/components/*": ["components/*"],
       "@/lib/*": ["lib/*"],
-      "@/hooks/*": ["hooks/*"]
+      "@/hooks/*": ["hooks/*"],
+      "@/utils": ["utils"]
     }
   },
   "include": ["next-env.d.ts", "types.d.ts", "**/*.ts", "**/*.tsx"],

utils.ts

@@ -0,0 +1,3 @@
+export function capitalize(str: string) {
+  return str.slice(0, 1).toUpperCase() + str.slice(1);
+}