Add StatusInteractionBar

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import emojify from 'gabsocial/features/emoji/emoji';
+
+// https://emojipedia.org/facebook/
+const ALLOWED_EMOJI = [
+  '👍',
+  '❤️',
+  '😂',
+  '😯',
+  '😢',
+  '😡',
+];
+
+export class StatusInteractionBar extends React.Component {
+
+  propTypes = {
+    status: ImmutablePropTypes.map,
+  }
+
+  sortEmoji = emojiReacts => (
+    emojiReacts // TODO: Sort
+  );
+
+  mergeEmoji = emojiReacts => (
+    emojiReacts // TODO: Merge similar emoji
+  );
+
+  filterEmoji = emojiReacts => (
+    emojiReacts.filter(emojiReact => (
+      ALLOWED_EMOJI.includes(emojiReact.get('name'))
+    )))
+
+  render() {
+    const { status } = this.props;
+    const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']);
+
+    return (
+      <>
+        {this.filterEmoji(emojiReacts).map(e =>
+          <span dangerouslySetInnerHTML={{ __html: emojify(e.get('name')) }} />
+        )}
+      </>
+    );
+  }
+
+}

app/gabsocial/features/status/index.js

@@ -43,6 +43,7 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import Icon from 'gabsocial/components/icon';
 import { getSettings } from 'gabsocial/actions/settings';
+import { StatusInteractionBar } from './components/status_interaction_bar';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -492,6 +493,8 @@ class Status extends ImmutablePureComponent {
                 onToggleMediaVisibility={this.handleToggleMediaVisibility}
               />
 
+              <StatusInteractionBar status={status} />
+
               <ActionBar
                 status={status}
                 onReply={this.handleReplyClick}