Add emoji reaction bar into status view

app/javascript/mastodon/components/status.jsx

@@ -7,6 +7,7 @@ import RelativeTimestamp from './relative_timestamp';
 import DisplayName from './display_name';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
+import StatusEmojiReactionsBar from './status_emoji_reactions_bar';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
@@ -505,6 +506,12 @@ class Status extends ImmutablePureComponent {
 
     const visibilityIcon = visibilityIconInfo[status.get('visibility')];
 
+    let emojiReactionsBar = null;
+    if (status.get('emoji_reactions')) {
+      const emojiReactions = status.get('emoji_reactions');
+      emojiReactionsBar = <StatusEmojiReactionsBar emojiReactions={emojiReactions} statusId={status.get('id')} />;
+    }
+
     return (
       <HotKeys handlers={handlers}>
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText)} ref={this.handleRef}>
@@ -538,6 +545,8 @@ class Status extends ImmutablePureComponent {
 
             {media}
 
+            {emojiReactionsBar}
+
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
           </div>
         </div>

app/javascript/mastodon/components/status_emoji_reactions_bar.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import emojify from '../features/emoji/emoji';
+import classNames from 'classnames';
+
+class EmojiReactionButton extends React.PureComponent {
+
+  static propTypes = {
+    name: ImmutablePropTypes.map,
+    url: PropTypes.string,
+    staticUrl: PropTypes.string,
+    count: PropTypes.number.isRequired,
+    me: PropTypes.bool,
+    onClick: PropTypes.func,
+  };
+
+  render () {
+    const { name, url, staticUrl, count, me } = this.props;
+
+    let emojiHtml = null;
+    if (url) {
+      let customEmojis = {};
+      customEmojis[name] = { url, static_url: staticUrl };
+      emojiHtml = emojify(`:${name}:`, customEmojis);
+    } else {
+      emojiHtml = emojify(name);
+    }
+
+    const classList = {
+      'emoji-reactions-bar__button': true,
+      'toggled': me,
+    };
+
+    return (
+      <button className={classNames(classList)} type='button'>
+        <span className='emoji' dangerouslySetInnerHTML={{ __html: emojiHtml }} />
+        <span className='count'>{count}</span>
+      </button>
+    );
+  }
+
+}
+
+export default @injectIntl
+class StatusEmojiReactionsBar extends React.PureComponent {
+
+  static propTypes = {
+    emojiReactions: ImmutablePropTypes.map.isRequired,
+    statusId: PropTypes.string,
+  };
+
+  render () {
+    const { emojiReactions, statusId } = this.props;
+
+    const emojiButtons = React.Children.map(emojiReactions, (emoji) => (
+      <EmojiReactionButton
+        key={emoji.get('id')}
+        name={emoji.get('name')}
+        count={emoji.get('count')}
+        me={emoji.get('me')}
+        url={emoji.get('url')}
+        staticUrl={emoji.get('static_url')}
+      />));
+
+    return (
+      <div className='status__emoji-reactions-bar'>
+        {emojiButtons}
+      </div>
+    );
+  }
+
+}