From 19617b8bad8be9db4e6cb2e5152fe4745ae4f81b Mon Sep 17 00:00:00 2001
From: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Date: Tue, 10 Aug 2021 17:08:29 -0400
Subject: [PATCH] Add news archive page

---
 pages/news/archive.module.css | 12 +++++++++
 pages/news/archive.tsx        | 49 +++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 pages/news/archive.module.css
 create mode 100644 pages/news/archive.tsx

diff --git a/pages/news/archive.module.css b/pages/news/archive.module.css
new file mode 100644
index 00000000..a05f7b45
--- /dev/null
+++ b/pages/news/archive.module.css
@@ -0,0 +1,12 @@
+.page {
+  margin-bottom: calc(40rem / 16);
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+}
+
+.list > li {
+  line-height: 3;
+}
diff --git a/pages/news/archive.tsx b/pages/news/archive.tsx
new file mode 100644
index 00000000..0ae61722
--- /dev/null
+++ b/pages/news/archive.tsx
@@ -0,0 +1,49 @@
+import { getNewsTermsByYear, getNewsYears } from "lib/news";
+import { GetStaticProps } from "next";
+import React from "react";
+
+import { Link } from "@/components/Link";
+
+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>
+  );
+}
+
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  const years = (await getNewsYears()).reverse();
+  const yearsWithTerms = await Promise.all(
+    years.map(async (year) => ({
+      year,
+      terms: (await getNewsTermsByYear(year)).reverse(),
+    }))
+  );
+
+  return { props: { items: yearsWithTerms } };
+};
+
+function capitalize(str: string) {
+  return str.slice(0, 1).toUpperCase() + str.slice(1);
+}