Refactor simpleEmojiReact, allow inline reactions

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());

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 {
         </div>
         <div className='status__action-bar__counter status__action-bar__counter--favourite'>
           <EmojiSelector onReact={this.handleReactClick} />
-          <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} />
-          {favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span>}
+          <IconButton
+            className='status__action-bar-button star-icon'
+            animate
+            active={Boolean(meEmojiReact)}
+            title={intl.formatMessage(messages.favourite)}
+            icon='thumbs-up'
+            emoji={meEmojiReact}
+            onClick={this.handleReactClick(meEmojiReact || '👍')}
+          />
+          {emojiReactCount !== 0 && <span className='detailed-status__link'>{emojiReactCount}</span>}
         </div>
         {shareButton}
 
@@ -319,6 +346,7 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = (dispatch) => ({
+  dispatch,
   onOpenUnauthorizedModal() {
     dispatch(openModal('UNAUTHORIZED'));
   },

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

@@ -270,11 +270,11 @@ class ActionBar extends React.PureComponent {
           <IconButton
             className='star-icon'
             animate
-            active={meEmojiReact}
+            active={Boolean(meEmojiReact)}
             title={intl.formatMessage(messages.favourite)}
             icon='thumbs-up'
             emoji={meEmojiReact}
-            onClick={this.handleReactClick('👍')}
+            onClick={this.handleReactClick(meEmojiReact || '👍')}
             text='Like'
           />
         </div>

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() {

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) => {