simplify YearPage and DayPage props, they get their own drawings

Author: pwfisher

explorer/components/DayPage.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
 import { PageLayout } from './PageLayout'
-import { Drawing } from '../types'
 import { DrawingTile } from './DrawingTile'
 import Link from 'next/link'
 import styled from 'styled-components'
 import { getPreviousDay, getNextDay } from '../lib/drawings'
 import { useRouter } from 'next/router'
 import Div100vh from 'react-div-100vh'
+import { dayDrawingSets } from '../__fixtures__/drawings'
 
-export const DayPage: React.FC<{ drawings: Drawing[], day: string }> = ({ drawings, day }) => {
-  const year = parseInt(day.slice(0, 4), 10)
+export const DayPage: React.FC<{ day: string }> = ({ day }) => {
+  const drawings = dayDrawingSets[day]
+  const year = drawings[0].year
   const router = useRouter()
   const goToPrevious = () => router.push(`/day/${getPreviousDay(day)}`)
   const goToNext = () => router.push(`/day/${getNextDay(day)}`)

explorer/components/YearPage.tsx

@@ -3,8 +3,10 @@ import { PageLayout } from './PageLayout'
 import { DrawingTile } from './DrawingTile'
 import styled from 'styled-components'
 import { YearBar } from './YearBar'
+import { yearDrawingSets } from '../__fixtures__/drawings'
 
-export const YearPage: React.FC<{ drawings: Drawing[], year: number }> = ({ drawings, year }) => {
+export const YearPage: React.FC<{ year: number }> = ({ year }) => {
+  const drawings = yearDrawingSets[year]
   return (
     <PageLayout title={`explodingdog ${year}`}>
       <YearBar activeYear={year} />

explorer/pages/day/[id].tsx

@@ -1,16 +1,16 @@
 import { DayPage } from '../../components/DayPage'
 import { GetStaticProps, GetStaticPaths } from 'next'
-import { dayDrawingSets, drawingDays } from '../../__fixtures__/drawings'
+import { drawingDays } from '../../__fixtures__/drawings'
 import { singleQueryParamValue } from '../../lib/next'
 
 export default DayPage
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const paths = drawingDays.map(day => ({ params: { id: day.toString() }}))
+  const paths = drawingDays.map(day => ({ params: { id: day }}))
   return { paths, fallback: false }
 }
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
   const day = singleQueryParamValue(params?.id)
-  return { props: { day, drawings: dayDrawingSets[day] } }
+  return { props: { day } }
 }

explorer/pages/year/[id].tsx

@@ -1,15 +1,15 @@
 import { YearPage } from '../../components/YearPage'
 import { GetStaticProps, GetStaticPaths } from 'next'
-import { drawingYears, yearDrawingSets } from '../../__fixtures__/drawings'
+import { drawingYears } from '../../__fixtures__/drawings'
 
 export default YearPage
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const paths = drawingYears.map(year => ({ params: { id: year.toString() }}))
+  const paths = drawingYears.map(year => ({ params: { id: `${year}` }}))
   return { paths, fallback: false }
 }
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
   const year = Number(params?.id)
-  return { props: { year, drawings: yearDrawingSets[year] } }
+  return { props: { year } }
 }