cleanup frontend emoji reaction code

app/javascript/flavours/glitch/actions/interactions.js

@@ -41,15 +41,15 @@ export const UNBOOKMARK_REQUEST = 'UNBOOKMARKED_REQUEST';
 export const UNBOOKMARK_SUCCESS = 'UNBOOKMARKED_SUCCESS';
 export const UNBOOKMARK_FAIL    = 'UNBOOKMARKED_FAIL';
 
-export const STATUS_REACTION_UPDATE = 'STATUS_REACTION_UPDATE';
+export const REACTION_UPDATE = 'REACTION_UPDATE';
 
-export const STATUS_REACTION_ADD_REQUEST = 'STATUS_REACTION_ADD_REQUEST';
-export const STATUS_REACTION_ADD_SUCCESS = 'STATUS_REACTION_ADD_SUCCESS';
-export const STATUS_REACTION_ADD_FAIL    = 'STATUS_REACTION_ADD_FAIL';
+export const REACTION_ADD_REQUEST = 'REACTION_ADD_REQUEST';
+export const REACTION_ADD_SUCCESS = 'REACTION_ADD_SUCCESS';
+export const REACTION_ADD_FAIL    = 'REACTION_ADD_FAIL';
 
-export const STATUS_REACTION_REMOVE_REQUEST = 'STATUS_REACTION_REMOVE_REQUEST';
-export const STATUS_REACTION_REMOVE_SUCCESS = 'STATUS_REACTION_REMOVE_SUCCESS';
-export const STATUS_REACTION_REMOVE_FAIL    = 'STATUS_REACTION_REMOVE_FAIL';
+export const REACTION_REMOVE_REQUEST = 'REACTION_REMOVE_REQUEST';
+export const REACTION_REMOVE_SUCCESS = 'REACTION_REMOVE_SUCCESS';
+export const REACTION_REMOVE_FAIL    = 'REACTION_REMOVE_FAIL';
 
 export function reblog(status, visibility) {
   return function (dispatch, getState) {
@@ -403,7 +403,7 @@ export function unpinFail(status, error) {
   };
 };
 
-export const statusAddReaction = (statusId, name) => (dispatch, getState) => {
+export const addReaction = (statusId, name) => (dispatch, getState) => {
   const status = getState().get('statuses').get(statusId);
   let alreadyAdded = false;
   if (status) {
@@ -413,66 +413,66 @@ export const statusAddReaction = (statusId, name) => (dispatch, getState) => {
     }
   }
   if (!alreadyAdded) {
-    dispatch(statusAddReactionRequest(statusId, name, alreadyAdded));
+    dispatch(addReactionRequest(statusId, name, alreadyAdded));
   }
 
   api(getState).put(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
-    dispatch(statusAddReactionSuccess(statusId, name, alreadyAdded));
+    dispatch(addReactionSuccess(statusId, name, alreadyAdded));
   }).catch(err => {
     if (!alreadyAdded) {
-      dispatch(statusAddReactionFail(statusId, name, err));
+      dispatch(addReactionFail(statusId, name, err));
     }
   });
 };
 
-export const statusAddReactionRequest = (statusId, name) => ({
-  type: STATUS_REACTION_ADD_REQUEST,
+export const addReactionRequest = (statusId, name) => ({
+  type: REACTION_ADD_REQUEST,
   id: statusId,
   name,
   skipLoading: true,
 });
 
-export const statusAddReactionSuccess = (statusId, name) => ({
-  type: STATUS_REACTION_ADD_SUCCESS,
+export const addReactionSuccess = (statusId, name) => ({
+  type: REACTION_ADD_SUCCESS,
   id: statusId,
   name,
   skipLoading: true,
 });
 
-export const statusAddReactionFail = (statusId, name, error) => ({
-  type: STATUS_REACTION_ADD_FAIL,
+export const addReactionFail = (statusId, name, error) => ({
+  type: REACTION_ADD_FAIL,
   id: statusId,
   name,
   error,
   skipLoading: true,
 });
 
-export const statusRemoveReaction = (statusId, name) => (dispatch, getState) => {
-  dispatch(statusRemoveReactionRequest(statusId, name));
+export const removeReaction = (statusId, name) => (dispatch, getState) => {
+  dispatch(removeReactionRequest(statusId, name));
 
   api(getState).delete(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
-    dispatch(statusRemoveReactionSuccess(statusId, name));
+    dispatch(removeReactionSuccess(statusId, name));
   }).catch(err => {
-    dispatch(statusRemoveReactionFail(statusId, name, err));
+    dispatch(removeReactionFail(statusId, name, err));
   });
 };
 
-export const statusRemoveReactionRequest = (statusId, name) => ({
-  type: STATUS_REACTION_REMOVE_REQUEST,
+export const removeReactionRequest = (statusId, name) => ({
+  type: REACTION_REMOVE_REQUEST,
   id: statusId,
   name,
   skipLoading: true,
 });
 
-export const statusRemoveReactionSuccess = (statusId, name) => ({
-  type: STATUS_REACTION_REMOVE_SUCCESS,
+export const removeReactionSuccess = (statusId, name) => ({
+  type: REACTION_REMOVE_SUCCESS,
   id: statusId,
   name,
   skipLoading: true,
 });
 
-export const statusRemoveReactionFail = (statusId, name) => ({
-  type: STATUS_REACTION_REMOVE_FAIL,
+export const removeReactionFail = (statusId, name) => ({
+  type: REACTION_REMOVE_FAIL,
   id: statusId,
   name,
   skipLoading: true,

app/javascript/flavours/glitch/components/status.js

@@ -6,7 +6,7 @@ import StatusHeader from './status_header';
 import StatusIcons from './status_icons';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
-import StatusReactionsBar from './status_reactions_bar';
+import StatusReactions from './status_reactions';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -805,7 +805,7 @@ class Status extends ImmutablePureComponent {
             rewriteMentions={settings.get('rewrite_mentions')}
           />
 
-          <StatusReactionsBar
+          <StatusReactions
             statusId={status.get('id')}
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}

app/javascript/flavours/glitch/components/status_action_bar.js

@@ -59,6 +59,7 @@ class StatusActionBar extends ImmutablePureComponent {
     status: ImmutablePropTypes.map.isRequired,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
+    onReactionAdd: PropTypes.func,
     onReblog: PropTypes.func,
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,

app/javascript/flavours/glitch/components/status_reactions.js

@@ -11,7 +11,7 @@ import AnimatedNumber from './animated_number';
 import { assetHost } from '../utils/config';
 import { autoPlayGif } from '../initial_state';
 
-export default class StatusReactionsBar extends ImmutablePureComponent {
+export default class StatusReactions extends ImmutablePureComponent {
 
   static propTypes = {
     statusId: PropTypes.string.isRequired,

app/javascript/flavours/glitch/containers/status_container.js

@@ -15,8 +15,8 @@ import {
   unbookmark,
   pin,
   unpin,
-  statusAddReaction,
-  statusRemoveReaction,
+  addReaction,
+  removeReaction,
 } from 'flavours/glitch/actions/interactions';
 import {
   muteStatus,
@@ -45,7 +45,7 @@ import { showAlertForError } from '../actions/alerts';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import Spoilers from '../components/spoilers';
 import Icon from 'flavours/glitch/components/icon';
-import buildCustomEmojiMap from '../utils/emoji_map';
+import { makeCustomEmojiMap } from '../selectors';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -85,7 +85,7 @@ const makeMapStateToProps = () => {
       account: account || props.account,
       settings: state.get('local_settings'),
       prepend: prepend || props.prepend,
-      emojiMap: buildCustomEmojiMap(state),
+      emojiMap: makeCustomEmojiMap(state),
 
       pictureInPicture: {
         inUse: state.getIn(['meta', 'layout']) !== 'mobile' && state.get('picture_in_picture').statusId === props.id,
@@ -170,11 +170,11 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   onReactionAdd (statusId, name) {
-    dispatch(statusAddReaction(statusId, name));
+    dispatch(addReaction(statusId, name));
   },
 
   onReactionRemove (statusId, name) {
-    dispatch(statusRemoveReaction(statusId, name));
+    dispatch(removeReaction(statusId, name));
   },
 
   onEmbed (status) {

app/javascript/flavours/glitch/features/status/components/action_bar.js

@@ -144,7 +144,7 @@ class ActionBar extends React.PureComponent {
     navigator.clipboard.writeText(url);
   }
 
-  nop = () => {}
+  nop = () => {} // hack for reaction add button
 
   render () {
     const { status, intl } = this.props;

app/javascript/flavours/glitch/features/status/components/detailed_status.js

@@ -20,7 +20,7 @@ import Icon from 'flavours/glitch/components/icon';
 import AnimatedNumber from 'flavours/glitch/components/animated_number';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
-import StatusReactionsBar from '../../../components/status_reactions_bar';
+import StatusReactions from '../../../components/status_reactions';
 
 export default @injectIntl
 class DetailedStatus extends ImmutablePureComponent {
@@ -323,7 +323,7 @@ class DetailedStatus extends ImmutablePureComponent {
             disabled
           />
 
-          <StatusReactionsBar
+          <StatusReactions
             statusId={status.get('id')}
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}

app/javascript/flavours/glitch/features/status/index.js

@@ -20,8 +20,8 @@ import {
   unreblog,
   pin,
   unpin,
-  statusAddReaction,
-  statusRemoveReaction,
+  addReaction,
+  removeReaction,
 } from 'flavours/glitch/actions/interactions';
 import {
   replyCompose,
@@ -58,7 +58,7 @@ import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
 import Icon from 'flavours/glitch/components/icon';
 import { Helmet } from 'react-helmet';
-import buildCustomEmojiMap from '../../utils/emoji_map';
+import { makeCustomEmojiMap } from '../../selectors';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -149,7 +149,7 @@ const makeMapStateToProps = () => {
       askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0,
       domain: state.getIn(['meta', 'domain']),
       usingPiP: state.get('picture_in_picture').statusId === props.params.statusId,
-      emojiMap: buildCustomEmojiMap(state),
+      emojiMap: makeCustomEmojiMap(state),
     };
   };
 
@@ -300,7 +300,7 @@ class Status extends ImmutablePureComponent {
     const { signedIn } = this.context.identity;
 
     if (signedIn) {
-      dispatch(statusAddReaction(statusId, name));
+      dispatch(addReaction(statusId, name));
     } else {
       dispatch(openModal('INTERACTION', {
         type: 'reaction_add',
@@ -311,12 +311,7 @@ class Status extends ImmutablePureComponent {
   }
 
   handleReactionRemove = (statusId, name) => {
-    const { dispatch } = this.props;
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      dispatch(statusRemoveReaction(statusId, name));
-    }
+    this.props.dispatch(removeReaction(statusId, name));
   }
 
   handlePin = (status) => {

app/javascript/flavours/glitch/reducers/statuses.js

@@ -6,11 +6,11 @@ import {
   UNFAVOURITE_SUCCESS,
   BOOKMARK_REQUEST,
   BOOKMARK_FAIL,
-  STATUS_REACTION_UPDATE,
-  STATUS_REACTION_ADD_FAIL,
-  STATUS_REACTION_REMOVE_FAIL,
-  STATUS_REACTION_ADD_REQUEST,
-  STATUS_REACTION_REMOVE_REQUEST,
+  REACTION_UPDATE,
+  REACTION_ADD_FAIL,
+  REACTION_REMOVE_FAIL,
+  REACTION_ADD_REQUEST,
+  REACTION_REMOVE_REQUEST,
 } from 'flavours/glitch/actions/interactions';
 import {
   STATUS_MUTE_SUCCESS,
@@ -99,13 +99,13 @@ export default function statuses(state = initialState, action) {
     return state.setIn([action.status.get('id'), 'reblogged'], true);
   case REBLOG_FAIL:
     return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'reblogged'], false);
-  case STATUS_REACTION_UPDATE:
+  case REACTION_UPDATE:
     return updateReactionCount(state, action.reaction);
-  case STATUS_REACTION_ADD_REQUEST:
-  case STATUS_REACTION_REMOVE_FAIL:
+  case REACTION_ADD_REQUEST:
+  case REACTION_REMOVE_FAIL:
     return addReaction(state, action.id, action.name);
-  case STATUS_REACTION_REMOVE_REQUEST:
-  case STATUS_REACTION_ADD_FAIL:
+  case REACTION_REMOVE_REQUEST:
+  case REACTION_ADD_FAIL:
     return removeReaction(state, action.id, action.name);
   case STATUS_MUTE_SUCCESS:
     return state.setIn([action.id, 'muted'], true);

app/javascript/flavours/glitch/selectors/index.js

@@ -1,6 +1,6 @@
 import escapeTextContentForBrowser from 'escape-html';
 import { createSelector } from 'reselect';
-import { List as ImmutableList } from 'immutable';
+import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 import { me } from 'flavours/glitch/initial_state';
 
@@ -127,3 +127,11 @@ export const getAccountHidden = createSelector([
 ], (hidden, followingOrRequested, isSelf) => {
   return hidden && !(isSelf || followingOrRequested);
 });
+
+export const makeCustomEmojiMap = createSelector(
+  [state => state.get('custom_emojis')],
+  items => items.reduce(
+    (map, emoji) => map.set(emoji.get('shortcode'), emoji),
+    ImmutableMap(),
+  ),
+);

app/javascript/flavours/glitch/utils/emoji_map.js

@@ -1,11 +0,0 @@
-import { createSelector } from 'reselect';
-import { Map as ImmutableMap } from 'immutable';
-
-const buildCustomEmojiMap = createSelector(
-  [state => state.get('custom_emojis')],
-  items => items.reduce(
-    (map, emoji) => map.set(emoji.get('shortcode'), emoji),
-    ImmutableMap(),
-  ),
-);
-export default buildCustomEmojiMap;