add MyTagsContainer to keep state in sync

Author: pwfisher

explorer/__fixtures__/index.ts

@@ -4,3 +4,4 @@ import { TagDrawingSets } from '../types'
 import tagDrawingSetsJson from './tagDrawingSets.json'
 
 export const tagDrawingSets: TagDrawingSets = tagDrawingSetsJson as TagDrawingSets
+export const tags: string[] = Object.keys(tagDrawingSets).sort()

explorer/components/DrawingPage/AddTagModal.tsx

@@ -1,31 +1,28 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Drawing, TagDrawingSets } from '../../types'
+import { Drawing } from '../../types'
 import Modal from 'react-modal'
-import {
-  addMyTagToDrawing,
-  drawingHasMyTag,
-  loadMyTagDrawingSets,
-  removeMyTagFromDrawing,
-} from '../../lib/hashtags'
+import { MyTagsContainer } from '../../containers/MyTags'
 
 export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeModal: () => void }> = ({
   drawing,
   isOpen,
   closeModal,
 }) => {
-  const [newTag, setNewTag] = React.useState('')
-  const [tagDrawingSets, setTagDrawingSets] = React.useState<TagDrawingSets>({})
+  const {
+    myTags,
+    drawingHasMyTag,
+    addMyTagToDrawing,
+    removeMyTagFromDrawing,
+  } = MyTagsContainer.useContainer()
 
-  React.useEffect(() => setTagDrawingSets(loadMyTagDrawingSets()), [isOpen])
+  const [newTag, setNewTag] = React.useState('')
 
   function onNewTagSubmit(e: React.FormEvent<HTMLFormElement>) {
     addMyTagToDrawing(newTag, drawing)
     setNewTag('')
-    setTagDrawingSets(loadMyTagDrawingSets())
     e.preventDefault()
   }
-  const tags = Object.keys(tagDrawingSets)
 
   return (
     <Modal
@@ -41,7 +38,7 @@ export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeMod
         </form>
         <br />
         <TagList>
-          {tags.sort().map(tag => (
+          {myTags.map(tag => (
             <Tag key={tag}>
               <label>
                 <input
@@ -51,7 +48,6 @@ export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeMod
                     e.currentTarget.checked
                       ? addMyTagToDrawing(tag, drawing)
                       : removeMyTagFromDrawing(tag, drawing)
-                    setTagDrawingSets(loadMyTagDrawingSets())
                   }}
                 /> {tag}
               </label>

explorer/components/DrawingPage/DrawingPage.tsx

@@ -22,10 +22,13 @@ import { useRouter } from 'next/router'
 import Div100vh from 'react-div-100vh'
 import { PageLayout } from '../PageLayout'
 import { ActionsMenu } from './ActionsMenu'
-import { getFixtureTagsForDrawing, getMyTagsForDrawing } from '../../lib/hashtags'
+import { getTagsForDrawing } from '../../lib/hashtags'
+import { MyTagsContainer } from '../../containers/MyTags'
 
 export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ drawing, year }) => {
+  const { getMyTagsForDrawing } = MyTagsContainer.useContainer()
   const router = useRouter()
+
   const goToPrevious = () => router.push(`/drawing/${getPreviousSlug(drawing.slug)}`)
   const goToNext = () => router.push(`/drawing/${getNextSlug(drawing.slug)}`)
 
@@ -39,9 +42,8 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
     handler?.()
   }
 
-  const fixtureTags = getFixtureTagsForDrawing(drawing)
-
-  const myTags = getMyTagsForDrawing(drawing) // needs to come from context in order to update
+  const tags = getTagsForDrawing(drawing)
+  const myTags = getMyTagsForDrawing(drawing)
 
   return (
     <PageLayout title={drawing.title} showHeader={false} showFooter={false}>
@@ -51,8 +53,8 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
           <ImageWrap>
             <Image src={`${assetPrefix}/images/${drawing.image}`} alt={drawing.title} />
           </ImageWrap>
-          {fixtureTags.length > 0 && <TagList>{fixtureTags.sort().map(tag => <Tag key={tag}>{tag}</Tag>)}</TagList>}
-          {myTags.length > 0 && <TagList>{myTags.sort().map(tag => <Tag key={tag}>{tag}</Tag>)}</TagList>}
+          {tags.length > 0 && <TagList>{tags.map(tag => <Tag key={tag}>{tag}</Tag>)}</TagList>}
+          {myTags.length > 0 && <TagList>{myTags.map(tag => <Tag key={tag}>{tag}</Tag>)}</TagList>}
           <NavBar>
             <Link href="/drawing/[id]" as={`/drawing/${getPreviousSlug(drawing.slug)}`}>
               <ArrowButton title='Previous'><LeftArrow /></ArrowButton>

explorer/components/DrawingPage/ExportTagsModal.tsx

@@ -1,29 +1,28 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import Modal from 'react-modal'
-import { loadMyTagDrawingSets, saveMyTagDrawingSetsString } from '../../lib/hashtags'
+import { MyTagsContainer } from '../../containers/MyTags'
+import { TagDrawingSets } from '../../types'
 
 export const ExportTagsModal: React.FC<{ isOpen: boolean; closeModal: () => void }> = ({
   isOpen,
   closeModal,
 }) => {
-  const tagDrawingSets = loadMyTagDrawingSets()
-  const initialExportString = JSON.stringify(tagDrawingSets, null, 2)
-
-  // exportString state powers selectAll
-  const [exportString, setExportString] = React.useState(initialExportString)
+  const { myTagDrawingSets, saveMyTagDrawingSets } = MyTagsContainer.useContainer()
+  const storedValue: string = JSON.stringify(myTagDrawingSets, null, 2)
   const [showCopySuccess, setShowCopySuccess] = React.useState(false)
 
   function selectAll() {
-    navigator.clipboard.writeText(exportString)
+    navigator.clipboard.writeText(storedValue)
     setShowCopySuccess(true)
     setTimeout(() => setShowCopySuccess(false), 2000)
   }
 
-  // Edits in textarea are written to localStorage
+  // Valid edits in textarea are written to localStorage
   function onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-    setExportString(e.currentTarget.value)
-    saveMyTagDrawingSetsString(e.currentTarget.value)
+    try {
+      saveMyTagDrawingSets(JSON.parse(e.currentTarget.value) as TagDrawingSets)
+    } catch (e) {}
   }
 
   return (
@@ -34,7 +33,7 @@ export const ExportTagsModal: React.FC<{ isOpen: boolean; closeModal: () => void
           <SelectAllButton onClick={selectAll} showSuccess={showCopySuccess}>select all</SelectAllButton>
           <CloseButton onClick={closeModal}>close</CloseButton>
         </ButtonBar>
-        <ExportTextarea value={exportString} onChange={onChange}>{exportString}</ExportTextarea>
+        <ExportTextarea value={storedValue} onChange={onChange} />
       </Wrap>
     </Modal>
   )

explorer/containers/MyTags.ts

@@ -0,0 +1,60 @@
+import React from 'react'
+import { createContainer } from 'unstated-next'
+import { duplicateTagDrawingSets, loadMyTagDrawingSets } from '../lib/hashtags'
+import { Drawing, TagDrawingSets } from '../types'
+
+export function useMyTags() {
+  const [myTagDrawingSets, setMyTagDrawingSets] = React.useState<TagDrawingSets>({})
+
+  // Init client-side from localStorage
+  React.useEffect(() => setMyTagDrawingSets(loadMyTagDrawingSets()), [])
+
+  function saveMyTagDrawingSets(tagDrawingSets: TagDrawingSets): void {
+    localStorage.setItem('tagDrawingSets', JSON.stringify(tagDrawingSets))
+    setMyTagDrawingSets(tagDrawingSets)
+  }
+
+  function drawingHasMyTag(drawing: Drawing, tag: string): boolean {
+    const drawings: Drawing[] = myTagDrawingSets[tag] ?? []
+    return drawings.some(o => o.id === drawing.id)
+  }
+
+  const myTags: string[] = Object.keys(myTagDrawingSets).sort()
+
+  function addMyTagToDrawing(tag: string, drawing: Drawing): void {
+    const workingCopy: TagDrawingSets = duplicateTagDrawingSets(myTagDrawingSets)
+    const drawings: Drawing[] = workingCopy[tag] ?? []
+    if (!drawings.some(o => o.id === drawing.id)) {
+      drawings.push(drawing)
+      workingCopy[tag] = drawings
+      saveMyTagDrawingSets(workingCopy)
+      setMyTagDrawingSets(workingCopy)
+    }
+  }
+
+  function removeMyTagFromDrawing(tag: string, drawing: Drawing): void {
+    const workingCopy: TagDrawingSets = duplicateTagDrawingSets(myTagDrawingSets)
+    const drawings: Drawing[] | undefined = workingCopy[tag]
+    if (!drawings) return
+    workingCopy[tag] = drawings.filter(o => o.id !== drawing.id)
+    if (!workingCopy[tag].length) delete workingCopy[tag]
+    saveMyTagDrawingSets(workingCopy)
+    setMyTagDrawingSets(workingCopy)
+  }
+
+  function getMyTagsForDrawing(drawing: Drawing): string[] {
+    return myTags.filter(tag => drawingHasMyTag(drawing, tag))
+  }
+
+  return {
+    myTagDrawingSets,
+    saveMyTagDrawingSets,
+    myTags,
+    drawingHasMyTag,
+    addMyTagToDrawing,
+    removeMyTagFromDrawing,
+    getMyTagsForDrawing,
+  }
+}
+
+export const MyTagsContainer = createContainer(useMyTags)

explorer/lib/hashtags.ts

@@ -1,62 +1,26 @@
 import { Drawing, TagDrawingSets } from '../types'
-import { tagDrawingSets as fixtureTagDrawingSets } from '../__fixtures__'
+import {
+  tagDrawingSets as fixtureTagDrawingSets,
+  tags as fixtureTags,
+} from '../__fixtures__'
 
-export function loadMyTagDrawingSets(): TagDrawingSets {
-  if (typeof window === 'undefined') return {} as TagDrawingSets
-  return JSON.parse(localStorage.getItem('tagDrawingSets') || '{}') as TagDrawingSets
-}
-
-export function saveMyTagDrawingSets(tagDrawingSets: TagDrawingSets): void {
-  saveMyTagDrawingSetsString(JSON.stringify(tagDrawingSets || {} as TagDrawingSets))
-}
-
-export function saveMyTagDrawingSetsString(value: string): void {
-  localStorage.setItem('tagDrawingSets', value)
+export function getTagsForDrawing(drawing: Drawing): string[] {
+  return fixtureTags.filter(tag => drawingHasTag(drawing, tag))
 }
 
-export function drawingHasMyTag(drawing: Drawing, tag: string): boolean {
-  const tagDrawingSets: TagDrawingSets = loadMyTagDrawingSets()
-  const drawings: Drawing[] = tagDrawingSets[tag] ?? []
+export function drawingHasTag(drawing: Drawing, tag: string): boolean {
+  const drawings: Drawing[] = fixtureTagDrawingSets[tag] ?? []
   return drawings.some(o => o.id === drawing.id)
 }
 
-export function addMyTagToDrawing(tag: string, drawing: Drawing): void {
-  const tagDrawingSets: TagDrawingSets = loadMyTagDrawingSets()
-  const drawings: Drawing[] = tagDrawingSets[tag] ?? []
-  if (!drawings.some(o => o.id === drawing.id)) {
-    drawings.push(drawing)
-    tagDrawingSets[tag] = drawings
-    saveMyTagDrawingSets(tagDrawingSets)
-  }
-}
-
-export function removeMyTagFromDrawing(tag: string, drawing: Drawing): void {
-  const tagDrawingSets: TagDrawingSets = loadMyTagDrawingSets()
-  const drawings: Drawing[] | undefined = tagDrawingSets[tag]
-  if (!drawings) return
-  tagDrawingSets[tag] = drawings.filter(o => o.id !== drawing.id)
-  if (!tagDrawingSets[tag].length) delete tagDrawingSets[tag]
-  saveMyTagDrawingSets(tagDrawingSets)
-}
-
-export function getMyTags(): string[] {
-  const tagDrawingSets: TagDrawingSets = loadMyTagDrawingSets()
-  return Object.keys(tagDrawingSets)
-}
-
-export function getMyTagsForDrawing(drawing: Drawing): string[] {
-  return getMyTags().filter(tag => drawingHasMyTag(drawing, tag))
-}
-
-export function getFixtureTagsForDrawing(drawing: Drawing): string[] {
-  return getFixtureTags().filter(tag => drawingHasFixtureTag(drawing, tag))
-}
-
-export function getFixtureTags(): string[] {
-  return Object.keys(fixtureTagDrawingSets)
+export function loadMyTagDrawingSets(): TagDrawingSets {
+  if (typeof window === 'undefined') return {} as TagDrawingSets
+  return JSON.parse(localStorage.getItem('tagDrawingSets') || '{}') as TagDrawingSets
 }
 
-export function drawingHasFixtureTag(drawing: Drawing, tag: string): boolean {
-  const drawings: Drawing[] = fixtureTagDrawingSets[tag] ?? []
-  return drawings.some(o => o.id === drawing.id)
+export function duplicateTagDrawingSets(original: TagDrawingSets): TagDrawingSets {
+  return Object.keys(original).reduce<TagDrawingSets>((accumulator, tag) => {
+    accumulator[tag] = [...original[tag]]
+    return accumulator
+  }, {})
 }

explorer/pages/_app.js

@@ -2,15 +2,18 @@ import { AppFlags } from '../components/AppFlags'
 import { AppStyle } from '../components/AppStyle'
 import { CookiesProvider } from 'react-cookie'
 import Modal from 'react-modal'
+import { MyTagsContainer } from '../containers/MyTags'
 
 Modal.setAppElement('#__next')
 
 export default function App({ Component, pageProps }) {
   return (
     <CookiesProvider>
-      <AppFlags />
-      <AppStyle />
-      <Component {...pageProps} />
+      <MyTagsContainer.Provider>
+        <AppFlags />
+        <AppStyle />
+        <Component {...pageProps} />
+      </MyTagsContainer.Provider>
     </CookiesProvider>
   )
 }