enabled async component

app/soapbox/features/compose/components/emoji_picker_dropdown.js

@@ -1,9 +1,7 @@
-import EmojiData from '@emoji-mart/data';
 import classNames from 'classnames';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import { Picker } from 'emoji-mart';
 import PropTypes from 'prop-types';
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl } from 'react-intl';
 import Overlay from 'react-overlays/lib/Overlay';
@@ -11,7 +9,7 @@ import Overlay from 'react-overlays/lib/Overlay';
 import { IconButton } from 'soapbox/components/ui';
 
 import { buildCustomEmojis } from '../../emoji/emoji';
-// import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
+import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -30,36 +28,10 @@ const messages = defineMessages({
   flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
 });
 
-// const categories = [
+let EmojiPicker; // load asynchronously
-//   'recent',
-//   'custom',
-//   'people',
-//   'nature',
-//   'foods',
-//   'activity',
-//   'places',
-//   'objects',
-//   'symbols',
-//   'flags',
-// ];
-
-function EmojiPicker(props) {
-  const ref = useRef();
-
-  useEffect(() => {
-    const input = { ...props, data: EmojiData, ref };
-
-    new Picker(input);
-  }, []);
-
-  return <div ref={ref} />;
-}
-// let EmojiPicker, Emoji; // load asynchronously
 
-// const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
-
 @injectIntl
 class EmojiPickerMenu extends React.PureComponent {
 
@@ -132,10 +104,8 @@ class EmojiPickerMenu extends React.PureComponent {
   }
 
   handleClick = emoji => {
-    console.log(emoji);
-
     if (!emoji.native) {
-      emoji.native = emoji.colons;
+      emoji.native = emoji.shortcodes;
     }
 
     this.props.onClose();
@@ -163,6 +133,7 @@ class EmojiPickerMenu extends React.PureComponent {
 
     const title = intl.formatMessage(messages.emoji);
     const { modifierOpen } = this.state;
+    const theme = 'dark';
 
     return (
       <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
@@ -172,6 +143,14 @@ class EmojiPickerMenu extends React.PureComponent {
           onEmojiSelect={this.handleClick}
           recent={frequentlyUsedEmojis}
           skin={skinTone}
+          perLine={8}
+          emojiSize={38}
+          emojiButtonSize={50}
+          navPosition={'bottom'}
+          theme={theme}
+          set={'twitter'}
+          previewEmoji={false}
+          autoFocus
         />
       </div>
     );
@@ -205,18 +184,17 @@ class EmojiPickerDropdown extends React.PureComponent {
 
     this.setState({ active: true });
 
-    // if (!EmojiPicker) {
+    if (!EmojiPicker) {
-    //   this.setState({ loading: true });
+      this.setState({ loading: true });
-    //
+
-    //   EmojiPickerAsync().then(EmojiMart => {
+      EmojiPickerAsync().then(EmojiMart => {
-    //     EmojiPicker = EmojiMart.Picker;
+        EmojiPicker = EmojiMart;
-    //     Emoji       = EmojiMart.Emoji;
+
-    //
+        this.setState({ loading: false });
-    //     this.setState({ loading: false });
+      }).catch(() => {
-    //   }).catch(() => {
+        this.setState({ loading: false });
-    //     this.setState({ loading: false });
+      });
-    //   });
+    }
-    // }
 
     const { top } = e.target.getBoundingClientRect();
     this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });

app/soapbox/features/emoji/emoji_picker.js

@@ -1,7 +1,28 @@
-import Emoji from '@emoji-mart/data';
+import data from '@emoji-mart/data';
-import { Picker } from 'emoji-mart';
+import { Picker as EmojiPicker } from 'emoji-mart';
+import React, { useRef, useEffect } from 'react';
 
-export {
+// const categories = [
-  Picker,
+//   'recent',
-  Emoji,
+//   'custom',
-};
+//   'people',
+//   'nature',
+//   'foods',
+//   'activity',
+//   'places',
+//   'objects',
+//   'symbols',
+//   'flags',
+// ];
+
+export default function Picker(props) {
+  const ref = useRef();
+
+  useEffect(() => {
+    const input = { ...props, data, ref };
+
+    new EmojiPicker(input);
+  }, []);
+
+  return <div ref={ref} />;
+}

app/soapbox/features/ui/util/async-components.ts

@@ -1,6 +1,6 @@
-// export function EmojiPicker() {
+export function EmojiPicker() {
-//   return import(/* webpackChunkName: "emoji_picker" */'../../emoji/emoji_picker');
+  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/emoji_picker');
-// }
+}
 
 export function Notifications() {
   return import(/* webpackChunkName: "features/notifications" */'../../notifications');

app/soapbox/reducers/compose.ts

@@ -222,6 +222,8 @@ const insertEmoji = (state: State, position: number, emojiData: Emoji, needsSpac
   const oldText = state.text;
   const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native;
 
+  console.log(emojiData, emoji);
+
   return state.merge({
     text: `${oldText.slice(0, position)}${emoji} ${oldText.slice(position)}`,
     focusDate: new Date(),