From 0f1e8b7e8198be64c89285cd79454d446b76149c Mon Sep 17 00:00:00 2001
From: j285he <j285he@localhost>
Date: Wed, 23 Mar 2022 20:23:21 -0400
Subject: [PATCH] Link from [term] to [term]/[event] (#412)

Closes #189

https://csclub.uwaterloo.ca/~a3thakra/csc/j285he-term-to-term-event/events/

Co-authored-by: Jared He <66887902+jaredjhe@users.noreply.github.com>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/412
Reviewed-by: n3parikh <n3parikh@csclub.uwaterloo.ca>
---
 components/EventCard.module.css        |  4 ++++
 components/EventCard.tsx               | 16 +++++++++++++++-
 components/MiniEventCard.module.css    |  4 ++++
 components/MiniEventCard.tsx           | 13 ++++++++++---
 lib/events.ts                          |  6 ++++++
 pages/events/[year]/[term]/[event].tsx |  1 +
 pages/events/[year]/[term]/index.tsx   |  1 +
 7 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/components/EventCard.module.css b/components/EventCard.module.css
index 3f126c9b..00d28492 100644
--- a/components/EventCard.module.css
+++ b/components/EventCard.module.css
@@ -31,6 +31,10 @@
   margin-bottom: 0;
 }
 
+.content > h1 a {
+  color: var(--primary-heading);
+}
+
 .content,
 .content > h2 {
   font-weight: 400;
diff --git a/components/EventCard.tsx b/components/EventCard.tsx
index 40120970..deda868b 100644
--- a/components/EventCard.tsx
+++ b/components/EventCard.tsx
@@ -18,6 +18,10 @@ interface EventCardProps {
   permaLink: string;
   showDescription?: boolean;
   children: ReactNode;
+  year: string;
+  term: string;
+  slug: string;
+  titleLinked: boolean;
 }
 
 export function EventCard({
@@ -30,6 +34,10 @@ export function EventCard({
   registerLink,
   children,
   showDescription = false,
+  year,
+  term,
+  slug,
+  titleLinked,
 }: EventCardProps) {
   return (
     <article className={styles.card}>
@@ -54,7 +62,13 @@ export function EventCard({
           showDescription ? styles.mobileShowDescriptionContent : "",
         ].join(" ")}
       >
-        <h1>{name}</h1>
+        <h1>
+          {titleLinked ? (
+            <Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
+          ) : (
+            name
+          )}
+        </h1>
         <h2>
           <EventSetting date={date} online={online} location={location} />
         </h2>
diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index 482620e1..4ffcbd99 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -14,6 +14,10 @@
   margin: 0;
 }
 
+.name a {
+  color: var(--primary-heading);
+}
+
 .nameSpacer {
   width: calc(140rem / 16);
 }
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index be2c7928..fc73c3b1 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -1,32 +1,39 @@
 import React, { ReactNode } from "react";
 
 import { EventSetting } from "./EventSetting";
+import { Link } from "./Link";
 
 import styles from "./MiniEventCard.module.css";
 
-interface Props {
+interface MiniEventCardProps {
   name: string;
   description: ReactNode;
   short: string;
   online: boolean;
   location: string;
   date: Date;
+  year: string;
+  term: string;
+  slug: string;
 }
 
-export const MiniEventCard: React.FC<Props> = ({
+export const MiniEventCard: React.FC<MiniEventCardProps> = ({
   name,
   short,
   description,
   location,
   date,
   online,
+  year,
+  term,
+  slug,
 }) => {
   return (
     <details className={styles.card}>
       <summary>
         <div onClick={(event) => event.preventDefault()}>
           <h2 className={styles.name}>
-            <div>{name}</div>
+            <Link href={`/events/${year}/${term}/${slug}`}>{name}</Link>
             <div className={styles.nameSpacer}></div>
           </h2>
           <div className={styles.info}>
diff --git a/lib/events.ts b/lib/events.ts
index 76432930..32df20fc 100644
--- a/lib/events.ts
+++ b/lib/events.ts
@@ -53,6 +53,9 @@ interface Metadata {
   location: string;
   permaLink: string;
   registerLink?: string;
+  year: string;
+  term: string;
+  slug: string;
 }
 
 export interface Event {
@@ -82,6 +85,9 @@ export async function getEventBySlug(
       ).toString(),
       // permaLink is based on the directory structure in /pages
       permaLink: `/events/${year}/${term}/${slug}`,
+      year: year,
+      term: term,
+      slug: slug,
     } as Metadata,
   };
 }
diff --git a/pages/events/[year]/[term]/[event].tsx b/pages/events/[year]/[term]/[event].tsx
index ef30a6a5..23c774ce 100644
--- a/pages/events/[year]/[term]/[event].tsx
+++ b/pages/events/[year]/[term]/[event].tsx
@@ -28,6 +28,7 @@ export default function EventInfoPage({ year, term, event }: Props) {
         {...event.metadata}
         date={new Date(event.metadata.date)}
         showDescription
+        titleLinked={false}
       >
         <MDXRemote {...event.content} />
       </EventCard>
diff --git a/pages/events/[year]/[term]/index.tsx b/pages/events/[year]/[term]/index.tsx
index 8830d624..d1c1c451 100644
--- a/pages/events/[year]/[term]/index.tsx
+++ b/pages/events/[year]/[term]/index.tsx
@@ -75,6 +75,7 @@ export default function TermPage(props: Props) {
                 {...metadata}
                 date={new Date(metadata.date)}
                 key={metadata.name + metadata.date.toString()}
+                titleLinked={true}
               >
                 <MDXRemote {...content} />
               </EventCard>