Add [event].tsx page (#153)

This is the `[event].tsx` page that displays a single event, with a couple of sample events in `content/events` for testing purposes.

Closes #114

Co-authored-by: Amy <minds10@hotmail.com>
Reviewed-on: www/www-new#153
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-committed-by: Amy <a258wang@csclub.uwaterloo.ca>
amy-random-shapes
Amy Wang 1 year ago
parent 38ffa4dee2
commit 6f24b266eb
  1. 2
      package-lock.json
  2. 69
      pages/events/[year]/[term]/[event].tsx

2
package-lock.json generated

@ -1,5 +1,5 @@
{
"name": "www-new",
"name": "website",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,

@ -0,0 +1,69 @@
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 {
Event,
getEventYears,
getEventTermsByYear,
getEventsByTerm,
getEventBySlug,
} from "@/lib/events";
export default function EventInfoPage(props: Props) {
return (
<EventCard
{...props.event.metadata}
date={new Date(props.event.metadata.date)}
>
<MDXRemote {...props.event.content} />
</EventCard>
);
}
interface Props {
event: Event;
}
interface Params extends ParsedUrlQuery {
year: string;
term: string;
event: string;
}
export const getStaticProps: GetStaticProps<Props, Params> = async (
context
) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const { year, term, event } = context.params!;
return { props: { event: await getEventBySlug(year, term, event) } };
};
export const getStaticPaths: GetStaticPaths<Params> = async () => {
const years = await getEventYears();
const events = (
await Promise.all(
years.map(async (year) => {
const termsInYear = await getEventTermsByYear(year);
return await Promise.all(
termsInYear.map(async (term) => {
const eventsInTerm = await getEventsByTerm(year, term);
return eventsInTerm.map((event) => ({
year,
term,
event,
}));
})
);
})
)
).flat(2);
return {
paths: events.map((params) => ({ params })),
fallback: false,
};
};
Loading…
Cancel
Save