queer-af/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

cleanup frontend emoji reaction code

Browse source
This commit is contained in:
fef 2022-11-29 08:54:35 +00:00 committed by neatchee
parent a88d98f7d7
commit aa6abec827
11 changed files with 64 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/javascript/flavours/glitch/actions/interactions.js
View file

@ -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,

4
app/javascript/flavours/glitch/components/status.js
View file

@ -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}

1
app/javascript/flavours/glitch/components/status_action_bar.js
View file

@ -60,6 +60,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,

2
app/javascript/flavours/glitch/components/status_reactions_bar.js → app/javascript/flavours/glitch/components/status_reactions.js
View file

@ -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,

12
app/javascript/flavours/glitch/containers/status_container.js
View file

@ -16,8 +16,8 @@ import {
unbookmark,
pin,
unpin,
statusAddReaction,
statusRemoveReaction,
addReaction,
removeReaction,
} from 'flavours/glitch/actions/interactions';
import {
muteStatus,
@ -46,7 +46,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' },
@ -87,7 +87,7 @@ const makeMapStateToProps = () => {
account: account || props.account,
settings: state.get('local_settings'),
prepend: prepend || props.prepend,
emojiMap: buildCustomEmojiMap(state),
emojiMap: makeCustomEmojiMap(state),
pictureInPicture: getPictureInPicture(state, props),
};
};
@ -168,11 +168,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) {

2
app/javascript/flavours/glitch/features/status/components/action_bar.js
View file

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

4
app/javascript/flavours/glitch/features/status/components/detailed_status.js
View file

@ -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 {
@ -326,7 +326,7 @@ class DetailedStatus extends ImmutablePureComponent {
disabled
/>
<StatusReactionsBar
<StatusReactions
statusId={status.get('id')}
reactions={status.get('reactions')}
addReaction={this.props.onReactionAdd}

17
app/javascript/flavours/glitch/features/status/index.js
View file

@ -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' },
@ -151,7 +151,7 @@ const makeMapStateToProps = () => {
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),
};
};
@ -305,7 +305,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',
@ -316,12 +316,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) => {

20
app/javascript/flavours/glitch/reducers/statuses.js
View file

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

8
app/javascript/flavours/glitch/selectors/index.js
View file

@ -137,3 +137,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(),
),
);

11
app/javascript/flavours/glitch/utils/emoji_map.js
View file

@ -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;