mirrors/nyastodon
1
0
Fork 0
mirror of https://git.bsd.gay/fef/nyastodon.git synced 2024-12-29 13:43:41 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

cleanup frontend emoji reaction code

Browse source
This commit is contained in:
fef 2022-11-29 08:54:35 +00:00
parent 89a8c21f80
commit f129b47f13
No known key found for this signature in database
GPG key ID: EC22E476DC2D3D84
11 changed files with 65 additions and 72 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_SUCCESS = 'UNBOOKMARKED_SUCCESS';
export const UNBOOKMARK_FAIL = 'UNBOOKMARKED_FAIL'; 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 REACTION_ADD_REQUEST = 'REACTION_ADD_REQUEST';
export const STATUS_REACTION_ADD_SUCCESS = 'STATUS_REACTION_ADD_SUCCESS'; export const REACTION_ADD_SUCCESS = 'REACTION_ADD_SUCCESS';
export const STATUS_REACTION_ADD_FAIL = 'STATUS_REACTION_ADD_FAIL'; export const REACTION_ADD_FAIL = 'REACTION_ADD_FAIL';
export const STATUS_REACTION_REMOVE_REQUEST = 'STATUS_REACTION_REMOVE_REQUEST'; export const REACTION_REMOVE_REQUEST = 'REACTION_REMOVE_REQUEST';
export const STATUS_REACTION_REMOVE_SUCCESS = 'STATUS_REACTION_REMOVE_SUCCESS'; export const REACTION_REMOVE_SUCCESS = 'REACTION_REMOVE_SUCCESS';
export const STATUS_REACTION_REMOVE_FAIL = 'STATUS_REACTION_REMOVE_FAIL'; export const REACTION_REMOVE_FAIL = 'REACTION_REMOVE_FAIL';
export function reblog(status, visibility) { export function reblog(status, visibility) {
return function (dispatch, getState) { 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); const status = getState().get('statuses').get(statusId);
let alreadyAdded = false; let alreadyAdded = false;
if (status) { if (status) {
@ -413,66 +413,66 @@ export const statusAddReaction = (statusId, name) => (dispatch, getState) => {
} }
} }
if (!alreadyAdded) { if (!alreadyAdded) {
dispatch(statusAddReactionRequest(statusId, name, alreadyAdded)); dispatch(addReactionRequest(statusId, name, alreadyAdded));
} }
api(getState).put(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => { api(getState).put(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
dispatch(statusAddReactionSuccess(statusId, name, alreadyAdded)); dispatch(addReactionSuccess(statusId, name, alreadyAdded));
}).catch(err => { }).catch(err => {
if (!alreadyAdded) { if (!alreadyAdded) {
dispatch(statusAddReactionFail(statusId, name, err)); dispatch(addReactionFail(statusId, name, err));
} }
}); });
}; };
export const statusAddReactionRequest = (statusId, name) => ({ export const addReactionRequest = (statusId, name) => ({
type: STATUS_REACTION_ADD_REQUEST, type: REACTION_ADD_REQUEST,
id: statusId, id: statusId,
name, name,
skipLoading: true, skipLoading: true,
}); });
export const statusAddReactionSuccess = (statusId, name) => ({ export const addReactionSuccess = (statusId, name) => ({
type: STATUS_REACTION_ADD_SUCCESS, type: REACTION_ADD_SUCCESS,
id: statusId, id: statusId,
name, name,
skipLoading: true, skipLoading: true,
}); });
export const statusAddReactionFail = (statusId, name, error) => ({ export const addReactionFail = (statusId, name, error) => ({
type: STATUS_REACTION_ADD_FAIL, type: REACTION_ADD_FAIL,
id: statusId, id: statusId,
name, name,
error, error,
skipLoading: true, skipLoading: true,
}); });
export const statusRemoveReaction = (statusId, name) => (dispatch, getState) => { export const removeReaction = (statusId, name) => (dispatch, getState) => {
dispatch(statusRemoveReactionRequest(statusId, name)); dispatch(removeReactionRequest(statusId, name));
api(getState).delete(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => { api(getState).delete(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
dispatch(statusRemoveReactionSuccess(statusId, name)); dispatch(removeReactionSuccess(statusId, name));
}).catch(err => { }).catch(err => {
dispatch(statusRemoveReactionFail(statusId, name, err)); dispatch(removeReactionFail(statusId, name, err));
}); });
}; };
export const statusRemoveReactionRequest = (statusId, name) => ({ export const removeReactionRequest = (statusId, name) => ({
type: STATUS_REACTION_REMOVE_REQUEST, type: REACTION_REMOVE_REQUEST,
id: statusId, id: statusId,
name, name,
skipLoading: true, skipLoading: true,
}); });
export const statusRemoveReactionSuccess = (statusId, name) => ({ export const removeReactionSuccess = (statusId, name) => ({
type: STATUS_REACTION_REMOVE_SUCCESS, type: REACTION_REMOVE_SUCCESS,
id: statusId, id: statusId,
name, name,
skipLoading: true, skipLoading: true,
}); });
export const statusRemoveReactionFail = (statusId, name) => ({ export const removeReactionFail = (statusId, name) => ({
type: STATUS_REACTION_REMOVE_FAIL, type: REACTION_REMOVE_FAIL,
id: statusId, id: statusId,
name, name,
skipLoading: true, 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 StatusIcons from './status_icons';
import StatusContent from './status_content'; import StatusContent from './status_content';
import StatusActionBar from './status_action_bar'; import StatusActionBar from './status_action_bar';
import StatusReactionsBar from './status_reactions_bar'; import StatusReactions from './status_reactions';
import AttachmentList from './attachment_list'; import AttachmentList from './attachment_list';
import Card from '../features/status/components/card'; import Card from '../features/status/components/card';
import { injectIntl, FormattedMessage } from 'react-intl'; import { injectIntl, FormattedMessage } from 'react-intl';
@ -805,7 +805,7 @@ class Status extends ImmutablePureComponent {
rewriteMentions={settings.get('rewrite_mentions')} rewriteMentions={settings.get('rewrite_mentions')}
/> />
<StatusReactionsBar <StatusReactions
statusId={status.get('id')} statusId={status.get('id')}
reactions={status.get('reactions')} reactions={status.get('reactions')}
addReaction={this.props.onReactionAdd} addReaction={this.props.onReactionAdd}

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

@ -59,6 +59,7 @@ class StatusActionBar extends ImmutablePureComponent {
status: ImmutablePropTypes.map.isRequired, status: ImmutablePropTypes.map.isRequired,
onReply: PropTypes.func, onReply: PropTypes.func,
onFavourite: PropTypes.func, onFavourite: PropTypes.func,
onReactionAdd: PropTypes.func,
onReblog: PropTypes.func, onReblog: PropTypes.func,
onDelete: PropTypes.func, onDelete: PropTypes.func,
onDirect: 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 { assetHost } from '../utils/config';
import { autoPlayGif } from '../initial_state'; import { autoPlayGif } from '../initial_state';
export default class StatusReactionsBar extends ImmutablePureComponent { export default class StatusReactions extends ImmutablePureComponent {
static propTypes = { static propTypes = {
statusId: PropTypes.string.isRequired, statusId: PropTypes.string.isRequired,

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

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

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

@ -144,7 +144,7 @@ class ActionBar extends React.PureComponent {
navigator.clipboard.writeText(url); navigator.clipboard.writeText(url);
} }
nop = () => {} nop = () => {} // hack for reaction add button
render () { render () {
const { status, intl } = this.props; 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 AnimatedNumber from 'flavours/glitch/components/animated_number';
import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder'; import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
import EditedTimestamp from 'flavours/glitch/components/edited_timestamp'; import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
import StatusReactionsBar from '../../../components/status_reactions_bar'; import StatusReactions from '../../../components/status_reactions';
export default @injectIntl export default @injectIntl
class DetailedStatus extends ImmutablePureComponent { class DetailedStatus extends ImmutablePureComponent {
@ -323,7 +323,7 @@ class DetailedStatus extends ImmutablePureComponent {
disabled disabled
/> />
<StatusReactionsBar <StatusReactions
statusId={status.get('id')} statusId={status.get('id')}
reactions={status.get('reactions')} reactions={status.get('reactions')}
addReaction={this.props.onReactionAdd} addReaction={this.props.onReactionAdd}

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

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

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

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

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

@ -1,6 +1,6 @@
import escapeTextContentForBrowser from 'escape-html'; import escapeTextContentForBrowser from 'escape-html';
import { createSelector } from 'reselect'; 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 { toServerSideType } from 'flavours/glitch/utils/filters';
import { me } from 'flavours/glitch/initial_state'; import { me } from 'flavours/glitch/initial_state';
@ -127,3 +127,11 @@ export const getAccountHidden = createSelector([
], (hidden, followingOrRequested, isSelf) => { ], (hidden, followingOrRequested, isSelf) => {
return hidden && !(isSelf || followingOrRequested); 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;