add Drawing year and number, sort drawings in reverse

Author: pwfisher

explorer/__fixtures__/drawings.ts

@@ -19,10 +19,18 @@ export const drawingYears: number[] = [
   2015,
 ]
 
-export const yearDrawingSets: YearDrawingSets = drawingYears.reduce((accumulator, year) => {
-  accumulator[year] = require(`./drawings/${year}.json`)
-  return accumulator
-}, {} as Partial<YearDrawingSets>) as YearDrawingSets
+export const yearDrawingSets: YearDrawingSets = drawingYears
+  .sort()
+  .reverse()
+  .reduce((accumulator, year) => {
+    const rawYearSet = require(`./drawings/${year}.json`)
+    const processedYearSet = 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)
+    return accumulator
+  }, {} as Partial<YearDrawingSets>) as YearDrawingSets
 
 export const drawings: Drawing[] = drawingYears.reduce((accumulator, year) => {
   return [...accumulator, ...yearDrawingSets[year]] as Drawing[]

explorer/components/DrawingPage.tsx

@@ -37,7 +37,7 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
             <YearLink>{year}</YearLink>
           </Link>
           <a href={`http://explodingdog.com/title/${drawing.slug}.html`}>
-            <DrawingId>#{drawing.id.split('.').slice(-1)}</DrawingId>
+            <DrawingId>#{drawing.number}</DrawingId>
           </a>
           <Date>{drawing.date}</Date>
           <Link href="/drawing/[id]" as={`/drawing/${getNextSlug(drawing.slug)}`}>

explorer/lib/drawings.ts

@@ -5,10 +5,6 @@ export const getDrawingBySlug = (slug: string): Drawing | undefined => {
   return drawings.find(o => o.slug === slug)
 }
 
-export const getDrawingYear = (drawing: Drawing): number => {
-  return parseInt(drawing.date.slice(0, 4), 10)
-}
-
 export const getPreviousSlug = (slug: string): string => {
   const drawing = getDrawingBySlug(slug)
   if (!drawing) return 'something'

explorer/pages/drawing/[id].tsx

@@ -1,7 +1,7 @@
 import { DrawingPage } from '../../components/DrawingPage'
 import { GetStaticProps, GetStaticPaths } from 'next'
 import { drawings } from '../../__fixtures__/drawings'
-import { getDrawingBySlug, getDrawingYear } from '../../lib/drawings'
+import { getDrawingBySlug } from '../../lib/drawings'
 import { singleQueryParamValue } from '../../lib/next'
 
 export default DrawingPage
@@ -14,6 +14,6 @@ export const getStaticPaths: GetStaticPaths = async () => {
 export const getStaticProps: GetStaticProps = async ({ params }) => {
   const slug = singleQueryParamValue(params?.id)
   const drawing = getDrawingBySlug(slug) || getDrawingBySlug('something')
-  const year = getDrawingYear(drawing!)
+  const year = drawing!.year
   return { props: { year, drawing } }
 }

explorer/types/drawing-models.ts

@@ -1,13 +1,15 @@
-export interface YearDrawingSets
+export interface Drawing
   extends Readonly<{
-    [year: number]: Drawing[]
+    id: string // year + number, e.g. 2000.123
+    year: number
+    number: number // sequence index for that year
+    date: string // e.g. 2000-01-01
+    title: string // display text
+    slug: string // for file and url
+    image: string // path relative to image root, may have subdirectory
   }> {}
 
-export interface Drawing
+export interface YearDrawingSets
   extends Readonly<{
-    id: string
-    date: string
-    title: string
-    slug: string
-    image: string
+    [year: number]: Drawing[]
   }> {}