Add EmojiReaction component

web/src/components/EmojiReaction/EmojiReaction.js

@@ -0,0 +1,73 @@
+import { useState } from 'react'
+import Fab from '@material-ui/core/Fab'
+import IconButton from '@material-ui/core/IconButton'
+import Popover from '@material-ui/core/Popover'
+import Svg from 'src/components/Svg'
+
+const emojiMenu = ['🏆', '❤️', '👍', '😊', '😄', '🚀', '👏', '🙌']
+
+const EmojiReaction = ({ emotes, callback = () => {} }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [popoverId, setPopoverId] = useState(undefined)
+
+  const openPopover = (target) => {
+    setAnchorEl(target)
+    setPopoverId('simple-popover')
+    setIsOpen(true)
+  }
+
+  const closePopover = () => {
+    setAnchorEl(null)
+    setPopoverId(undefined)
+    setIsOpen(false)
+  }
+
+  const togglePopover = ({ currentTarget }) => {
+    if (isOpen) {
+      return closePopover()
+    }
+
+    openPopover(currentTarget)
+  }
+
+  const handleEmojiClick = (emoji) => {
+    callback(emoji)
+    closePopover()
+  }
+
+  return [
+    <div className="flex justify-between">
+      <Fab variant="round" aria-describedby={popoverId} onClick={togglePopover}>
+        <Svg name="dots-vertical" />
+      </Fab>
+      <div>
+        {emotes.map((emote) => (
+          <IconButton onClick={() => handleEmojiClick(emote.emoji)}>
+            {emote.emoji} <span>{emote.count}</span>
+          </IconButton>
+        ))}
+      </div>
+    </div>,
+    <Popover
+      id={popoverId}
+      open={isOpen}
+      anchorEl={anchorEl}
+      onClose={closePopover}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+      }}
+    >
+      {emojiMenu.map((emoji) => (
+        <IconButton onClick={() => handleEmojiClick(emoji)}>{emoji}</IconButton>
+      ))}
+    </Popover>,
+  ]
+}
+
+export default EmojiReaction

web/src/components/EmojiReaction/EmojiReaction.stories.js

@@ -0,0 +1,7 @@
+import EmojiReaction from './EmojiReaction'
+
+export const generated = () => {
+  return <EmojiReaction />
+}
+
+export default { title: 'Components/EmojiReaction' }

web/src/components/EmojiReaction/EmojiReaction.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import EmojiReaction from './EmojiReaction'
+
+describe('EmojiReaction', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<EmojiReaction />)
+    }).not.toThrow()
+  })
+})

web/src/components/Svg/Svg.js

@@ -9,6 +9,9 @@ const Svg = ({name, className: className2, strokeWidth = 2}) => {
     </svg>,
     "pencil": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokeWidth} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+    </svg>,
+    "dots-vertical": <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
     </svg>
   }