Add /events/[year]/[term] page #158
Merged
a3thakra
merged 46 commits from feat/events-term into main 2 years ago
a3thakra
Loading…
Reference in new issue
There is no content yet.
Delete Branch 'feat/events-term'
Deleting a branch is permanent. It CANNOT be undone. Continue?
Closes #113
import React from "react";import { EventCard } from "../../../../components/EventCard";import { MiniEventCard } from "../../../../components/MiniEventCard";Use "@/components/..." instead of "../../../../components/..."
getEventsByTerm,getEventBySlug,Event,} from "../../../../lib/events";use "@/lib/events" instead of "../../../lib/events"
import styles from "./term.module.css";export async function getStaticPaths(): Promise<{This is not the correct way to type out
getStaticPaths. You should do something like the news archive files.export const getStaticPaths: GetStaticPaths = async () => {...}something like thisconst years = await getEventYears();const paths = [];for (const year of years) {const terms = await getEventTermsByYear(year);This is inefficient. It always wait for 1 year to complete before proceeding to the next. You should use Promise.all here.
I'm a little confused here. The problem is that
await getEventTermsByYear(year)forces the function to stop untilgetEventTermsByYearreturns, right?But on the next line I am getting an error with being unable to map on a type of
Promise<string[]>. How can I resolve this?Thanks!
yes.
you can
awaiton a Promise.all to map over it.so something like:
Would the use of
await getEventTermsByYearhere still force the async function on line 2 to wait untilgetEventTermsByYearreturns?Is the difference here that
years.mapcan map each element asynchronously, whereas in my original functionfor (const year of years)cannot?the for loop is going to wait for each year to be completed before the next can start.
But with this approach, all years start simultaneously.
Within each year, we are still waiting for terms, that doesn't change in both cases.
vs
Ah that makes sense, thank you!
const events = (await Promise.all((await getEventsByTerm(context.params.year, context.params.term)This is a lot of nesting, can you move this to a separate line, and bind that to a variable?
margin: auto;margin-top: 7rem;margin-bottom: 14rem;width: 50rem;Can you convert these rem values to pixels? Using the
calc(<value in px>rem / 16)method that we use everywhere.}.miniEventCards {margin-top: 30px;This should be in rems
};}const Term = (props: Props) => {In all the other files, we place the react component at the top of the file, we should do that here too, for consistency. Also you can use
export default function Term(props: Props) {...}syntax here, instead of the anonymous function.e548bd9c5ainto main 2 years agoReviewers
e548bd9c5a.