Fix icon picker issues

app/soapbox/features/soapbox_config/components/icon_picker.js

@@ -1,5 +0,0 @@
-import Picker from 'emoji-mart/dist-es/components/picker/picker';
-
-export {
-  Picker,
-};

app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import { IconPicker as IconPickerAsync } from '../utils/async';
+import Picker from 'emoji-mart/dist-es/components/picker/picker';
 import Overlay from 'react-overlays/lib/Overlay';
 import classNames from 'classnames';
 import detectPassiveEvents from 'detect-passive-events';
-import forkAwesomeIcons from '../forkawesome.json';
 import Icon from 'soapbox/components/icon';
 
 const messages = defineMessages({
@@ -16,12 +15,10 @@ const messages = defineMessages({
   search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
 });
 
-let IconPicker; // load asynchronously
-
 const backgroundImageFn = () => '';
 const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
 
-const categoriesSort = 'custom';
+const categoriesSort = ['custom'];
 
 @injectIntl
 class IconPickerMenu extends React.PureComponent {
@@ -94,8 +91,9 @@ class IconPickerMenu extends React.PureComponent {
     Object.values(customEmojis).forEach(category => {
       category.forEach(function(icon) {
         const name = icon.replace('fa fa-', '');
+        if (icon !== 'email' && icon !== 'memo') {
           emojis.push({
-          id: icon,
+            id: name,
             name,
             short_names: [name],
             emoticons: [],
@@ -103,6 +101,7 @@ class IconPickerMenu extends React.PureComponent {
             imageUrl: '',
             render: <Icon id={name} />,
           });
+        }
       });
     });
 
@@ -116,12 +115,13 @@ class IconPickerMenu extends React.PureComponent {
       return <div style={{ width: 299 }} />;
     }
 
+    let data = { compressed: true, categories: [], aliases: [], emojis: [] };
     const title = intl.formatMessage(messages.emoji);
     const { modifierOpen } = this.state;
 
     return (
       <div className={classNames('font-icon-picker emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
-        <IconPicker
+        <Picker
           perLine={8}
           emojiSize={22}
           include={categoriesSort}
@@ -136,8 +136,8 @@ class IconPickerMenu extends React.PureComponent {
           showPreview={false}
           backgroundImageFn={backgroundImageFn}
           emojiTooltip
-          overwriteRender
           noShowAnchors
+          data={data}
         />
       </div>
     );
@@ -156,7 +156,6 @@ class IconPickerDropdown extends React.PureComponent {
   };
 
   state = {
-    icons: forkAwesomeIcons,
     active: false,
     loading: false,
   };
@@ -168,18 +167,6 @@ class IconPickerDropdown extends React.PureComponent {
   onShowDropdown = ({ target }) => {
     this.setState({ active: true });
 
-    if (!IconPicker) {
-      this.setState({ loading: true });
-
-      IconPickerAsync().then(EmojiMart => {
-        IconPicker = EmojiMart.Picker;
-
-        this.setState({ loading: false });
-      }).catch(() => {
-        this.setState({ loading: false });
-      });
-    }
-
     const { top } = target.getBoundingClientRect();
     this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
   }
@@ -215,7 +202,8 @@ class IconPickerDropdown extends React.PureComponent {
   render() {
     const { intl, onPickEmoji, value } = this.props;
     const title = intl.formatMessage(messages.emoji);
-    const { active, loading, placement, icons } = this.state;
+    const { active, loading, placement } = this.state;
+    let forkAwesomeIcons = require('../forkawesome.json');
 
     return (
       <div className='font-icon-picker-dropdown' onKeyDown={this.handleKeyDown}>
@@ -225,7 +213,7 @@ class IconPickerDropdown extends React.PureComponent {
 
         <Overlay show={active} placement={placement} target={this.findTarget}>
           <IconPickerMenu
-            custom_emojis={icons}
+            custom_emojis={forkAwesomeIcons}
             loading={loading}
             onClose={this.onHideDropdown}
             onPick={onPickEmoji}

app/soapbox/features/soapbox_config/forkawesome.json

@@ -502,13 +502,11 @@
   "Brand Icons": [
     "fa fa-twitter-square",
     "fa fa-facebook-square",
-    "fa fa-linkedin-square",
     "fa fa-github-square",
     "fa fa-twitter",
     "fa fa-facebook",
     "fa fa-github",
     "fa fa-pinterest",
-    "fa fa-pinterest-square",
     "fa fa-google-plus-square",
     "fa fa-google-plus",
     "fa fa-linkedin",
@@ -529,7 +527,6 @@
     "fa fa-bitbucket",
     "fa fa-bitbucket-square",
     "fa fa-tumblr",
-    "fa fa-tumblr-square",
     "fa fa-apple",
     "fa fa-windows",
     "fa fa-android",
@@ -551,7 +548,6 @@
     "fa fa-yahoo",
     "fa fa-google",
     "fa fa-reddit",
-    "fa fa-reddit-square",
     "fa fa-stumbleupon-circle",
     "fa fa-stumbleupon",
     "fa fa-delicious",
@@ -602,7 +598,6 @@
     "fa fa-simplybuilt",
     "fa fa-skyatlas",
     "fa fa-facebook-official",
-    "fa fa-pinterest-p",
     "fa fa-whatsapp",
     "fa fa-medium",
     "fa fa-medium-square",

app/soapbox/features/soapbox_config/utils/async.js

@@ -1,3 +0,0 @@
-export function IconPicker() {
-  return import(/* webpackChunkName: "icon_picker" */'../components/icon_picker');
-}

yarn.lock

@@ -4475,7 +4475,7 @@ elliptic@^6.0.0:
 
 "emoji-mart@https://gitlab.com/seanking2919/emoji-mart#build":
   version "2.6.3"
-  resolved "https://gitlab.com/seanking2919/emoji-mart#c2d4dc6232e1cb1fd9541a12d2748015cddb14b1"
+  resolved "https://gitlab.com/seanking2919/emoji-mart#4bdefa3d3ee7eb58716adc8727f688facc557291"
 
 emoji-regex@^7.0.1:
   version "7.0.3"