From 622e384aa46a104b297bdffe72fb710e9f9ff75f Mon Sep 17 00:00:00 2001 From: fef Date: Tue, 29 Nov 2022 08:54:35 +0000 Subject: [PATCH] cleanup frontend emoji reaction code --- .../flavours/glitch/actions/interactions.js | 54 +++++++++---------- .../flavours/glitch/components/status.jsx | 4 +- .../glitch/components/status_action_bar.jsx | 1 + ...s_reactions_bar.js => status_reactions.js} | 2 +- .../glitch/containers/status_container.js | 12 ++--- .../features/status/components/action_bar.jsx | 2 +- .../status/components/detailed_status.jsx | 4 +- .../flavours/glitch/features/status/index.jsx | 17 +++--- .../flavours/glitch/reducers/statuses.js | 20 +++---- .../flavours/glitch/selectors/index.js | 8 +++ .../flavours/glitch/utils/emoji_map.js | 11 ---- 11 files changed, 64 insertions(+), 71 deletions(-) rename app/javascript/flavours/glitch/components/{status_reactions_bar.js => status_reactions.js} (98%) delete mode 100644 app/javascript/flavours/glitch/utils/emoji_map.js diff --git a/app/javascript/flavours/glitch/actions/interactions.js b/app/javascript/flavours/glitch/actions/interactions.js index 51d8b5e5d4..1607231a3b 100644 --- a/app/javascript/flavours/glitch/actions/interactions.js +++ b/app/javascript/flavours/glitch/actions/interactions.js @@ -42,15 +42,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) { @@ -404,7 +404,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) { @@ -414,66 +414,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, diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index 53b5922b30..5e612499ac 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -25,7 +25,7 @@ import StatusContent from './status_content'; import StatusHeader from './status_header'; import StatusIcons from './status_icons'; import StatusPrepend from './status_prepend'; -import StatusReactionsBar from './status_reactions_bar'; +import StatusReactions from './status_reactions'; const domParser = new DOMParser(); @@ -837,7 +837,7 @@ class Status extends ImmutablePureComponent { rewriteMentions={settings.get('rewrite_mentions')} /> - { account: account || props.account, settings: state.get('local_settings'), prepend: prepend || props.prepend, - emojiMap: buildCustomEmojiMap(state), + emojiMap: makeCustomEmojiMap(state), pictureInPicture: getPictureInPicture(state, props), }; }; @@ -181,11 +181,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) { diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx index aa8b6e5151..71dd5da10a 100644 --- a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx +++ b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx @@ -147,7 +147,7 @@ class ActionBar extends PureComponent { navigator.clipboard.writeText(url); }; - nop = () => {} + nop = () => {} // hack for reaction add button render () { const { status, intl } = this.props; diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx index 00c11d6fa8..e492bce912 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx @@ -17,7 +17,7 @@ import { Icon } from 'flavours/glitch/components/icon'; import MediaGallery from 'flavours/glitch/components/media_gallery'; import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder'; import StatusContent from 'flavours/glitch/components/status_content'; -import StatusReactionsBar from '../../../components/status_reactions_bar'; +import StatusReactions from '../../../components/status_reactions'; import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon'; import PollContainer from 'flavours/glitch/containers/poll_container'; import Audio from 'flavours/glitch/features/audio'; @@ -333,7 +333,7 @@ class DetailedStatus extends ImmutablePureComponent { disabled /> - { askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0, domain: state.getIn(['meta', 'domain']), pictureInPicture: getPictureInPicture(state, { id: props.params.statusId }), - emojiMap: buildCustomEmojiMap(state), + emojiMap: makeCustomEmojiMap(state), }; }; @@ -321,7 +321,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', @@ -332,12 +332,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) => { diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js index c06affa70c..9aad63ed1f 100644 --- a/app/javascript/flavours/glitch/reducers/statuses.js +++ b/app/javascript/flavours/glitch/reducers/statuses.js @@ -8,11 +8,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, @@ -123,13 +123,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); diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index a296ef8ede..93db92e855 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/app/javascript/flavours/glitch/selectors/index.js @@ -141,3 +141,11 @@ export const getAccountHidden = createSelector([ export const getStatusList = createSelector([ (state, type) => state.getIn(['status_lists', type, 'items']), ], (items) => items.toList()); + +export const makeCustomEmojiMap = createSelector( + [state => state.get('custom_emojis')], + items => items.reduce( + (map, emoji) => map.set(emoji.get('shortcode'), emoji), + ImmutableMap(), + ), +); diff --git a/app/javascript/flavours/glitch/utils/emoji_map.js b/app/javascript/flavours/glitch/utils/emoji_map.js deleted file mode 100644 index 1bf36d0fd2..0000000000 --- a/app/javascript/flavours/glitch/utils/emoji_map.js +++ /dev/null @@ -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;