Skip to content

Commit d680d36

Browse files
pwfisherpwfisher
committed
render fixtureTags and myTags (if any) under drawings
1 parent 3b04b2e commit d680d36

File tree

9 files changed

+102
-30
lines changed

9 files changed

+102
-30
lines changed

‎explorer/__fixtures__/drawings.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const yearDrawingSets: YearDrawingSets = drawingYears
2828
const [year, number] = drawing.id.split('.')
2929
return { ...drawing, year, number }
3030
})
31-
accumulator[year] = processedYearSet.sort((a, b) => b.number - a.number)
31+
accumulator[year] = processedYearSet.sort((a, b) => b.number.localeCompare(a.number))
3232
return accumulator
3333
}, {} as any) as YearDrawingSets
3434

‎explorer/__fixtures__/index.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
export * from './drawings'
2+
3+
import { TagDrawingSets } from '../types'
4+
import tagDrawingSetsJson from './tagDrawingSets.json'
5+
6+
export const tagDrawingSets: TagDrawingSets = tagDrawingSetsJson as TagDrawingSets

‎explorer/components/DrawingPage/ActionsMenu.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,12 @@ export const ActionsMenu: React.FC<{ drawing: Drawing }> = ({ drawing }) => {
4646
))}
4747
</Popup>
4848
</Container>
49-
<AddTagModal drawing={drawing} isOpen={isAddTagModalOpen} closeModal={toggleAddTagModal} />
50-
<ExportTagsModal isOpen={isExportTagsModalOpen} closeModal={toggleExportTagsModal} />
49+
{isAddTagModalOpen && (
50+
<AddTagModal drawing={drawing} isOpen={isAddTagModalOpen} closeModal={toggleAddTagModal} />
51+
)}
52+
{isExportTagsModalOpen && (
53+
<ExportTagsModal isOpen={isExportTagsModalOpen} closeModal={toggleExportTagsModal} />
54+
)}
5155
</>
5256
)
5357
}

‎explorer/components/DrawingPage/AddTagModal.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import React from 'react'
22
import styled from 'styled-components'
33
import { Drawing, TagDrawingSets } from '../../types'
44
import Modal from 'react-modal'
5-
import { addTagToDrawing, loadTagDrawingSets, drawingHasTag, removeTagFromDrawing } from '../../lib/hashtags'
5+
import {
6+
addMyTagToDrawing,
7+
drawingHasMyTag,
8+
loadMyTagDrawingSets,
9+
removeMyTagFromDrawing,
10+
} from '../../lib/hashtags'
611

712
export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeModal: () => void }> = ({
813
drawing,
@@ -12,12 +17,12 @@ export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeMod
1217
const [newTag, setNewTag] = React.useState('')
1318
const [tagDrawingSets, setTagDrawingSets] = React.useState<TagDrawingSets>({})
1419

15-
React.useEffect(() => setTagDrawingSets(loadTagDrawingSets()), [isOpen])
20+
React.useEffect(() => setTagDrawingSets(loadMyTagDrawingSets()), [isOpen])
1621

1722
function onNewTagSubmit(e: React.FormEvent<HTMLFormElement>) {
18-
addTagToDrawing(newTag, drawing)
23+
addMyTagToDrawing(newTag, drawing)
1924
setNewTag('')
20-
setTagDrawingSets(loadTagDrawingSets())
25+
setTagDrawingSets(loadMyTagDrawingSets())
2126
e.preventDefault()
2227
}
2328
const tags = Object.keys(tagDrawingSets)
@@ -41,10 +46,12 @@ export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeMod
4146
<label>
4247
<input
4348
type='checkbox'
44-
checked={drawingHasTag(drawing, tag)}
49+
checked={drawingHasMyTag(drawing, tag)}
4550
onChange={e => {
46-
e.currentTarget.checked ? addTagToDrawing(tag, drawing) : removeTagFromDrawing(tag, drawing)
47-
setTagDrawingSets(loadTagDrawingSets())
51+
e.currentTarget.checked
52+
? addMyTagToDrawing(tag, drawing)
53+
: removeMyTagFromDrawing(tag, drawing)
54+
setTagDrawingSets(loadMyTagDrawingSets())
4855
}}
4956
/> {tag}
5057
</label>
@@ -88,6 +95,10 @@ const Tag = styled.li.attrs({ classNames: 'Explorer__AddTagModal__Tag' })`
8895
opacity: 0.3;
8996
}
9097
98+
&:last-child::after {
99+
display: none;
100+
}
101+
91102
label {
92103
cursor: pointer;
93104
display: inline-block;

‎explorer/components/DrawingPage/DrawingPage.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@ import {
1414
DrawingLink,
1515
YearLink,
1616
DateLink,
17+
TagList,
18+
Tag,
1719
} from './styles'
1820
import { getPreviousSlug, getNextSlug } from '../../lib/drawings'
1921
import { useRouter } from 'next/router'
2022
import Div100vh from 'react-div-100vh'
2123
import { PageLayout } from '../PageLayout'
2224
import { ActionsMenu } from './ActionsMenu'
25+
import { getFixtureTagsForDrawing, getMyTagsForDrawing } from '../../lib/hashtags'
2326

2427
export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ drawing, year }) => {
2528
const router = useRouter()
@@ -36,6 +39,10 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
3639
handler?.()
3740
}
3841

42+
const fixtureTags = getFixtureTagsForDrawing(drawing)
43+
44+
const myTags = getMyTagsForDrawing(drawing) // needs to come from context in order to update
45+
3946
return (
4047
<PageLayout title={drawing.title} showHeader={false} showFooter={false}>
4148
<Div100vh>
@@ -44,6 +51,8 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
4451
<ImageWrap>
4552
<Image src={`${assetPrefix}/images/${drawing.image}`} alt={drawing.title} />
4653
</ImageWrap>
54+
{fixtureTags.length > 0 && <TagList>{fixtureTags.sort().map(tag => <Tag key={tag}>{tag}</Tag>)}</TagList>}
55+
{myTags.length > 0 && <TagList>{myTags.sort().map(tag => <Tag key={tag}>{tag}</Tag>)}</TagList>}
4756
<NavBar>
4857
<Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
4958
<ArrowButton title='Previous'><LeftArrow /></ArrowButton>

‎explorer/components/DrawingPage/ExportTagsModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react'
22
import styled, { css } from 'styled-components'
33
import Modal from 'react-modal'
4-
import { loadTagDrawingSets, saveTagDrawingSetsString } from '../../lib/hashtags'
4+
import { loadMyTagDrawingSets, saveMyTagDrawingSetsString } from '../../lib/hashtags'
55

66
export const ExportTagsModal: React.FC<{ isOpen: boolean; closeModal: () => void }> = ({
77
isOpen,
88
closeModal,
99
}) => {
10-
const tagDrawingSets = loadTagDrawingSets()
10+
const tagDrawingSets = loadMyTagDrawingSets()
1111
const initialExportString = JSON.stringify(tagDrawingSets, null, 2)
1212

1313
// exportString state powers selectAll
@@ -23,7 +23,7 @@ export const ExportTagsModal: React.FC<{ isOpen: boolean; closeModal: () => void
2323
// Edits in textarea are written to localStorage
2424
function onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
2525
setExportString(e.currentTarget.value)
26-
saveTagDrawingSetsString(e.currentTarget.value)
26+
saveMyTagDrawingSetsString(e.currentTarget.value)
2727
}
2828

2929
return (

‎explorer/components/DrawingPage/styles.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,3 +94,23 @@ export const DrawingLink = styled.a.attrs({ className: 'Explorer__DrawingPage__D
9494
export const DateLink = styled.a.attrs({ classNamne: 'Explorer__DrawingPage__Date'})`
9595
${navBarItemStyles}
9696
`
97+
98+
export const TagList = styled.ul.attrs({ classNames: 'Explorer__DrawingPage__TagList'})`
99+
align-self: center;
100+
`
101+
102+
export const Tag = styled.li.attrs({ classNames: 'Explorer__DrawingPage__Tag'})`
103+
display: inline-block;
104+
font-size: 12px;
105+
margin: 0 4px;
106+
107+
&::after {
108+
content: '·';
109+
display: inline-block;
110+
margin: 0 0 0 4px;
111+
}
112+
113+
&:last-child::after {
114+
display: none;
115+
}
116+
`

‎explorer/lib/hashtags.ts‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,62 @@
11
import { Drawing, TagDrawingSets } from '../types'
2+
import { tagDrawingSets as fixtureTagDrawingSets } from '../__fixtures__'
23

3-
export function loadTagDrawingSets(): TagDrawingSets {
4+
export function loadMyTagDrawingSets(): TagDrawingSets {
45
if (typeof window === 'undefined') return {} as TagDrawingSets
56
return JSON.parse(localStorage.getItem('tagDrawingSets') || '{}') as TagDrawingSets
67
}
78

8-
export function saveTagDrawingSets(tagDrawingSets: TagDrawingSets) {
9-
saveTagDrawingSetsString(JSON.stringify(tagDrawingSets || {}))
9+
export function saveMyTagDrawingSets(tagDrawingSets: TagDrawingSets): void {
10+
saveMyTagDrawingSetsString(JSON.stringify(tagDrawingSets || {} as TagDrawingSets))
1011
}
1112

12-
export function saveTagDrawingSetsString(value: string) {
13+
export function saveMyTagDrawingSetsString(value: string): void {
1314
localStorage.setItem('tagDrawingSets', value)
1415
}
1516

16-
export function drawingHasTag(drawing: Drawing, tag: string) {
17-
const tagDrawingSets: TagDrawingSets = loadTagDrawingSets()
17+
export function drawingHasMyTag(drawing: Drawing, tag: string): boolean {
18+
const tagDrawingSets: TagDrawingSets = loadMyTagDrawingSets()
1819
const drawings: Drawing[] = tagDrawingSets[tag] ?? []
19-
return drawings.some(o => o.slug === drawing.slug)
20+
return drawings.some(o => o.id === drawing.id)
2021
}
2122

22-
export function addTagToDrawing(tag: string, drawing: Drawing) {
23-
const tagDrawingSets: TagDrawingSets = loadTagDrawingSets()
23+
export function addMyTagToDrawing(tag: string, drawing: Drawing): void {
24+
const tagDrawingSets: TagDrawingSets = loadMyTagDrawingSets()
2425
const drawings: Drawing[] = tagDrawingSets[tag] ?? []
25-
if (!drawings.includes(drawing)) {
26+
if (!drawings.some(o => o.id === drawing.id)) {
2627
drawings.push(drawing)
2728
tagDrawingSets[tag] = drawings
28-
saveTagDrawingSets(tagDrawingSets)
29+
saveMyTagDrawingSets(tagDrawingSets)
2930
}
3031
}
3132

32-
export function removeTagFromDrawing(tag: string, drawing: Drawing) {
33-
const tagDrawingSets: TagDrawingSets = loadTagDrawingSets()
33+
export function removeMyTagFromDrawing(tag: string, drawing: Drawing): void {
34+
const tagDrawingSets: TagDrawingSets = loadMyTagDrawingSets()
3435
const drawings: Drawing[] | undefined = tagDrawingSets[tag]
3536
if (!drawings) return
36-
tagDrawingSets[tag] = drawings.filter(o => o.slug !== drawing.slug)
37+
tagDrawingSets[tag] = drawings.filter(o => o.id !== drawing.id)
3738
if (!tagDrawingSets[tag].length) delete tagDrawingSets[tag]
38-
saveTagDrawingSets(tagDrawingSets)
39+
saveMyTagDrawingSets(tagDrawingSets)
40+
}
41+
42+
export function getMyTags(): string[] {
43+
const tagDrawingSets: TagDrawingSets = loadMyTagDrawingSets()
44+
return Object.keys(tagDrawingSets)
45+
}
46+
47+
export function getMyTagsForDrawing(drawing: Drawing): string[] {
48+
return getMyTags().filter(tag => drawingHasMyTag(drawing, tag))
49+
}
50+
51+
export function getFixtureTagsForDrawing(drawing: Drawing): string[] {
52+
return getFixtureTags().filter(tag => drawingHasFixtureTag(drawing, tag))
53+
}
54+
55+
export function getFixtureTags(): string[] {
56+
return Object.keys(fixtureTagDrawingSets)
57+
}
58+
59+
export function drawingHasFixtureTag(drawing: Drawing, tag: string): boolean {
60+
const drawings: Drawing[] = fixtureTagDrawingSets[tag] ?? []
61+
return drawings.some(o => o.id === drawing.id)
3962
}

‎explorer/types/drawing-models.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
export interface Drawing
22
extends Readonly<{
33
id: string // year + number, e.g. 2000.123
4-
year: number
5-
number: number // sequence index for that year
4+
year: string
5+
number: string // sequence index for that year
66
date: string // e.g. 2000-01-01
77
title: string // display text
88
slug: string // for file and url

0 commit comments

Comments
 (0)