Mastodon: conditionally render emojiReacts

app/soapbox/components/status_action_bar.js

@@ -14,6 +14,7 @@ import EmojiSelector from 'soapbox/components/emoji_selector';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import { List as ImmutableList } from 'immutable';
+import { getFeatures } from 'soapbox/utils/features';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -93,6 +94,7 @@ class StatusActionBar extends ImmutablePureComponent {
     allowedEmoji: ImmutablePropTypes.list,
     emojiSelectorFocused: PropTypes.bool,
     handleEmojiSelectorUnfocus: PropTypes.func.isRequired,
+    features: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -132,16 +134,26 @@ class StatusActionBar extends ImmutablePureComponent {
   isMobile = () => window.matchMedia('only screen and (max-width: 895px)').matches;
 
   handleLikeButtonHover = e => {
-    if (!this.isMobile()) this.setState({ emojiSelectorVisible: true });
+    const { features } = this.props;
+
+    if (features.emojiReacts && !this.isMobile()) {
+      this.setState({ emojiSelectorVisible: true });
+    }
   }
 
   handleLikeButtonLeave = e => {
-    if (!this.isMobile()) this.setState({ emojiSelectorVisible: false });
+    const { features } = this.props;
+
+    if (features.emojiReacts && !this.isMobile()) {
+      this.setState({ emojiSelectorVisible: false });
+    }
   }
 
   handleLikeButtonClick = e => {
+    const { features } = this.props;
     const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
-    if (this.isMobile()) {
+
+    if (features.emojiReacts && this.isMobile()) {
       if (this.state.emojiSelectorVisible) {
         this.handleReactClick(meEmojiReact)();
       } else {
@@ -362,7 +374,7 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   render() {
-    const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus } = this.props;
+    const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus, features } = this.props;
     const { emojiSelectorVisible } = this.state;
 
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
@@ -427,7 +439,7 @@ class StatusActionBar extends ImmutablePureComponent {
         >
           <EmojiSelector
             onReact={this.handleReactClick}
-            visible={emojiSelectorVisible}
+            visible={features.emojiReacts && emojiSelectorVisible}
             focused={emojiSelectorFocused}
             onUnfocus={handleEmojiSelectorUnfocus}
           />
@@ -456,11 +468,13 @@ class StatusActionBar extends ImmutablePureComponent {
 const mapStateToProps = state => {
   const me = state.get('me');
   const account = state.getIn(['accounts', me]);
+  const instance = state.get('instance');
 
   return {
     me,
     isStaff: account ? isStaff(account) : false,
     isAdmin: account ? isAdmin(account) : false,
+    features: getFeatures(instance),
   };
 };