Clean up props and add links based on PR comments

pages/index.tsx

@@ -1,5 +1,3 @@
-import { ParsedUrlQuery } from "querystring";
-
 import { GetStaticProps } from "next";
 import { MDXRemote } from "next-mdx-remote";
 import React from "react";
@@ -9,6 +7,7 @@ import { DefaultLayout } from "@/components/DefaultLayout";
 import { EmailSignup } from "@/components/EmailSignup";
 import { EventDescriptionCard } from "@/components/EventDescriptionCard";
 import { Image } from "@/components/Image";
+import { Link } from "@/components/Link";
 import { NewsCard } from "@/components/NewsCard";
 import { SocialLinks } from "@/components/SocialLinks";
 import { Event, getUpcomingEvents } from "@/lib/events";
@@ -17,8 +16,9 @@ import { News, getRecentNews } from "@/lib/news";
 import styles from "./index.module.css";
 
 interface Props {
-  events: Event[];
-  news: News[];
+  numberOfEvents: number; // total number of upcoming events
+  events: Event[]; // array of 0 - 2 events
+  news: News;
 }
 
 export default function Home(props: Props) {
@@ -48,52 +48,58 @@ export default function Home(props: Props) {
       </DefaultLayout>
       <div className={styles.cardsBackground}>
         <div className={styles.cards}>
-          {/* TODO: add links to past/upcoming events and past news */}
           <section className={styles.events}>
             <h1 className={styles.cardsHeading}>Upcoming Events</h1>
-            <p className={styles.cardsDescription}>See past events here</p>
+            <p className={styles.cardsDescription}>
+              See past events{" "}
+              <Link href="/events/archive">
+                <a title="Events Archive">here</a>
+              </Link>
+            </p>
             <hr className={styles.cardsDividingLine} />
-            {props.events.length == 0 ? (
+            {props.numberOfEvents == 0 ? (
               <p>
                 There are no upcoming events right now. Please check back later!
               </p>
             ) : null}
             <div className={styles.eventCards}>
               {props.events.length > 0
-                ? props.events
-                    .slice(0, 2)
-                    .map((event) => (
-                      <EventDescriptionCard
-                        {...event.metadata}
-                        date={new Date(event.metadata.date)}
-                        key={
-                          event.metadata.name + event.metadata.date.toString()
-                        }
-                      />
-                    ))
+                ? props.events.map((event) => (
+                    <EventDescriptionCard
+                      {...event.metadata}
+                      date={new Date(event.metadata.date)}
+                      key={event.metadata.name + event.metadata.date.toString()}
+                    />
+                  ))
                 : null}
             </div>
-            {props.events.length > 2 ? (
-              <p>See more upcoming events here</p>
+            {props.numberOfEvents > 2 ? (
+              <p>
+                See more upcoming events{" "}
+                <Link href="/events">
+                  <a title="Events">here</a>
+                </Link>
+              </p>
             ) : null}
           </section>
           <section className={styles.news} id="news">
             <h1 className={styles.cardsHeading}>News</h1>
             <p className={styles.cardsDescription}>
               Updates from our execs! <br />
-              See past news here
+              See past news{" "}
+              <Link href="/news/archive">
+                <a title="News Archive">here</a>
+              </Link>
             </p>
             <hr className={styles.cardsDividingLine} />
-            {props.news.length > 0 ? (
+            {
               <NewsCard
-                {...props.news[0].metadata}
-                date={new Date(props.news[0].metadata.date)}
+                {...props.news.metadata}
+                date={new Date(props.news.metadata.date)}
               >
-                <MDXRemote {...props.news[0].content} />
+                <MDXRemote {...props.news.content} />
               </NewsCard>
-            ) : (
-              <p>There is no news right now. Please check back later!</p>
-            )}
+            }
           </section>
         </div>
       </div>
@@ -109,10 +115,14 @@ Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
   return <div className={styles.page}>{props.children}</div>;
 };
 
-type Params = ParsedUrlQuery;
-
-export const getStaticProps: GetStaticProps<Props, Params> = async () => {
-  const events = await getUpcomingEvents();
-  const news = await getRecentNews();
-  return { props: { events, news } };
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  const upcomingEvents = await getUpcomingEvents();
+  const recentNews = await getRecentNews();
+  return {
+    props: {
+      numberOfEvents: upcomingEvents.length,
+      events: upcomingEvents.slice(0, 2),
+      news: recentNews[0],
+    },
+  };
 };