Skip to content

Commit c2ff50d

Browse files
pwfisherpwfisher
committed
add DayPage
1 parent 5375991 commit c2ff50d

File tree

9 files changed

+185
-36
lines changed

9 files changed

+185
-36
lines changed

‎explorer/__fixtures__/drawings.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Drawing, YearDrawingSets } from '../types'
1+
import { Drawing, YearDrawingSets, DayDrawingSets } from '../types'
22

33
export const drawingYears: number[] = [
44
2000,
@@ -35,3 +35,11 @@ export const yearDrawingSets: YearDrawingSets = drawingYears
3535
export const drawings: Drawing[] = drawingYears.reduce((accumulator, year) => {
3636
return [...accumulator, ...yearDrawingSets[year]] as Drawing[]
3737
}, [] as Drawing[])
38+
39+
export const dayDrawingSets: DayDrawingSets = drawings.reduce((accumulator, drawing) => {
40+
if (!accumulator[drawing.date]) accumulator[drawing.date] = []
41+
accumulator[drawing.date]!.push(drawing)
42+
return accumulator
43+
}, {} as Partial<DayDrawingSets>) as DayDrawingSets
44+
45+
export const drawingDays: string[] = Object.keys(dayDrawingSets).sort().reverse()

‎explorer/components/DayPage.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from 'react'
2+
import { PageLayout } from './PageLayout'
3+
import { Drawing } from '../types'
4+
import { DrawingTile } from './DrawingTile'
5+
import Link from 'next/link'
6+
import styled from 'styled-components'
7+
import { getPreviousDay, getNextDay } from '../lib/drawings'
8+
import { useRouter } from 'next/router'
9+
import Div100vh from 'react-div-100vh'
10+
11+
export const DayPage: React.FC<{ drawings: Drawing[], day: string }> = ({ drawings, day }) => {
12+
const year = parseInt(day.slice(0, 4), 10)
13+
const router = useRouter()
14+
const goToPrevious = () => router.push(`/day/${getPreviousDay(day)}`)
15+
const goToNext = () => router.push(`/day/${getNextDay(day)}`)
16+
17+
const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
18+
const handler = ({
19+
ArrowUp: goToPrevious,
20+
ArrowDown: goToNext,
21+
ArrowLeft: goToPrevious,
22+
ArrowRight: goToNext,
23+
} as Record<string, Function>)[event.key]
24+
handler?.()
25+
}
26+
27+
return (
28+
<PageLayout title={`explodingdog ${day}`} showHeader={false} showFooter={false}>
29+
<Div100vh>
30+
<Container onKeyDown={onKeyDown} tabIndex={-1}>
31+
<DayHeading>{day}</DayHeading>
32+
<DrawingSection>
33+
{drawings && drawings.map(drawing => (
34+
<DrawingTile key={`${drawing.date} ${drawing.slug}`} {...drawing} />
35+
))}
36+
</DrawingSection>
37+
<NavBar>
38+
<Link href="/day/[id]" as={`/day/${getPreviousDay(day)}`}>
39+
<Arrow>&lt;</Arrow>
40+
</Link>
41+
<Link href="/"><a>{'Home'}</a></Link>
42+
<Link href="/year/[id]" as={`/year/${year}`}>
43+
<YearLink>{year}</YearLink>
44+
</Link>
45+
<Link href="/day/[id]" as={`/day/${getNextDay(day)}`}>
46+
<Arrow>&gt;</Arrow>
47+
</Link>
48+
</NavBar>
49+
</Container>
50+
</Div100vh>
51+
</PageLayout>
52+
)
53+
}
54+
55+
const Container = styled.main.attrs({ className: 'Explorer__DrawingPage__Container'})`
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: space-between;
59+
height: 100%;
60+
max-height: 100%;
61+
`
62+
63+
const DayHeading = styled.h1.attrs({ className: 'Explorer__DayPage__DayHeading'})`
64+
font-size: 32px;
65+
padding: 12px 16px;
66+
text-align: center;
67+
`
68+
69+
const DrawingSection = styled.section.attrs({ className: 'Explorer__DayPage__DrawingSection'})`
70+
overflow: scroll;
71+
text-align: center;
72+
`
73+
74+
const NavBar = styled.nav.attrs({ className: 'Explorer__DrawingPage__Header'})`
75+
color: #BBB;
76+
display: flex;
77+
justify-content: space-between;
78+
font-size: 18px;
79+
font-weight: bold;
80+
height: 80px;
81+
line-height: 80px;
82+
`
83+
84+
const Arrow = styled.div.attrs({ className: 'Explorer__DrawingPage__Arrow'})`
85+
color: black;
86+
cursor: pointer;
87+
font-size: 36px;
88+
line-height: 74px;
89+
padding: 0 5%;
90+
user-select: none;
91+
92+
&:hover {
93+
background: #f8f8f8;
94+
}
95+
`
96+
97+
const YearLink = styled.a.attrs({ className: 'Explorer__DrawingPage__YearLink'})`
98+
cursor: pointer;
99+
`

‎explorer/components/DrawingPage.tsx‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import styled from 'styled-components'
66
import { getPreviousSlug, getNextSlug } from '../lib/drawings'
77
import { useRouter } from 'next/router'
88
import Div100vh from 'react-div-100vh'
9+
import { PageLayout } from './PageLayout'
910

1011
export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ drawing, year }) => {
1112
const router = useRouter()
@@ -23,29 +24,33 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
2324
}
2425

2526
return (
26-
<Div100vh>
27-
<Container onKeyDown={onKeyDown} tabIndex={-1}>
28-
<Title>{drawing.title}</Title>
29-
<ImageWrap>
30-
<Image src={`${assetPrefix}/images/${drawing.image}`} alt={drawing.title} />
31-
</ImageWrap>
32-
<NavBar>
33-
<Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
34-
<Arrow>&lt;</Arrow>
35-
</Link>
36-
<Link href="/year/[id]" as={`/year/${year}`}>
37-
<YearLink>{year}</YearLink>
38-
</Link>
39-
<a href={`http://explodingdog.com/title/${drawing.slug}.html`}>
40-
<DrawingId>#{drawing.number}</DrawingId>
41-
</a>
42-
<Date>{drawing.date}</Date>
43-
<Link href="/drawing/[id]" as={`/drawing/${getNextSlug(drawing.slug)}`}>
44-
<Arrow>&gt;</Arrow>
45-
</Link>
46-
</NavBar>
47-
</Container>
48-
</Div100vh>
27+
<PageLayout title={`explodingdog ${year}`} showHeader={false} showFooter={false}>
28+
<Div100vh>
29+
<Container onKeyDown={onKeyDown} tabIndex={-1}>
30+
<Title>{drawing.title}</Title>
31+
<ImageWrap>
32+
<Image src={`${assetPrefix}/images/${drawing.image}`} alt={drawing.title} />
33+
</ImageWrap>
34+
<NavBar>
35+
<Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
36+
<Arrow>&lt;</Arrow>
37+
</Link>
38+
<Link href="/year/[id]" as={`/year/${year}`}>
39+
<YearLink>{year}</YearLink>
40+
</Link>
41+
<a href={`http://explodingdog.com/title/${drawing.slug}.html`}>
42+
<DrawingId>#{drawing.number}</DrawingId>
43+
</a>
44+
<Link href="/day/[id]" as={`/day/${drawing.date}`}>
45+
<Date>{drawing.date}</Date>
46+
</Link>
47+
<Link href="/drawing/[id]" as={`/drawing/${getNextSlug(drawing.slug)}`}>
48+
<Arrow>&gt;</Arrow>
49+
</Link>
50+
</NavBar>
51+
</Container>
52+
</Div100vh>
53+
</PageLayout>
4954
)
5055
}
5156

@@ -106,4 +111,6 @@ const YearLink = styled.a.attrs({ className: 'Explorer__DrawingPage__YearLink'})
106111

107112
const DrawingId = styled.span.attrs({ className: 'Explorer__DrawingPage__DrawingId'})``
108113

109-
const Date = styled.span.attrs({ classNamne: 'Explorer__DrawingPage__Date'})``
114+
const Date = styled.span.attrs({ classNamne: 'Explorer__DrawingPage__Date'})`
115+
cursor: pointer;
116+
`

‎explorer/components/DrawingTile.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ import Link from 'next/link'
77
export const DrawingTile: React.FC<Drawing> = ({ date, title, slug, image }) => {
88
return (
99
<Container>
10-
<Date>{date}</Date>
1110
<Title>{title}</Title>
1211
<Link href="/drawing/[id]" as={`/drawing/${slug}`}>
1312
<a>
1413
<Image src={`${assetPrefix}/images/${image}`} alt={title} />
1514
</a>
1615
</Link>
16+
<Link href="/day/[id]" as={`/day/${date}`}>
17+
<Date>{date}</Date>
18+
</Link>
1719
</Container>
1820
)
1921
}
@@ -27,6 +29,7 @@ const Container = styled.div.attrs({ className: 'Explorer__DrawingTile__Containe
2729

2830
const Date = styled.div.attrs({ className: 'Explorer__DrawingTile__Date'})`
2931
bottom: 8px;
32+
cursor: pointer;
3033
font-size: 12px;
3134
opacity: 0.1;
3235
position: absolute;

‎explorer/components/PageLayout.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,17 @@ type Props = {
88
children?: ReactNode
99
title?: string
1010
description?: string
11+
showHeader?: boolean
12+
showFooter?: boolean
1113
}
1214

13-
export const PageLayout = ({
15+
export const PageLayout: React.FC<Props> = ({
1416
children,
1517
title = 'explodingdog explorer',
16-
description = 'explodingdog explorer. An alternate explodingdog experience.'
17-
}: Props) => (
18+
description = 'explodingdog explorer. An alternate explodingdog experience.',
19+
showHeader = true,
20+
showFooter = true
21+
}) => (
1822
<>
1923
<Head>
2024
<title>{title}</title>
@@ -26,8 +30,8 @@ export const PageLayout = ({
2630
<meta name="description" content={description} />
2731
<link rel="manifest" href={`${assetPrefix}/manifest.json`} />
2832
</Head>
29-
<PageHeader />
33+
{showHeader && <PageHeader />}
3034
{children}
31-
<PageFooter />
35+
{showFooter && <PageFooter />}
3236
</>
3337
)

‎explorer/components/YearPage.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ import { DrawingTile } from './DrawingTile'
44
import styled from 'styled-components'
55
import { YearBar } from './YearBar'
66

7-
export const YearPage = ({ year, drawings }: {
8-
year: number
9-
drawings?: Drawing[]
10-
}) => {
7+
export const YearPage: React.FC<{ drawings: Drawing[], year: number }> = ({ drawings, year }) => {
118
return (
129
<PageLayout title={`explodingdog ${year}`}>
1310
<YearBar activeYear={year} />

‎explorer/lib/drawings.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Drawing } from '../types'
2-
import { drawings } from '../__fixtures__/drawings'
2+
import { drawings, drawingDays } from '../__fixtures__/drawings'
33

44
export const getDrawingBySlug = (slug: string): Drawing | undefined => {
55
return drawings.find(o => o.slug === slug)
@@ -20,3 +20,13 @@ export const getNextSlug = (slug: string): string => {
2020
const nextDrawing = drawings[index + 1] || drawings[0]
2121
return nextDrawing.slug
2222
}
23+
24+
export const getPreviousDay = (day: string): string => {
25+
const index = drawingDays.indexOf(day)
26+
return drawingDays[index - 1] || drawingDays.slice(-1)[0]
27+
}
28+
29+
export const getNextDay = (day: string): string => {
30+
const index = drawingDays.indexOf(day)
31+
return drawingDays[index + 1] || drawingDays[0]
32+
}

‎explorer/pages/day/[id].tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { DayPage } from '../../components/DayPage'
2+
import { GetStaticProps, GetStaticPaths } from 'next'
3+
import { dayDrawingSets, drawingDays } from '../../__fixtures__/drawings'
4+
import { singleQueryParamValue } from '../../lib/next'
5+
6+
export default DayPage
7+
8+
export const getStaticPaths: GetStaticPaths = async () => {
9+
const paths = drawingDays.map(day => ({ params: { id: day.toString() }}))
10+
return { paths, fallback: false }
11+
}
12+
13+
export const getStaticProps: GetStaticProps = async ({ params }) => {
14+
const day = singleQueryParamValue(params?.id)
15+
return { props: { day, drawings: dayDrawingSets[day] } }
16+
}

‎explorer/types/drawing-models.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,8 @@ export interface YearDrawingSets
1313
extends Readonly<{
1414
[year: number]: Drawing[]
1515
}> {}
16+
17+
export interface DayDrawingSets
18+
extends Readonly<{
19+
[day: string]: Drawing[]
20+
}> {}

0 commit comments

Comments
 (0)