From f129b47f1388bd5efbdb1dfc6c4a7719ffc6a76f 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.js | 4 +- .../glitch/components/status_action_bar.js | 1 + ...s_reactions_bar.js => status_reactions.js} | 2 +- .../glitch/containers/status_container.js | 12 ++--- .../features/status/components/action_bar.js | 2 +- .../status/components/detailed_status.js | 4 +- .../flavours/glitch/features/status/index.js | 17 +++--- .../flavours/glitch/reducers/statuses.js | 20 +++---- .../flavours/glitch/selectors/index.js | 10 +++- .../flavours/glitch/utils/emoji_map.js | 11 ---- 11 files changed, 65 insertions(+), 72 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 ab275621c2..f65d7ec490 100644 --- a/app/javascript/flavours/glitch/actions/interactions.js +++ b/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, diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 05fecdb968..70c1a99910 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/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')} /> - { 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) { diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js index bd8c0d0cf4..f93e3d0a3d 100644 --- a/app/javascript/flavours/glitch/features/status/components/action_bar.js +++ b/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; diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index b2f38ff1ff..68e199e9c3 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/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 /> - { 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) => { diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js index 605238bc29..22fdeb2841 100644 --- a/app/javascript/flavours/glitch/reducers/statuses.js +++ b/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); diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index df46b58a8e..ab7ac248b7 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/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(), + ), +); 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;