CRUD tags in localStorage

Author: pwfisher

explorer/components/DrawingPage/AddTagModal.tsx

@@ -1,28 +1,55 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Drawing } from '../../types'
+import { Drawing, TagDrawingSets } from '../../types'
 import Modal from 'react-modal'
+import { addTagToDrawing, loadTagDrawingSets, drawingHasTag, removeTagFromDrawing } from '../../lib/hashtags'
 
 export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeModal: () => void }> = ({
   drawing,
   isOpen,
   closeModal,
 }) => {
-  const onNewTagSubmit: (e: React.FormEvent) => void = (e) => {
+  const [newTag, setNewTag] = React.useState('')
+  const [tagDrawingSets, setTagDrawingSets] = React.useState<TagDrawingSets>(loadTagDrawingSets())
+
+  function onNewTagSubmit(e: React.FormEvent<HTMLFormElement>) {
+    addTagToDrawing(newTag, drawing)
+    setNewTag('')
+    setTagDrawingSets(loadTagDrawingSets())
     e.preventDefault()
   }
+  const tags = Object.keys(tagDrawingSets)
 
   return (
     <Modal
       isOpen={isOpen}
       onRequestClose={closeModal}
     >
-      <CloseButton onClick={closeModal}>close</CloseButton>
-      <Title>Add Hashtags</Title>
-      <pre>{JSON.stringify(drawing, null, 2)}</pre>
-      <form onSubmit={onNewTagSubmit}>
-        New: <input /> <input type='submit' />
-      </form>
+      <div onKeyDown={e => e.stopPropagation()}>
+        <CloseButton onClick={closeModal}>close</CloseButton>
+        <Title>Add Hashtags</Title>
+        <pre style={{ fontSize: '9px' }}>{JSON.stringify(drawing, null, 2)}</pre>
+        <form onSubmit={onNewTagSubmit}>
+          New: <input value={newTag} onChange={e => setNewTag(e.currentTarget.value)} /> <input type='submit' />
+        </form>
+        <br />
+        <ul>
+          {tags.sort().map(tag => (
+            <Tag key={tag}>
+              <label>
+                <input
+                  type='checkbox'
+                  checked={drawingHasTag(drawing, tag)}
+                  onChange={e => {
+                    e.currentTarget.checked ? addTagToDrawing(tag, drawing) : removeTagFromDrawing(tag, drawing)
+                    setTagDrawingSets(loadTagDrawingSets())
+                  }}
+                /> {tag}
+              </label>
+            </Tag>
+          ))}
+        </ul>
+      </div>
     </Modal>
   )
 }
@@ -34,6 +61,13 @@ const CloseButton = styled.button.attrs({ classNames: 'Explorer__AddTagModal__Cl
   top: 24px;
 `
 
-const Title = styled.h1.attrs({ classNames: 'Explorer__AddTagModal__CloseButton' })`
+const Title = styled.h1.attrs({ classNames: 'Explorer__AddTagModal__Title' })`
   text-align: center;
 `
+
+const Tag = styled.li.attrs({ classNames: 'Explorer__AddTagModal__Tag' })`
+  border-right: 1px solid #DDD;
+  display: inline-block;
+  margin: 8px 0;
+  padding: 0 8px;
+`

explorer/lib/hashtags.ts

@@ -0,0 +1,35 @@
+import { Drawing, TagDrawingSets } from '../types'
+
+export function loadTagDrawingSets(): TagDrawingSets {
+  if (typeof window === 'undefined') return {} as TagDrawingSets
+  return JSON.parse(localStorage.getItem('tagDrawingSets') || '{}') as TagDrawingSets
+}
+
+export function saveTagDrawingSets(tagDrawingSets: TagDrawingSets) {
+  localStorage.setItem('tagDrawingSets', JSON.stringify(tagDrawingSets))
+}
+
+export function drawingHasTag(drawing: Drawing, tag: string) {
+  const tagDrawingSets: TagDrawingSets = loadTagDrawingSets()
+  const drawings: Drawing[] = tagDrawingSets[tag] ?? []
+  return drawings.some(o => o.slug === drawing.slug)
+}
+
+export function addTagToDrawing(tag: string, drawing: Drawing) {
+  const tagDrawingSets: TagDrawingSets = loadTagDrawingSets()
+  const drawings: Drawing[] = tagDrawingSets[tag] ?? []
+  if (!drawings.includes(drawing)) {
+    drawings.push(drawing)
+    tagDrawingSets[tag] = drawings
+    saveTagDrawingSets(tagDrawingSets)
+  }
+}
+
+export function removeTagFromDrawing(tag: string, drawing: Drawing) {
+  const tagDrawingSets: TagDrawingSets = loadTagDrawingSets()
+  const drawings: Drawing[] | undefined = tagDrawingSets[tag]
+  if (!drawings) return
+  tagDrawingSets[tag] = drawings.filter(o => o.slug !== drawing.slug)
+  if (!tagDrawingSets[tag].length) delete tagDrawingSets[tag]
+  saveTagDrawingSets(tagDrawingSets)
+}

explorer/types/drawing-models.ts

@@ -23,3 +23,7 @@ export interface DayDrawingSetsByYear
   extends Readonly<{
     [year: number]: DayDrawingSets
   }> {}
+
+export interface TagDrawingSets {
+  [tag: string]: Drawing[]
+}