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

103 lines
2.1 KiB
TypeScript

import { MDXRemote } from "next-mdx-remote";
import React from "react";
import { MiniEventCard } from "../../../../components/MiniEventCard";
import {
getEventYears,
getEventTermsByYear,
getEventsByTerm,
getEventBySlug,
Event,
} from "../../../../lib/events";
import styles from "./term.module.css";
export async function getStaticPaths(): Promise<{
paths: {
params: {
year: string;
term: string;
};
}[];
fallback: boolean;
}> {
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,
};
}
interface Context {
params: {
year: string;
term: string;
};
}
interface Props {
term: string;
year: string;
pastEvents: string[];
futureEvents: string[];
}
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 curtime = Date.now();
return {
props: {
term: context.params.term,
year: context.params.year,
events: events,
},
};
}
const Term = (props: Props) => {
return (
<div className={styles.main}>
<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.events.map(({ content, metadata }) => (
<MiniEventCard
{...metadata}
date={new Date(metadata.date)}
description={<MDXRemote {...content} />}
key={metadata.name + metadata.date.toString()}
/>
))}
</div>
</div>
);
};
export default Term;