group by day in YearPage

Author: pwfisher

explorer/__fixtures__/drawings.ts

@@ -1,4 +1,4 @@
-import { Drawing, YearDrawingSets, DayDrawingSets } from '../types'
+import { Drawing, YearDrawingSets, DayDrawingSets, DayDrawingSetsByYear } from '../types'
 
 export const drawingYears: number[] = [
   2000,
@@ -24,22 +24,29 @@ export const yearDrawingSets: YearDrawingSets = drawingYears
   .reverse()
   .reduce((accumulator, year) => {
     const rawYearSet = require(`./drawings/${year}.json`)
-    const processedYearSet = rawYearSet.map((drawing: any) => {
+    const processedYearSet: Drawing[] = rawYearSet.map((drawing: any) => {
       const [year, number] = drawing.id.split('.')
       return { ...drawing, year, number }
     })
-    accumulator[year] = (processedYearSet as Drawing[]).sort((a, b) => b.number - a.number)
+    accumulator[year] = processedYearSet.sort((a, b) => b.number - a.number)
     return accumulator
-  }, {} as Partial<YearDrawingSets>) as YearDrawingSets
+  }, {} as any) as YearDrawingSets
 
 export const drawings: Drawing[] = drawingYears.reduce((accumulator, year) => {
   return [...accumulator, ...yearDrawingSets[year]] as Drawing[]
 }, [] as Drawing[])
 
 export const dayDrawingSets: DayDrawingSets = drawings.reduce((accumulator, drawing) => {
   if (!accumulator[drawing.date]) accumulator[drawing.date] = []
-  accumulator[drawing.date]!.push(drawing)
+  accumulator[drawing.date].push(drawing)
   return accumulator
-}, {} as Partial<DayDrawingSets>) as DayDrawingSets
+}, {} as any) as DayDrawingSets
 
 export const drawingDays: string[] = Object.keys(dayDrawingSets).sort().reverse()
+
+export const dayDrawingSetsByYear: DayDrawingSetsByYear = drawingDays.reduce((accumulator, date) => {
+  const year = parseInt(date.slice(0, 4), 10)
+  if (!accumulator[year]) accumulator[year] = {}
+  accumulator[year][date] = dayDrawingSets[date]
+  return accumulator
+}, {} as any) as DayDrawingSetsByYear

explorer/components/YearPage.tsx

@@ -1,19 +1,27 @@
-import { Drawing } from '../types/drawing-models'
+import React from 'react'
 import { PageLayout } from './PageLayout'
 import { DrawingTile } from './DrawingTile'
 import styled from 'styled-components'
 import { YearBar } from './YearBar'
-import { yearDrawingSets } from '../__fixtures__/drawings'
+import { dayDrawingSetsByYear } from '../__fixtures__/drawings'
 
 export const YearPage: React.FC<{ year: number }> = ({ year }) => {
-  const drawings = yearDrawingSets[year]
+  const dayDrawingSets = dayDrawingSetsByYear[year]
+  const dates = Object.keys(dayDrawingSets)
   return (
     <PageLayout title={`explodingdog ${year}`}>
       <YearBar activeYear={year} />
       <YearHeading>{year}</YearHeading>
       <DrawingSection>
-        {drawings && drawings.map(drawing => (
-          <DrawingTile key={`${drawing.date} ${drawing.slug}`} {...drawing} />
+        {dates.map(date => (
+          <DrawingDate>
+            <DrawingDateHeading>{date}</DrawingDateHeading>
+            <DrawingDateTiles>
+              {dayDrawingSets[date].map(drawing => (
+                <DrawingTile key={`${drawing.date} ${drawing.slug}`} {...drawing} />
+              ))}
+            </DrawingDateTiles>
+          </DrawingDate>
         ))}
       </DrawingSection>
     </PageLayout>
@@ -28,3 +36,18 @@ const YearHeading = styled.h1.attrs({ className: 'Explorer__YearPage__YearHeadin
 const DrawingSection = styled.section.attrs({ className: 'Explorer__YearPage__DrawingSection'})`
   text-align: center;
 `
+
+const DrawingDate = styled.div.attrs({ className: 'Explorer__YearPage__DrawingDate'})`
+  margin: 24px 0 48px;
+`
+
+const DrawingDateHeading = styled.h3.attrs({ className: 'Explorer__YearPage__DrawingDateHeading'})`
+  align-items: center;
+  color: #BBB;
+  display: flex;
+  height: 48px;
+  justify-content: center;
+  margin: 0;
+`
+
+const DrawingDateTiles = styled.div.attrs({ className: 'Explorer__YearPage__DrawingDateTiles'})``

explorer/types/drawing-models.ts

@@ -18,3 +18,8 @@ export interface DayDrawingSets
   extends Readonly<{
     [day: string]: Drawing[]
   }> {}
+
+export interface DayDrawingSetsByYear
+  extends Readonly<{
+    [year: number]: DayDrawingSets
+  }> {}