Add futureEvents pastEvents EventCard logic

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

@@ -1,6 +1,7 @@
 import { MDXRemote } from "next-mdx-remote";
 import React from "react";
 
+import { EventCard } from "../../../../components/EventCard";
 import { MiniEventCard } from "../../../../components/MiniEventCard";
 import {
   getEventYears,
@@ -68,11 +69,14 @@ export async function getStaticProps(context: Context): Promise<{
   );
 
   const pastEvents = events.filter(
-    (event) => new Date(event.metadata.date).getTime() < Date.now()
+    (event) =>
+      new Date(event.metadata.date).getTime() < new Date("2018/03/01").getTime()
   );
 
   const futureEvents = events.filter(
-    (event) => new Date(event.metadata.date).getTime() >= Date.now()
+    (event) =>
+      new Date(event.metadata.date).getTime() >=
+      new Date("2018/03/01").getTime()
   );
 
   return {
@@ -86,21 +90,48 @@ export async function getStaticProps(context: Context): Promise<{
 }
 
 const Term = (props: Props) => {
-  console.log(props.pastEvents.length)
-  console.log(props.futureEvents.length)
+  const hasPastEvents = props.pastEvents.length !== 0;
+  const hasFutureEvents = props.futureEvents.length !== 0;
 
   return (
     <div className={styles.main}>
-      <h2 className={styles.heading2}>
-        Events Archive:
-        <span className={styles.blue}>
-          {` ${props.term.charAt(0).toUpperCase()}${props.term.slice(1)} ${
-            props.year
-          }`}
-        </span>
-      </h2>
-      <hr />
-      PAST
+      {hasFutureEvents && (
+        <>
+          <h2 className={styles.heading2}>Upcoming Events:</h2>
+          <hr />
+          <div className={styles.miniEventCards}>
+            {props.futureEvents.map(({ content, metadata }) => (
+              <EventCard
+                {...metadata}
+                date={new Date(metadata.date)}
+                key={metadata.name + metadata.date.toString()}
+              >
+                <MDXRemote {...content} />
+              </EventCard>
+            ))}
+          </div>
+        </>
+      )}
+      {hasFutureEvents && hasPastEvents && (
+        <>
+          <h2 className={styles.heading2}>Past Events:</h2>
+          <hr />
+        </>
+      )}
+      {!hasFutureEvents && (
+        <>
+          <h2 className={styles.heading2}>
+            Events Archive:
+            <span className={styles.blue}>
+              {` ${props.term.charAt(0).toUpperCase()}${props.term.slice(1)} ${
+                props.year
+              }`}
+            </span>
+          </h2>
+          <hr />
+        </>
+      )}
+
       <div className={styles.miniEventCards}>
         {props.pastEvents.map(({ content, metadata }) => (
           <MiniEventCard
@@ -111,17 +142,6 @@ const Term = (props: Props) => {
           />
         ))}
       </div>
-      FUTURA
-      <div className={styles.miniEventCards}>
-        {props.futureEvents.map(({ content, metadata }) => (
-          <MiniEventCard
-            {...metadata}
-            date={new Date(metadata.date)}
-            description={<MDXRemote {...content} />}
-            key={metadata.name + metadata.date.toString()}
-          />
-        ))}
-      </div>
     </div>
   );
 };

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

@@ -8,11 +8,11 @@
 .heading2 {
   font-weight: 700;
   font-size: 2.25rem;
-  color: var(--purple-2);
+  color: var(--primary-heading);
 }
 
 .blue {
-  color: var(--blue-2)
+  color: var(--primary-accent)
 }
 
 .miniEventCards {