Upgrade page SSG

package.json

@@ -9,9 +9,6 @@
  "build": "next build",
  "start": "yarn run dev"
  },
- "engines": {
- "node": "12.x"
- },
  "dependencies": {
  "@hackclub/icons": "^0.0.3",
  "@hackclub/meta": "^0.1.0-alpha.0",
@@ -20,7 +17,7 @@
  "@zeit/next-mdx": "^1.2.0",
  "isomorphic-unfetch": "^3.0.0",
  "lodash": "^4.17.15",
- "next": "^9.2.1",
+ "next": "^9.2.2",
  "nprogress": "^0.2.0",
  "pluralize": "^8.0.0",
  "react": "^16.12.0",

pages/[region].js

@@ -1,20 +1,29 @@
+import Error from 'next/error'
 import Grouping from '../components/grouping'
 import Regions from '../components/regions'
 import Signup from '../components/signup'
 import { map, orderBy, find, kebabCase, startCase } from 'lodash'
 import { getGroupingData } from '../lib/data'
 
-export default ({ name, events, groups, emailStats }) => (
- <Grouping
- title={`High School Hackathons in ${name.replace('USA', 'United States')}`}
- desc={`Find, register, and compete in ${events.length} student-led hackathons around ${name}.`}
- header={<Signup stats={emailStats} initialLocation={startCase(name)} />}
- events={events}
- groups={groups}
- >
- <Regions showAll />
- </Grouping>
-)
+export default ({ name, events, groups, emailStats }) => {
+ if (!name || !events) return <Error statusCode={404} />
+ return (
+ <Grouping
+ title={`High School Hackathons in ${name.replace(
+ 'USA',
+ 'United States'
+ )}`}
+ desc={`Find, register, and compete in ${
+ events.length
+ } student-led hackathons around ${name}.`}
+ header={<Signup stats={emailStats} initialLocation={startCase(name)} />}
+ events={events}
+ groups={groups}
+ >
+ <Regions showAll />
+ </Grouping>
+ )
+}
 
 const distance = (lat1, lon1, lat2, lon2) => {
  // https://www.geodatasource.com/developers/javascript
@@ -78,19 +87,18 @@ let regions = [
 ]
 regions = map(regions, region => ({ id: kebabCase(region.name), ...region }))
 
-export const unstable_getStaticPaths = () =>
- map(map(regions, 'id'), id => ({
+export const unstable_getStaticPaths = () => {
+ const paths = map(map(regions, 'id'), id => ({
  params: { region: `list-of-hackathons-in-${id}` }
  }))
+ return { paths }
+}
 
 export const unstable_getStaticProps = async ({ params }) => {
  let { region } = params
  region = find(regions, ['id', region.replace('list-of-hackathons-in-', '')])
  let { name } = region
  let { events, groups, emailStats } = await getGroupingData()
- events = orderBy(
- events.filter(event => region.filter(event)),
- 'start'
- )
+ events = orderBy(events.filter(event => region.filter(event)), 'start')
  return { props: { name, events, groups, emailStats } }
 }

pages/index.js

@@ -38,7 +38,8 @@ export default ({ stats, emailStats, events, groups }) => (
  </Head>
  <Text variant="subtitle" sx={{ mt: [3, 4], mb: 3 }}>
  A curated list of high school hackathons with {stats.total}
- &nbsp;events in {stats.state}&nbsp;states + {stats.country}
+ &nbsp;events in {stats.state}
+ &nbsp;states + {stats.country}
  &nbsp;countries.
  </Text>
  <Text variant="subtitle">

pages/years/[year].js

@@ -1,28 +1,30 @@
+import Error from 'next/error'
 import Grouping from '../../components/grouping'
 import Years from '../../components/years'
 import { map, filter, orderBy, startsWith, split, first, uniq } from 'lodash'
 import { getEvents, getGroupingData } from '../../lib/data'
 
-export default ({ year, events, groups }) => (
- <Grouping title={`${year} Events`} events={events} groups={groups}>
- <Years showAll />
- </Grouping>
-)
+export default ({ year, events, groups }) => {
+ if (!year || !events) return <Error statusCode={404} />
+ return (
+ <Grouping title={`${year} Events`} events={events} groups={groups}>
+ <Years showAll />
+ </Grouping>
+ )
+}
 
 export async function unstable_getStaticPaths() {
  let events = await getEvents()
  let starts = map(filter(events, { group_id: null }), 'start')
  starts = map(starts, start => first(split(start, '-')))
  let years = uniq(starts)
- return map(years, year => ({ params: { year } }))
+ const paths = map(years, year => ({ params: { year } }))
+ return { paths }
 }
 
 export async function unstable_getStaticProps({ params }) {
  const { year } = params
  let { events, groups } = await getGroupingData()
- events = orderBy(
- filter(events, e => startsWith(e.start, year)),
- 'start'
- )
+ events = orderBy(filter(events, e => startsWith(e.start, year)), 'start')
  return { props: { year, events, groups } }
 }

prettier.config.js

@@ -1,6 +1,6 @@
 module.exports = {
  singleQuote: true,
- trailingComma: false,
+ trailingComma: 'none',
  printWidth: 80,
  semi: false
 }