sync editable hashtag exportString to localStorage

Author: pwfisher

explorer/components/DrawingPage/AddTagModal.tsx

@@ -10,7 +10,9 @@ export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeMod
   closeModal,
 }) => {
   const [newTag, setNewTag] = React.useState('')
-  const [tagDrawingSets, setTagDrawingSets] = React.useState<TagDrawingSets>(loadTagDrawingSets())
+  const [tagDrawingSets, setTagDrawingSets] = React.useState<TagDrawingSets>({})
+
+  React.useEffect(() => setTagDrawingSets(loadTagDrawingSets()), [isOpen])
 
   function onNewTagSubmit(e: React.FormEvent<HTMLFormElement>) {
     addTagToDrawing(newTag, drawing)
@@ -74,12 +76,29 @@ const Code = styled.code.attrs({ classNames: 'Explorer__AddTagModal__Code' })`
 `
 
 const TagList = styled.ul.attrs({ classNames: 'Explorer__AddTagModal__TagList' })`
-  margin: 0 -8px;
+  margin: 0 -12px;
 `
 
 const Tag = styled.li.attrs({ classNames: 'Explorer__AddTagModal__Tag' })`
-  border-right: 1px solid #DDD;
   display: inline-block;
-  margin: 6px 0;
-  padding: 0 8px;
+
+  &::after {
+    content: '·';
+    display: inline-block;
+    opacity: 0.3;
+  }
+
+  label {
+    cursor: pointer;
+    display: inline-block;
+    padding: 4px 6px 4px 2px;
+
+    &:hover {
+      box-shadow: inset 0 0 8px rgba(15, 100, 242, 0.15);
+
+      input[type="checkbox"]{
+        box-shadow: inset 0 0 4px rgba(15, 100, 242, 0.5);
+      }
+    }
+  }
 `

explorer/components/DrawingPage/ExportTagsModal.tsx

@@ -1,52 +1,93 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import Modal from 'react-modal'
-import { loadTagDrawingSets } from '../../lib/hashtags'
+import { loadTagDrawingSets, saveTagDrawingSetsString } from '../../lib/hashtags'
 
 export const ExportTagsModal: React.FC<{ isOpen: boolean; closeModal: () => void }> = ({
   isOpen,
   closeModal,
 }) => {
   const tagDrawingSets = loadTagDrawingSets()
-  const exportString = JSON.stringify(tagDrawingSets, null, 2)
+  const initialExportString = JSON.stringify(tagDrawingSets, null, 2)
+
+  // exportString state powers selectAll
+  const [exportString, setExportString] = React.useState(initialExportString)
+  const [showCopySuccess, setShowCopySuccess] = React.useState(false)
 
   function selectAll() {
     navigator.clipboard.writeText(exportString)
+    setShowCopySuccess(true)
+    setTimeout(() => setShowCopySuccess(false), 2000)
+  }
+
+  // Edits in textarea are written to localStorage
+  function onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    setExportString(e.currentTarget.value)
+    saveTagDrawingSetsString(e.currentTarget.value)
   }
 
   return (
-    <Modal
-      isOpen={isOpen}
-      onRequestClose={closeModal}
-    >
-      <div onKeyDown={e => e.stopPropagation()}>
-        <CloseButton onClick={closeModal}>close</CloseButton>
+    <Modal isOpen={isOpen} onRequestClose={closeModal}>
+      <Wrap onKeyDown={e => e.stopPropagation()}>
         <Title>Export Hashtags</Title>
-        <SelectAllButton onClick={selectAll}>select all</SelectAllButton>
-        <Code>{exportString}</Code>
-      </div>
+        <ButtonBar>
+          <SelectAllButton onClick={selectAll} showSuccess={showCopySuccess}>select all</SelectAllButton>
+          <CloseButton onClick={closeModal}>close</CloseButton>
+        </ButtonBar>
+        <ExportTextarea value={exportString} onChange={onChange}>{exportString}</ExportTextarea>
+      </Wrap>
     </Modal>
   )
 }
 
-const CloseButton = styled.button.attrs({ classNames: 'Explorer__AddTagModal__CloseButton' })`
-  font-size: 24px;
-  position: absolute;
-  right: 24px;
-  top: 24px;
+const Wrap = styled.div.attrs({ classNames: 'Explorer__ExportTagsModal__Wrap' })`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`
+
+const Title = styled.h1.attrs({ classNames: 'Explorer__ExportTagsModal__Title' })`
+  text-align: center;
 `
 
-const SelectAllButton = styled.button.attrs({ classNames: 'Explorer__AddTagModal__SelectAllButton' })`
+const ButtonBar = styled.div.attrs({ classNames: 'Explorer__ExportTagsModal__ButtonBar' })`
+  display: flex;
+  justify-content: space-between;
+`
+
+const SelectAllButton = styled.button.attrs({ classNames: 'Explorer__ExportTagsModal__SelectAllButton' })<{
+  showSuccess: boolean
+}>`
+  align-self: flex-start;
   font-size: 24px;
+
+  ${o => o.showSuccess && css`
+    position: relative;
+
+    &::after {
+      background: rgb(200, 255, 230);
+      border: 1px solid rgba(8, 128, 44, 1);
+      border-radius: 5px;
+      box-shadow: inset 0 0 5px rgba(15, 225, 80, 1);
+      color: rgba(0, 64, 0, 1);
+      content: "copied to clipboard ✓";
+      display: block;
+      left: calc(100% + 16px);
+      padding: 1px 0 2px;
+      position: absolute;
+      top: -2px;
+      width: 250px;
+      z-index: 1;
+    }
+  `}
 `
 
-const Title = styled.h1.attrs({ classNames: 'Explorer__AddTagModal__Title' })`
-  text-align: center;
+const CloseButton = styled.button.attrs({ classNames: 'Explorer__ExportTagsModal__CloseButton' })`
+  font-size: 24px;
 `
 
-const Code = styled.code.attrs({ classNames: 'Explorer__AddTagModal__Code' })`
-  color: #999;
-  display: block;
-  margin: 24px 0 0;
-  white-space: pre;
+const ExportTextarea = styled.textarea.attrs({ classNames: 'Explorer__ExportTagsModal__ExportTextarea' })`
+  height: 100%;
+  margin: 16px -20px -20px;
+  padding: 16px;
 `

explorer/lib/hashtags.ts

@@ -6,7 +6,11 @@ export function loadTagDrawingSets(): TagDrawingSets {
 }
 
 export function saveTagDrawingSets(tagDrawingSets: TagDrawingSets) {
-  localStorage.setItem('tagDrawingSets', JSON.stringify(tagDrawingSets))
+  saveTagDrawingSetsString(JSON.stringify(tagDrawingSets || {}))
+}
+
+export function saveTagDrawingSetsString(value: string) {
+  localStorage.setItem('tagDrawingSets', value)
 }
 
 export function drawingHasTag(drawing: Drawing, tag: string) {