Merge branch 'heart-react' into 'develop'

Fix heart emoji react for Pleroma develop branch; let emojis be customizable the admin

Closes #538

See merge request soapbox-pub/soapbox-fe!398

app/soapbox/actions/soapbox.js

@@ -18,10 +18,18 @@ export const defaultConfig = ImmutableMap({
   navlinks: ImmutableMap({
     homeFooter: ImmutableList(),
   }),
+  allowedEmoji: ImmutableList([
+    '👍',
+    '❤️',
+    '😆',
+    '😮',
+    '😢',
+    '😩',
+  ]),
 });
 
 export function getSoapboxConfig(state) {
-  return defaultConfig.mergeDeep(state.get('soapbox'));
+  return defaultConfig.merge(state.get('soapbox'));
 }
 
 export function fetchSoapboxConfig() {

app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap

@@ -16,7 +16,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
     className="emoji-react-selector__emoji"
     dangerouslySetInnerHTML={
       Object {
-        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/emoji/2764.svg\\" />",
+        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤️\\" title=\\":heart:\\" src=\\"/emoji/2764.svg\\" />",
       }
     }
   />

app/soapbox/components/__tests__/emoji_selector-test.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { createComponent } from 'soapbox/test_helpers';
 import EmojiSelector from '../emoji_selector';
 
 describe('<EmojiSelector />', () => {
   it('renders correctly', () => {
-    const component = renderer.create(<EmojiSelector />);
+    const component = createComponent(<EmojiSelector />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });

app/soapbox/components/emoji_selector.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ALLOWED_EMOJI } from 'soapbox/utils/emoji_reacts';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
 import emojify from 'soapbox/features/emoji/emoji';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import classNames from 'classnames';
 
-export default class EmojiSelector extends React.Component {
+const mapStateToProps = state => ({
+  allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
+});
+
+export default @connect(mapStateToProps)
+class EmojiSelector extends ImmutablePureComponent {
 
   static propTypes = {
     onReact: PropTypes.func.isRequired,
@@ -17,11 +24,11 @@ export default class EmojiSelector extends React.Component {
   }
 
   render() {
-    const { onReact, visible } = this.props;
+    const { onReact, visible, allowedEmoji } = this.props;
 
     return (
       <div className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible })}>
-        {ALLOWED_EMOJI.map((emoji, i) => (
+        {allowedEmoji.map((emoji, i) => (
           <button
             key={i}
             className='emoji-react-selector__emoji'

app/soapbox/components/status.js

@@ -93,6 +93,7 @@ class Status extends ImmutablePureComponent {
     cachedMediaWidth: PropTypes.number,
     group: ImmutablePropTypes.map,
     displayMedia: PropTypes.string,
+    allowedEmoji: ImmutablePropTypes.list,
   };
 
   // Avoid checking props that are functions (and whose equality will always

app/soapbox/components/status_action_bar.js

@@ -74,6 +74,7 @@ class StatusActionBar extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     me: SoapboxPropTypes.me,
     isStaff: PropTypes.bool.isRequired,
+    allowedEmoji: ImmutablePropTypes.list,
   };
 
   static defaultProps = {
@@ -120,7 +121,7 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   handleLikeButtonClick = e => {
-    const meEmojiReact = getReactForStatus(this.props.status) || '👍';
+    const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
     if (this.isMobile()) {
       if (this.state.emojiSelectorVisible) {
         this.handleReactClick(meEmojiReact)();
@@ -314,7 +315,7 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   render() {
-    const { status, intl } = this.props;
+    const { status, intl, allowedEmoji } = this.props;
     const { emojiSelectorVisible } = this.state;
 
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -326,8 +327,9 @@ class StatusActionBar extends ImmutablePureComponent {
       status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()),
       favouriteCount,
       status.get('favourited'),
+      allowedEmoji,
     ).reduce((acc, cur) => acc + cur.get('count'), 0);
-    const meEmojiReact = getReactForStatus(status);
+    const meEmojiReact = getReactForStatus(status, allowedEmoji);
 
     let menu = this._makeMenu(publicStatus);
     let reblogIcon = 'retweet';

app/soapbox/containers/status_container.js

@@ -35,6 +35,7 @@ import {
   groupRemoveStatus,
 } from '../actions/groups';
 import { getSettings } from '../actions/settings';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -53,6 +54,7 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, props) => ({
     status: getStatus(state, props),
     displayMedia: getSettings(state).get('displayMedia'),
+    allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
   });
 
   return mapStateToProps;

app/soapbox/features/status/components/action_bar.js

@@ -78,6 +78,7 @@ class ActionBar extends React.PureComponent {
     onOpenUnauthorizedModal: PropTypes.func.isRequired,
     me: SoapboxPropTypes.me,
     isStaff: PropTypes.bool.isRequired,
+    allowedEmoji: ImmutablePropTypes.list,
   };
 
   static defaultProps = {
@@ -130,7 +131,7 @@ class ActionBar extends React.PureComponent {
   }
 
   handleLikeButtonClick = e => {
-    const meEmojiReact = getReactForStatus(this.props.status) || '👍';
+    const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
     if (this.isMobile()) {
       if (this.state.emojiSelectorVisible) {
         this.handleReactClick(meEmojiReact)();
@@ -232,12 +233,12 @@ class ActionBar extends React.PureComponent {
   }
 
   render() {
-    const { status, intl, me, isStaff } = this.props;
+    const { status, intl, me, isStaff, allowedEmoji } = this.props;
     const { emojiSelectorVisible } = this.state;
 
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
     const mutingConversation = status.get('muted');
-    const meEmojiReact = getReactForStatus(status);
+    const meEmojiReact = getReactForStatus(status, allowedEmoji);
 
     let menu = [];
 

app/soapbox/features/status/components/detailed_status.js

@@ -15,7 +15,7 @@ import scheduleIdleTask from '../../ui/util/schedule_idle_task';
 import classNames from 'classnames';
 import Icon from 'soapbox/components/icon';
 import PollContainer from 'soapbox/containers/poll_container';
-import { StatusInteractionBar } from './status_interaction_bar';
+import StatusInteractionBar from './status_interaction_bar';
 import { getDomain } from 'soapbox/utils/accounts';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 

app/soapbox/features/status/components/status_interaction_bar.js

@@ -1,17 +1,26 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
 import { FormattedNumber } from 'react-intl';
 import emojify from 'soapbox/features/emoji/emoji';
 import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
 import { Link } from 'react-router-dom';
 import Icon from 'soapbox/components/icon';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
-export class StatusInteractionBar extends React.Component {
+const mapStateToProps = state => ({
+  allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
+});
+
+export default @connect(mapStateToProps)
+class StatusInteractionBar extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map,
     me: SoapboxPropTypes.me,
+    allowedEmoji: ImmutablePropTypes.list,
   }
 
   getNormalizedReacts = () => {
@@ -20,6 +29,7 @@ export class StatusInteractionBar extends React.Component {
       status.getIn(['pleroma', 'emoji_reactions']),
       status.get('favourites_count'),
       status.get('favourited'),
+      this.props.allowedEmoji,
     ).reverse();
   }
 

app/soapbox/features/status/index.js

@@ -46,6 +46,7 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import Icon from 'soapbox/components/icon';
 import { getSettings } from 'soapbox/actions/settings';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -111,6 +112,7 @@ const makeMapStateToProps = () => {
       domain: state.getIn(['meta', 'domain']),
       me: state.get('me'),
       displayMedia: getSettings(state).get('displayMedia'),
+      allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
     };
   };
 
@@ -521,6 +523,7 @@ class Status extends ImmutablePureComponent {
                 onPin={this.handlePin}
                 onBookmark={this.handleBookmark}
                 onEmbed={this.handleEmbed}
+                allowedEmoji={this.props.allowedEmoji}
               />
             </div>
           </HotKeys>

app/soapbox/utils/__tests__/emoji_reacts-test.js

@@ -158,7 +158,7 @@ describe('getReactForStatus', () => {
         ],
       },
     });
-    expect(getReactForStatus(status)).toEqual('❤');
+    expect(getReactForStatus(status, ALLOWED_EMOJI)).toEqual('❤');
   });
 
   it('returns a thumbs-up for a favourite', () => {

app/soapbox/utils/emoji_reacts.js

@@ -7,7 +7,7 @@ import {
 // I've customized them.
 export const ALLOWED_EMOJI = [
   '👍',
-  '❤',
+  '❤️',
   '😆',
   '😮',
   '😢',
@@ -75,11 +75,12 @@ export const reduceEmoji = (emojiReacts, favouritesCount, favourited, allowedEmo
     emojiReacts, favouritesCount, favourited,
   ))), allowedEmoji));
 
-export const getReactForStatus = status => {
+export const getReactForStatus = (status, allowedEmoji=ALLOWED_EMOJI) => {
   return reduceEmoji(
     status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()),
-    status.get('favourites_count'),
+    status.get('favourites_count', 0),
     status.get('favourited'),
+    allowedEmoji,
   ).filter(e => e.get('me') === true)
     .getIn([0, 'name']);
 };