Add past/future events props

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

@@ -47,33 +47,48 @@ interface Context {
 interface Props {
   term: string;
   year: string;
-  pastEvents: string[];
-  futureEvents: string[];
+  pastEvents: Event[];
+  futureEvents: Event[];
 }
 
 export async function getStaticProps(context: Context): Promise<{
   props: Props;
 }> {
-  const events = await Promise.all(
-    (
-      await getEventsByTerm(context.params.year, context.params.term)
-    ).map((file: string) =>
-      getEventBySlug(context.params.year, context.params.term, file)
+  const events = (
+    await Promise.all(
+      (
+        await getEventsByTerm(context.params.year, context.params.term)
+      ).map((file: string) =>
+        getEventBySlug(context.params.year, context.params.term, file)
+      )
     )
+  ).sort(
+    (a, b) =>
+      new Date(a.metadata.date).getTime() - new Date(b.metadata.date).getTime()
   );
 
-  const curtime = Date.now();
+  const pastEvents = events.filter(
+    (event) => new Date(event.metadata.date).getTime() < Date.now()
+  );
+
+  const futureEvents = events.filter(
+    (event) => new Date(event.metadata.date).getTime() >= Date.now()
+  );
 
   return {
     props: {
       term: context.params.term,
       year: context.params.year,
-      events: events,
+      pastEvents: pastEvents,
+      futureEvents: futureEvents,
     },
   };
 }
 
 const Term = (props: Props) => {
+  console.log(props.pastEvents.length)
+  console.log(props.futureEvents.length)
+
   return (
     <div className={styles.main}>
       <h2 className={styles.heading2}>
@@ -85,8 +100,20 @@ const Term = (props: Props) => {
         </span>
       </h2>
       <hr />
+      PAST
+      <div className={styles.miniEventCards}>
+        {props.pastEvents.map(({ content, metadata }) => (
+          <MiniEventCard
+            {...metadata}
+            date={new Date(metadata.date)}
+            description={<MDXRemote {...content} />}
+            key={metadata.name + metadata.date.toString()}
+          />
+        ))}
+      </div>
+      FUTURA
       <div className={styles.miniEventCards}>
-        {props.events.map(({ content, metadata }) => (
+        {props.futureEvents.map(({ content, metadata }) => (
           <MiniEventCard
             {...metadata}
             date={new Date(metadata.date)}