From e5e15fc3f08a67dc936b7b4d133c0d6b3fff3bab Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 20 Aug 2021 16:12:52 -0500 Subject: [PATCH] Mastodon: conditionally render emojiReacts --- app/soapbox/actions/emoji_reacts.js | 3 ++- app/soapbox/components/status_action_bar.js | 24 +++++++++++++++---- .../features/status/components/action_bar.js | 24 +++++++++++++++---- 3 files changed, 40 insertions(+), 11 deletions(-) diff --git a/app/soapbox/actions/emoji_reacts.js b/app/soapbox/actions/emoji_reacts.js index c3e6b63f4..8ed43b8ed 100644 --- a/app/soapbox/actions/emoji_reacts.js +++ b/app/soapbox/actions/emoji_reacts.js @@ -2,6 +2,7 @@ import api from '../api'; import { importFetchedAccounts, importFetchedStatus } from './importer'; import { favourite, unfavourite } from './interactions'; import { isLoggedIn } from 'soapbox/utils/auth'; +import { List as ImmutableList } from 'immutable'; export const EMOJI_REACT_REQUEST = 'EMOJI_REACT_REQUEST'; export const EMOJI_REACT_SUCCESS = 'EMOJI_REACT_SUCCESS'; @@ -19,7 +20,7 @@ const noOp = () => () => new Promise(f => f()); export const simpleEmojiReact = (status, emoji) => { return (dispatch, getState) => { - const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']); + const emojiReacts = status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()); if (emoji === '👍' && status.get('favourited')) return dispatch(unfavourite(status)); diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js index fa4fd993e..b7ee34aae 100644 --- a/app/soapbox/components/status_action_bar.js +++ b/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 { > @@ -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), }; }; diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js index b435c77a4..332108133 100644 --- a/app/soapbox/features/status/components/action_bar.js +++ b/app/soapbox/features/status/components/action_bar.js @@ -11,6 +11,7 @@ import { isStaff, isAdmin } from 'soapbox/utils/accounts'; import { isUserTouching } from 'soapbox/is_mobile'; import EmojiSelector from 'soapbox/components/emoji_selector'; import { getReactForStatus } from 'soapbox/utils/emoji_reacts'; +import { getFeatures } from 'soapbox/utils/features'; const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, @@ -54,11 +55,13 @@ const messages = defineMessages({ 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), }; }; @@ -103,6 +106,7 @@ class ActionBar extends React.PureComponent { emojiSelectorFocused: PropTypes.bool, handleEmojiSelectorExpand: PropTypes.func.isRequired, handleEmojiSelectorUnfocus: PropTypes.func.isRequired, + features: PropTypes.object.isRequired, }; static defaultProps = { @@ -146,16 +150,26 @@ class ActionBar extends React.PureComponent { } handleLikeButtonHover = e => { - if (!isUserTouching()) this.setState({ emojiSelectorVisible: true }); + const { features } = this.props; + + if (features.emojiReacts && !isUserTouching()) { + this.setState({ emojiSelectorVisible: true }); + } } handleLikeButtonLeave = e => { - if (!isUserTouching()) this.setState({ emojiSelectorVisible: false }); + const { features } = this.props; + + if (features.emojiReacts && !isUserTouching()) { + this.setState({ emojiSelectorVisible: false }); + } } handleLikeButtonClick = e => { + const { features } = this.props; const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍'; - if (isUserTouching()) { + + if (features.emojiReacts && isUserTouching()) { if (this.state.emojiSelectorVisible) { this.handleReactClick(meEmojiReact)(); } else { @@ -278,7 +292,7 @@ class ActionBar extends React.PureComponent { } render() { - const { status, intl, me, isStaff, isAdmin, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorExpand, handleEmojiSelectorUnfocus } = this.props; + const { status, intl, me, isStaff, isAdmin, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorExpand, handleEmojiSelectorUnfocus, features } = this.props; const { emojiSelectorVisible } = this.state; const ownAccount = status.getIn(['account', 'id']) === me; @@ -391,7 +405,7 @@ class ActionBar extends React.PureComponent { >