PR fixes

pages/events/[year]/[term]/index.module.css

@@ -3,6 +3,11 @@
   margin-bottom: calc(60rem / 16);
 }
 
+.main > h2 {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--primary-heading);
+}
+
 @media only screen and (max-width: calc(768rem / 16)) {
   .main {
     margin-top: calc(60rem / 16);

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

@@ -14,13 +14,14 @@ import {
   Event,
 } from "@/lib/events";
 
-import styles from "./term.module.css";
+import styles from "./index.module.css";
 
 interface Props {
   term: string;
   year: string;
   pastEvents: Event[];
   futureEvents: Event[];
+  currentTerm: boolean;
 }
 
 export default function Term(props: Props) {
@@ -31,8 +32,7 @@ export default function Term(props: Props) {
     <div className={styles.main}>
       {hasFutureEvents && (
         <>
-          <h2>Upcoming Events:</h2>
-          <hr />
+          <h2>Upcoming Events</h2>
           <div className={styles.miniEventCards}>
             {props.futureEvents.map(({ content, metadata }) => (
               <EventCard
@@ -46,24 +46,16 @@ export default function Term(props: Props) {
           </div>
         </>
       )}
-      {hasFutureEvents && hasPastEvents && (
-        <>
-          <h2>Past Events:</h2>
-          <hr />
-        </>
-      )}
-      {!hasFutureEvents && (
-        <>
-          <h2>
-            Events Archive:
-            <span className={styles.blue}>
-              {` ${props.term.charAt(0).toUpperCase()}${props.term.slice(1)} ${
-                props.year
-              }`}
-            </span>
-          </h2>
-          <hr />
-        </>
+      {hasPastEvents && props.currentTerm && <h2>Past Events</h2>}
+      {hasPastEvents && !props.currentTerm && (
+        <h2>
+          Events Archive:
+          <span className={styles.blue}>
+            {` ${props.term.charAt(0).toUpperCase()}${props.term.slice(1)} ${
+              props.year
+            }`}
+          </span>
+        </h2>
       )}
       <div className={styles.miniEventCards}>
         {props.pastEvents.map(({ content, metadata }) => (
@@ -101,20 +93,23 @@ export const getStaticProps: GetStaticProps<Props, Params> = async (
       new Date(a.metadata.date).getTime() - new Date(b.metadata.date).getTime()
   );
 
-  const pastEvents = events.filter(
-    (event) => new Date(event.metadata.date).getTime() < Date.now()
-  );
+  const pastEvents = events
+    .filter((event) => new Date(event.metadata.date).getTime() < Date.now())
+    .reverse();
 
   const futureEvents = events.filter(
     (event) => new Date(event.metadata.date).getTime() >= Date.now()
   );
 
+  const current = getCurrentTerm();
+
   return {
     props: {
       term: term,
       year: year,
       pastEvents: pastEvents,
       futureEvents: futureEvents,
+      currentTerm: term === current.term && year === current.year,
     },
   };
 };
@@ -137,3 +132,28 @@ export const getStaticPaths: GetStaticPaths<Params> = async () => {
     fallback: false,
   };
 };
+
+export function getCurrentTerm() {
+  const date = new Date();
+  let term = "";
+  const year = date.getUTCFullYear().toString();
+
+  if (
+    new Date(`${year}-01-01`).getTime() <= date.getTime() &&
+    date.getTime() <= new Date(`${year}-04-30`).getTime()
+  ) {
+    term = "winter";
+  } else if (
+    new Date(`${year}-05-01`).getTime() <= date.getTime() &&
+    date.getTime() <= new Date(`${year}-08-31`).getTime()
+  ) {
+    term = "spring";
+  } else if (
+    new Date(`${year}-09-01`).getTime() <= date.getTime() &&
+    date.getTime() <= new Date(`${year}-12-31`).getTime()
+  ) {
+    term = "fall";
+  }
+
+  return { term, year };
+}