www-new/pages/events/[year]/[term]/index.tsx

import { ParsedUrlQuery } from "querystring";

import { GetStaticPaths, GetStaticProps } from "next";
import { MDXRemote } from "next-mdx-remote";
import React from "react";

import { EventCard } from "@/components/EventCard";
import { Link } from "@/components/Link";
import { MiniEventCard } from "@/components/MiniEventCard";
import {
  Event,
  getProps,
  getEventYears,
  getEventTermsByYear,
} from "@/lib/events";

import styles from "./index.module.css";

export interface Props {
  year: string;
  term: string;
  pastEvents: Event[];
  futureEvents: Event[];
  isCurrentTerm: boolean;
  pastTerms: { year: string; term: string }[];
  futureTerms: { year: string; term: string }[];
}

export default function Term(props: Props) {
  const hasPastTerms = props.pastTerms.length !== 0;
  const hasFutureTerms = props.futureTerms.length !== 0;
  const hasPastEvents = props.pastEvents.length !== 0;
  const hasFutureEvents = props.futureEvents.length !== 0;
  return (
    <div className={styles.main}>
      {!hasPastTerms && hasFutureTerms && (
        <div className={styles.header}>
          <Link href={`/events/${props.year}/${props.term}`}>
            <span className={styles.curTerm}>
              {`${capitalize(props.term)} ${props.year}`}
            </span>
          </Link>
          <Link
            href={`/events/${props.futureTerms[0].year}/${props.futureTerms[0].term}`}
          >{`${capitalize(props.futureTerms[0].term)} ${
            props.futureTerms[0].year
          }`}</Link>
          <Link
            href={`/events/${props.futureTerms[1].year}/${props.futureTerms[1].term}`}
          >{`${capitalize(props.futureTerms[1].term)} ${
            props.futureTerms[1].year
          }`}</Link>
          <Link href={"/events/archives"}>Archives</Link>
        </div>
      )}
      {hasPastTerms && hasFutureTerms && (
        <div className={styles.header}>
          <Link
            href={`/events/${props.pastTerms[0].year}/${props.pastTerms[0].term}`}
          >{`${capitalize(props.pastTerms[0].term)} ${
            props.pastTerms[0].year
          }`}</Link>
          <Link href={`/events/${props.year}/${props.term}`}>
            <span className={styles.curTerm}>
              {`${capitalize(props.term)} ${props.year}`}
            </span>
          </Link>
          <Link
            href={`/events/${props.futureTerms[0].year}/${props.futureTerms[0].term}`}
          >{`${capitalize(props.futureTerms[0].term)} ${
            props.futureTerms[0].year
          }`}</Link>
          <Link href={"/events/archives"}>Archives</Link>
        </div>
      )}
      {hasPastTerms && !hasFutureTerms && (
        <div className={styles.header}>
          <Link
            href={`/events/${props.pastTerms[1].year}/${props.pastTerms[1].term}`}
          >{`${capitalize(props.pastTerms[1].term)} ${
            props.pastTerms[1].year
          } `}</Link>
          <Link
            href={`/events/${props.pastTerms[0].year}/${props.pastTerms[0].term}`}
          >{`${capitalize(props.pastTerms[0].term)} ${
            props.pastTerms[0].year
          }`}</Link>
          <Link href={`/events/${props.year}/${props.term}`}>
            <span className={styles.curTerm}>
              {`${capitalize(props.term)} ${props.year}`}
            </span>
          </Link>
          <Link href={"/events/archives"}>Archives</Link>
        </div>
      )}
      {hasFutureEvents && (
        <>
          <h2>Upcoming Events</h2>
          <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>
        </>
      )}
      {hasPastEvents && props.isCurrentTerm && <h2>Past Events</h2>}
      {hasPastEvents && !props.isCurrentTerm && (
        <h2>
          Events Archive:
          <span className={styles.blue}>
            {` ${capitalize(props.term)} ${props.year}`}
          </span>
        </h2>
      )}
      <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>
    </div>
  );
}

interface Params extends ParsedUrlQuery {
  year: string;
  term: string;
}

export const getStaticProps: GetStaticProps<Props, Params> = async (
  context
) => {
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const { year, term } = context.params!;

  return await getProps(year, term);
};

export const getStaticPaths: GetStaticPaths<Params> = async () => {
  const years = await getEventYears();
  const paths = (
    await Promise.all(
      years.map(async (year) => {
        const terms = await getEventTermsByYear(year);
        return terms.map((curTerm) => ({
          params: { year: year, term: curTerm },
        }));
      })
    )
  ).flat();

  return {
    paths: paths,
    fallback: false,
  };
};

function capitalize(str: string) {
  return str.slice(0, 1).toUpperCase() + str.slice(1);
}