add shell AddTagModal

Author: pwfisher

explorer/components/DrawingPage/ActionsMenu.tsx

@@ -2,18 +2,22 @@ import React from 'react'
 import styled from 'styled-components'
 import { navBarItemStyles } from './styles'
 import { useCookies } from 'react-cookie'
+import { Drawing } from '../../types'
+import { AddTagModal } from './AddTagModal'
 
 type Action = {
   title: string
   onClick: () => void
 }
 
-export const ActionsMenu: React.FC = () => {
+export const ActionsMenu: React.FC<{ drawing: Drawing }> = ({ drawing }) => {
   const [isActive, setIsActive] = React.useState(false)
   const [cookies] = useCookies(['feature__myTags'])
   const [actions, setActions] = React.useState<Action[]>([])
+  const [isAddTagModalOpen, setIsAddTagModalOpen] = React.useState(false)
 
-  const addNewTag = { title: 'Add new tag', onClick: () => alert('add new tag') }
+  const toggleAddTagModal = () => setIsAddTagModalOpen(!isAddTagModalOpen)
+  const addNewTag = { title: 'Add hashtags', onClick: toggleAddTagModal }
 
   React.useEffect(() => {
     const newActions = []
@@ -22,18 +26,21 @@ export const ActionsMenu: React.FC = () => {
   }, [cookies])
 
   return (
-    <Container title='Actions' onClick={() => setIsActive(!isActive)} isHidden={!actions.length}>
-      <svg viewBox="0 0 24 24">
-        <circle cx="5" cy="12" r="2" />
-        <circle cx="12" cy="12" r="2" />
-        <circle cx="19" cy="12" r="2" />
-      </svg>
-      <Popup isActive={isActive}>
-        {actions.map(action => (
-          <Item key={action.title}><a onClick={action.onClick}>{action.title}</a></Item>
-        ))}
-      </Popup>
-    </Container>
+    <>
+      <Container title='Actions' onClick={() => setIsActive(!isActive)} isHidden={!actions.length}>
+        <svg viewBox="0 0 24 24">
+          <circle cx="5" cy="12" r="2" />
+          <circle cx="12" cy="12" r="2" />
+          <circle cx="19" cy="12" r="2" />
+        </svg>
+        <Popup isActive={isActive}>
+          {actions.map(action => (
+            <Item key={action.title}><a onClick={action.onClick}>{action.title}</a></Item>
+          ))}
+        </Popup>
+      </Container>
+      <AddTagModal drawing={drawing} isOpen={isAddTagModalOpen} closeModal={toggleAddTagModal} />
+    </>
   )
 }
 
@@ -61,4 +68,6 @@ const Popup = styled.div.attrs({ className: 'Explorer__ActionsMenu__Popup'})<{ i
   width: 200px;
 `
 
-const Item = styled.div.attrs({ className: 'Explorer__ActionsMenu__Item'})``
+const Item = styled.div.attrs({ className: 'Explorer__ActionsMenu__Item'})`
+  font-size: 24px;
+`

explorer/components/DrawingPage/AddTagModal.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Drawing } from '../../types'
+import Modal from 'react-modal'
+
+export const AddTagModal: React.FC<{ drawing: Drawing; isOpen: boolean; closeModal: () => void }> = ({
+  drawing,
+  isOpen,
+  closeModal,
+}) => {
+  const onNewTagSubmit: (e: React.FormEvent) => void = (e) => {
+    e.preventDefault()
+  }
+
+  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>
+    </Modal>
+  )
+}
+
+const CloseButton = styled.button.attrs({ classNames: 'Explorer__AddTagModal__CloseButton' })`
+  font-size: 24px;
+  position: absolute;
+  right: 24px;
+  top: 24px;
+`
+
+const Title = styled.h1.attrs({ classNames: 'Explorer__AddTagModal__CloseButton' })`
+  text-align: center;
+`

explorer/components/DrawingPage/DrawingPage.tsx

@@ -57,7 +57,7 @@ export const DrawingPage: React.FC<{ drawing: Drawing, year: number }> = ({ draw
             <Link href="/day/[id]" as={`/day/${drawing.date}`}>
               <DateLink title={`Drawings for ${drawing.date}`}><b>{drawing.date.slice(5)}</b></DateLink>
             </Link>
-            <ActionsMenu />
+            <ActionsMenu drawing={drawing} />
             <Link href="/drawing/[id]" as={`/drawing/${getNextSlug(drawing.slug)}`}>
               <ArrowButton title='Next'><RightArrow /></ArrowButton>
             </Link>

explorer/pages/_app.js

@@ -1,6 +1,9 @@
 import { AppFlags } from '../components/AppFlags'
 import { AppStyle } from '../components/AppStyle'
 import { CookiesProvider } from 'react-cookie'
+import Modal from 'react-modal'
+
+Modal.setAppElement('#__next')
 
 export default function App({ Component, pageProps }) {
   return (