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

138 lines
3.4 KiB
TypeScript

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 { MiniEventCard } from "@/components/MiniEventCard";
import {
getEventYears,
getEventTermsByYear,
getEventsByTerm,
getEventBySlug,
Event,
} from "@/lib/events";
import styles from "./term.module.css";
interface Props {
term: string;
year: string;
pastEvents: Event[];
futureEvents: Event[];
}
export default function Term(props: Props) {
const hasPastEvents = props.pastEvents.length !== 0;
const hasFutureEvents = props.futureEvents.length !== 0;
return (
<div className={styles.main}>
{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
{...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!;
const eventNames = await getEventsByTerm(year, term);
const events: Event[] = (
await Promise.all(
eventNames.map((file: string) => getEventBySlug(year, term, file))
)
).sort(
(a, b) =>
new Date(a.metadata.date).getTime() - new Date(b.metadata.date).getTime()
);
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: term,
year: year,
pastEvents: pastEvents,
futureEvents: futureEvents,
},
};
};
export const getStaticPaths: GetStaticPaths<Params> = async () => {
const years = await getEventYears();
const paths = [];
for (const year of years) {
const terms = await getEventTermsByYear(year);
const yearPaths = terms.map((curTerm) => ({
params: { year: year, term: curTerm },
}));
paths.push(...yearPaths);
}
return {
paths: paths,
fallback: false,
};
};