2021-08-27 16:14:53 -04:00
|
|
|
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,
|
2021-08-27 18:37:42 -04:00
|
|
|
getEventsPageProps,
|
2021-08-27 16:14:53 -04:00
|
|
|
getEventYears,
|
|
|
|
getEventTermsByYear,
|
|
|
|
} from "@/lib/events";
|
2021-08-28 15:52:45 -04:00
|
|
|
import { capitalize } from "@/utils";
|
2021-08-27 16:14:53 -04:00
|
|
|
|
|
|
|
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) {
|
|
|
|
let headerTerms = [{ year: props.year, term: props.term }];
|
|
|
|
|
|
|
|
// p, Current, f
|
|
|
|
if (props.pastTerms.length > 0 && props.futureTerms.length > 0) {
|
|
|
|
headerTerms = [
|
|
|
|
...props.pastTerms.slice(-1),
|
|
|
|
...headerTerms,
|
|
|
|
...props.futureTerms.slice(0, 1),
|
|
|
|
];
|
|
|
|
}
|
|
|
|
// p, p, Current
|
|
|
|
else if (props.pastTerms.length > 0) {
|
|
|
|
headerTerms = [...props.pastTerms.slice(-2), ...headerTerms];
|
|
|
|
}
|
|
|
|
// Current, f, f
|
|
|
|
else {
|
|
|
|
headerTerms = [...headerTerms, ...props.futureTerms.slice(0, 2)];
|
|
|
|
}
|
|
|
|
|
|
|
|
headerTerms.reverse();
|
|
|
|
|
|
|
|
const hasPastEvents = props.pastEvents.length !== 0;
|
|
|
|
const hasFutureEvents = props.futureEvents.length !== 0;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={styles.main}>
|
|
|
|
<div className={styles.header}>
|
|
|
|
{headerTerms.map((link) => (
|
|
|
|
<HeaderLink
|
|
|
|
{...link}
|
|
|
|
isCurrentTerm={link.year === props.year && link.term === props.term}
|
|
|
|
key={link.year + link.term}
|
|
|
|
/>
|
|
|
|
))}
|
2021-08-27 18:37:42 -04:00
|
|
|
<Link href="/events/archive">Archive</Link>
|
2021-08-27 16:14:53 -04:00
|
|
|
</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()}
|
2021-08-28 15:56:23 -04:00
|
|
|
link={`/events/${props.year}/${props.term}/${metadata.slug}`}
|
2021-08-27 16:14:53 -04:00
|
|
|
>
|
|
|
|
<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>
|
|
|
|
)}
|
2021-08-27 18:37:42 -04:00
|
|
|
{!hasFutureEvents && !hasPastEvents && (
|
|
|
|
<>
|
|
|
|
<h2>Events</h2>
|
|
|
|
There are no upcoming or past events for the{" "}
|
|
|
|
{`${capitalize(props.term)} ${props.year}`} term. Please check back
|
|
|
|
later!
|
|
|
|
</>
|
|
|
|
)}
|
2021-08-27 16:14:53 -04:00
|
|
|
<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>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function HeaderLink(props: {
|
|
|
|
year: string;
|
|
|
|
term: string;
|
|
|
|
isCurrentTerm?: boolean;
|
|
|
|
}) {
|
|
|
|
return (
|
|
|
|
<Link href={`/events/${props.year}/${props.term}`}>
|
|
|
|
<span className={props.isCurrentTerm ? styles.curTerm : ""}>
|
|
|
|
{`${capitalize(props.term)} ${props.year}`}
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
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
|
2021-08-27 18:37:42 -04:00
|
|
|
return { props: await getEventsPageProps(context.params!) };
|
2021-08-27 16:14:53 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
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,
|
|
|
|
};
|
|
|
|
};
|