diff --git a/app/gabsocial/actions/emoji_reacts.js b/app/gabsocial/actions/emoji_reacts.js index 3443165d2..9f36e8a21 100644 --- a/app/gabsocial/actions/emoji_reacts.js +++ b/app/gabsocial/actions/emoji_reacts.js @@ -1,5 +1,6 @@ import api from '../api'; import { importFetchedAccounts, importFetchedStatus } from './importer'; +import { favourite, unfavourite } from './interactions'; export const EMOJI_REACT_REQUEST = 'EMOJI_REACT_REQUEST'; export const EMOJI_REACT_SUCCESS = 'EMOJI_REACT_SUCCESS'; @@ -15,6 +16,32 @@ export const EMOJI_REACTS_FETCH_FAIL = 'EMOJI_REACTS_FETCH_FAIL'; const noOp = () => () => new Promise(f => f()); +export const simpleEmojiReact = (status, emoji) => { + return (dispatch, getState) => { + const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']); + + if (emoji === '👍' && status.get('favourited')) return dispatch(unfavourite(status)); + + const undo = emojiReacts.filter(e => e.get('me') === true && e.get('name') === emoji).count() > 0; + if (undo) return dispatch(unEmojiReact(status, emoji)); + + return Promise.all( + emojiReacts + .filter(emojiReact => emojiReact.get('me') === true) + .map(emojiReact => dispatch(unEmojiReact(status, emojiReact.get('name')))), + status.get('favourited') && dispatch(unfavourite(status)) + ).then(() => { + if (emoji === '👍') { + dispatch(favourite(status)); + } else { + dispatch(emojiReact(status, emoji)); + } + }).catch(err => { + console.error(err); + }); + }; +}; + export function fetchEmojiReacts(id, emoji) { return (dispatch, getState) => { if (!getState().get('me')) return dispatch(noOp()); diff --git a/app/gabsocial/components/status_action_bar.js b/app/gabsocial/components/status_action_bar.js index cbb2f413e..55ac94d6a 100644 --- a/app/gabsocial/components/status_action_bar.js +++ b/app/gabsocial/components/status_action_bar.js @@ -12,6 +12,8 @@ import { isStaff } from 'gabsocial/utils/accounts'; import { openModal } from '../actions/modal'; import { Link } from 'react-router-dom'; import EmojiSelector from 'gabsocial/components/emoji_selector'; +import { getReactForStatus, reduceEmoji } from 'gabsocial/utils/emoji_reacts'; +import { simpleEmojiReact } from 'gabsocial/actions/emoji_reacts'; const messages = defineMessages({ delete: { id: 'status.delete', defaultMessage: 'Delete' }, @@ -100,6 +102,17 @@ class StatusActionBar extends ImmutablePureComponent { }); } + handleReactClick = emoji => { + return e => { + const { me, status } = this.props; + if (me) { + this.props.dispatch(simpleEmojiReact(status, emoji)); + } else { + this.props.onOpenUnauthorizedModal(); + } + }; + } + handleFavouriteClick = () => { const { me } = this.props; if (me) { @@ -255,11 +268,17 @@ class StatusActionBar extends ImmutablePureComponent { render() { const { status, intl } = this.props; - const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); + const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); const replyCount = status.get('replies_count'); const reblogCount = status.get('reblogs_count'); - const favoriteCount = status.get('favourites_count'); + const favouriteCount = status.get('favourites_count'); + const emojiReactCount = reduceEmoji( + status.getIn(['pleroma', 'emoji_reactions'], []), + favouriteCount, + status.get('favourited'), + ).reduce((acc, cur) => acc + cur.get('count'), 0); + const meEmojiReact = getReactForStatus(status); let menu = this._makeMenu(publicStatus); let reblogIcon = 'retweet'; @@ -296,8 +315,16 @@ class StatusActionBar extends ImmutablePureComponent {
- - {favoriteCount !== 0 && {favoriteCount}} + + {emojiReactCount !== 0 && {emojiReactCount}}
{shareButton} @@ -319,6 +346,7 @@ const mapStateToProps = state => { }; const mapDispatchToProps = (dispatch) => ({ + dispatch, onOpenUnauthorizedModal() { dispatch(openModal('UNAUTHORIZED')); }, diff --git a/app/gabsocial/features/status/components/action_bar.js b/app/gabsocial/features/status/components/action_bar.js index d1f9fa333..a1690fed1 100644 --- a/app/gabsocial/features/status/components/action_bar.js +++ b/app/gabsocial/features/status/components/action_bar.js @@ -270,11 +270,11 @@ class ActionBar extends React.PureComponent { diff --git a/app/gabsocial/features/status/components/status_interaction_bar.js b/app/gabsocial/features/status/components/status_interaction_bar.js index 711fcf493..4746dd692 100644 --- a/app/gabsocial/features/status/components/status_interaction_bar.js +++ b/app/gabsocial/features/status/components/status_interaction_bar.js @@ -12,10 +12,12 @@ export class StatusInteractionBar extends React.Component { } getNormalizedReacts = () => { - const { status, me } = this.props; - const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']); - const favouritesCount = status.get('favourites_count'); - return reduceEmoji(emojiReacts, favouritesCount, me).reverse(); + const { status } = this.props; + return reduceEmoji( + status.getIn(['pleroma', 'emoji_reactions']), + status.get('favourites_count'), + status.get('favourited'), + ).reverse(); } render() { diff --git a/app/gabsocial/features/status/index.js b/app/gabsocial/features/status/index.js index 9861cee3b..12527613b 100644 --- a/app/gabsocial/features/status/index.js +++ b/app/gabsocial/features/status/index.js @@ -17,7 +17,7 @@ import { pin, unpin, } from '../../actions/interactions'; -import { emojiReact, unEmojiReact } from '../../actions/emoji_reacts'; +import { simpleEmojiReact } from '../../actions/emoji_reacts'; import { replyCompose, mentionCompose, @@ -163,28 +163,7 @@ class Status extends ImmutablePureComponent { } handleEmojiReactClick = (status, emoji) => { - const { dispatch } = this.props; - const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']); - - if (emoji === '👍' && status.get('favourited')) return dispatch(unfavourite(status)); - - const undo = emojiReacts.filter(e => e.get('me') === true && e.get('name') === emoji).count() > 0; - if (undo) return dispatch(unEmojiReact(status, emoji)); - - return Promise.all( - emojiReacts - .filter(emojiReact => emojiReact.get('me') === true) - .map(emojiReact => dispatch(unEmojiReact(status, emojiReact.get('name')))), - status.get('favourited') && dispatch(unfavourite(status)) - ).then(() => { - if (emoji === '👍') { - dispatch(favourite(status)); - } else { - dispatch(emojiReact(status, emoji)); - } - }).catch(err => { - console.error(err); - }); + this.props.dispatch(simpleEmojiReact(status, emoji)); } handleFavouriteClick = (status) => {