feat: 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/EmojiPickerModal.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react'
+import Modal from '../common/Modal'
+import { Emoji } from 'emoji-mart'
+import data from '@emoji-mart/data'
+import Picker from '@emoji-mart/react'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  onChange: (emoji: Emoji) => void
+}
+
+const EmojiPickerModal: FC<Props> = ({ open, onClose, onChange }) => {
+  const handleChange = (emoji: Emoji) => {
+    onChange(emoji)
+    onClose()
+  }
+
+  return (
+    <Modal
+      dialogContentSx={{ px: 0 }}
+      onClose={onClose}
+      open={open}
+      title="Insert emoji"
+    >
+      <Picker data={data} onClickOutside={() => onClose } onEmojiSelect={handleChange}/>
+    </Modal>
+  )
+}
+
+export default EmojiPickerModal

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 EmojiPickerModal from './EmojiPickerModal'
 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 { faMapLocationDot, faPaperPlane, faSmile } from '@fortawesome/free-solid-svg-icons'
 import palette from '../../theme/palette'
+import { Emoji } from 'emoji-mart'
 
 interface Props {
   ticker: Ticker
@@ -30,13 +32,15 @@ const MessageForm: FC<Props> = ({ ticker }) => {
     reset,
     register,
     watch,
+    setValue,
   } = useForm<FormValues>({ mode: 'onSubmit' })
   const { token } = useAuth()
   const { postMessage } = useMessageApi(token)
   const queryClient = useQueryClient()
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
   const [attachments, setAttachments] = useState<Upload[]>([])
   const [mapDialogOpen, setMapDialogOpen] = useState<boolean>(false)
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState<boolean>(false)
   const emptyMap: FeatureCollection<Geometry, any> = {
     type: 'FeatureCollection',
     features: [],
@@ -78,6 +82,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)
   }, [])
@@ -126,11 +134,15 @@ const MessageForm: FC<Props> = ({ ticker }) => {
           <Button disabled={isSubmitting} startIcon={<FontAwesomeIcon icon={faPaperPlane} />} sx={{ mr: 1 }} type="submit" variant="outlined">
             Send
           </Button>
+          <IconButton component="span" onClick={() => setEmojiPickerOpen(true)} style={{ marginRight: '8px' }}>
+            <FontAwesomeIcon color={palette.primary['main']} icon={faSmile} size="xs" />
+          </IconButton>
           <UploadButton onUpload={onUpload} ticker={ticker} />
           <IconButton component="span" onClick={() => setMapDialogOpen(true)}>
             <FontAwesomeIcon color={palette.primary['main']} icon={faMapLocationDot} size="xs" />
           </IconButton>
           <MessageMapModal map={map} onChange={onMapUpdate} onClose={() => setMapDialogOpen(false)} open={mapDialogOpen} ticker={ticker} />
+          <EmojiPickerModal onChange={onSelectEmoji} onClose={() => setEmojiPickerOpen(false)} open={emojiPickerOpen} />
         </Box>
         <MessageFormCounter letterCount={message?.length || 0} maxLength={maxLength} />
       </Stack>

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"