Merge pull request #604 from systemli/feat/emoji-picker

✨ Add emoji picker to message form

package.json

@@ -6,6 +6,8 @@
     "build": "webpack --config webpack.prod.config.ts"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.2",
@@ -17,6 +19,7 @@
     "@mui/material": "^5.14.11",
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-query-devtools": "^4.11.0",
+    "emoji-mart": "^5.5.2",
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",

src/components/message/Emoji.ts

@@ -0,0 +1,3 @@
+export interface Emoji {
+  native: string
+}

src/components/message/EmojiPicker.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from 'react'
+import data from '@emoji-mart/data'
+import Picker from '@emoji-mart/react'
+import { Emoji } from './Emoji'
+import { Box, IconButton, Popper } from '@mui/material'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSmile } from '@fortawesome/free-solid-svg-icons'
+import palette from '../../theme/palette'
+
+interface Props {
+  onChange: (emoji: Emoji) => void
+}
+
+const EmojiPicker: FC<Props> = ({ onChange }) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+
+  const handleChange = (emoji: Emoji) => {
+    onChange(emoji)
+    setAnchorEl(null)
+  }
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget)
+    event.stopPropagation()
+  }
+
+  const open = Boolean(anchorEl)
+  const id = open ? 'simple-popper' : undefined
+
+  return (
+    <Box>
+      <IconButton component="span" onClick={handleClick} style={{ marginRight: '8px' }}>
+        <FontAwesomeIcon color={palette.primary['main']} icon={faSmile} size="xs" />
+      </IconButton>
+      <Popper anchorEl={anchorEl} id={id} open={open}>
+        <Picker data={data} onClickOutside={() => setAnchorEl(null)} onEmojiSelect={handleChange} theme="light" />
+      </Popper>
+    </Box>
+  )
+}
+
+export default EmojiPicker

src/components/message/MessageForm.tsx

@@ -8,12 +8,14 @@ import useAuth from '../useAuth'
 import { Upload } from '../../api/Upload'
 import UploadButton from './UploadButton'
 import AttachmentsPreview from './AttachmentsPreview'
+import EmojiPicker from './EmojiPicker'
 import MessageMapModal from './MessageMapModal'
 import { FeatureCollection, Geometry } from 'geojson'
 import { Box, Button, FormGroup, IconButton, Stack, TextField } from '@mui/material'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faMapLocationDot, faPaperPlane } from '@fortawesome/free-solid-svg-icons'
 import palette from '../../theme/palette'
+import { Emoji } from './Emoji'
 
 interface Props {
   ticker: Ticker
@@ -30,6 +32,7 @@ const MessageForm: FC<Props> = ({ ticker }) => {
     reset,
     register,
     watch,
+    setValue,
   } = useForm<FormValues>({ mode: 'onSubmit' })
   const { token } = useAuth()
   const { postMessage } = useMessageApi(token)
@@ -78,6 +81,10 @@ const MessageForm: FC<Props> = ({ ticker }) => {
     [attachments]
   )
 
+  const onSelectEmoji = (emoji: Emoji) => {
+    setValue('message', message.toString() + emoji.native + ' ')
+  }
+
   const onMapUpdate = useCallback((featureGroups: FeatureCollection<Geometry, any>) => {
     setMap(featureGroups)
   }, [])
@@ -122,10 +129,11 @@ const MessageForm: FC<Props> = ({ ticker }) => {
         />
       </FormGroup>
       <Stack alignItems="center" direction="row" justifyContent="space-between">
-        <Box>
+        <Box display="flex">
           <Button disabled={isSubmitting} startIcon={<FontAwesomeIcon icon={faPaperPlane} />} sx={{ mr: 1 }} type="submit" variant="outlined">
             Send
           </Button>
+          <EmojiPicker onChange={onSelectEmoji} />
           <UploadButton onUpload={onUpload} ticker={ticker} />
           <IconButton component="span" onClick={() => setMapDialogOpen(true)}>
             <FontAwesomeIcon color={palette.primary['main']} icon={faMapLocationDot} size="xs" />

yarn.lock

@@ -1238,6 +1238,16 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emoji-mart/data@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.1.2.tgz#777c976f8f143df47cbb23a7077c9ca9fe5fc513"
+  integrity sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==
+
+"@emoji-mart/react@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a"
+  integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==
+
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
@@ -4550,6 +4560,11 @@ emittery@^0.13.1:
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
+emoji-mart@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af"
+  integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"