sforkowany z mirror/soapbox
Refactor simpleEmojiReact, allow inline reactions
rodzic
850d9a1007
commit
b13e8bdd96
|
@ -1,5 +1,6 @@
|
|||
import api from '../api';
|
||||
import { importFetchedAccounts, importFetchedStatus } from './importer';
|
||||
import { favourite, unfavourite } from './interactions';
|
||||
|
||||
export const EMOJI_REACT_REQUEST = 'EMOJI_REACT_REQUEST';
|
||||
export const EMOJI_REACT_SUCCESS = 'EMOJI_REACT_SUCCESS';
|
||||
|
@ -15,6 +16,32 @@ export const EMOJI_REACTS_FETCH_FAIL = 'EMOJI_REACTS_FETCH_FAIL';
|
|||
|
||||
const noOp = () => () => new Promise(f => f());
|
||||
|
||||
export const simpleEmojiReact = (status, emoji) => {
|
||||
return (dispatch, getState) => {
|
||||
const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']);
|
||||
|
||||
if (emoji === '👍' && status.get('favourited')) return dispatch(unfavourite(status));
|
||||
|
||||
const undo = emojiReacts.filter(e => e.get('me') === true && e.get('name') === emoji).count() > 0;
|
||||
if (undo) return dispatch(unEmojiReact(status, emoji));
|
||||
|
||||
return Promise.all(
|
||||
emojiReacts
|
||||
.filter(emojiReact => emojiReact.get('me') === true)
|
||||
.map(emojiReact => dispatch(unEmojiReact(status, emojiReact.get('name')))),
|
||||
status.get('favourited') && dispatch(unfavourite(status))
|
||||
).then(() => {
|
||||
if (emoji === '👍') {
|
||||
dispatch(favourite(status));
|
||||
} else {
|
||||
dispatch(emojiReact(status, emoji));
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchEmojiReacts(id, emoji) {
|
||||
return (dispatch, getState) => {
|
||||
if (!getState().get('me')) return dispatch(noOp());
|
||||
|
|
|
@ -12,6 +12,8 @@ import { isStaff } from 'gabsocial/utils/accounts';
|
|||
import { openModal } from '../actions/modal';
|
||||
import { Link } from 'react-router-dom';
|
||||
import EmojiSelector from 'gabsocial/components/emoji_selector';
|
||||
import { getReactForStatus, reduceEmoji } from 'gabsocial/utils/emoji_reacts';
|
||||
import { simpleEmojiReact } from 'gabsocial/actions/emoji_reacts';
|
||||
|
||||
const messages = defineMessages({
|
||||
delete: { id: 'status.delete', defaultMessage: 'Delete' },
|
||||
|
@ -100,6 +102,17 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
});
|
||||
}
|
||||
|
||||
handleReactClick = emoji => {
|
||||
return e => {
|
||||
const { me, status } = this.props;
|
||||
if (me) {
|
||||
this.props.dispatch(simpleEmojiReact(status, emoji));
|
||||
} else {
|
||||
this.props.onOpenUnauthorizedModal();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
handleFavouriteClick = () => {
|
||||
const { me } = this.props;
|
||||
if (me) {
|
||||
|
@ -255,11 +268,17 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
render() {
|
||||
const { status, intl } = this.props;
|
||||
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
|
||||
const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
|
||||
|
||||
const replyCount = status.get('replies_count');
|
||||
const reblogCount = status.get('reblogs_count');
|
||||
const favoriteCount = status.get('favourites_count');
|
||||
const favouriteCount = status.get('favourites_count');
|
||||
const emojiReactCount = reduceEmoji(
|
||||
status.getIn(['pleroma', 'emoji_reactions'], []),
|
||||
favouriteCount,
|
||||
status.get('favourited'),
|
||||
).reduce((acc, cur) => acc + cur.get('count'), 0);
|
||||
const meEmojiReact = getReactForStatus(status);
|
||||
|
||||
let menu = this._makeMenu(publicStatus);
|
||||
let reblogIcon = 'retweet';
|
||||
|
@ -296,8 +315,16 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||
</div>
|
||||
<div className='status__action-bar__counter status__action-bar__counter--favourite'>
|
||||
<EmojiSelector onReact={this.handleReactClick} />
|
||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='thumbs-up' onClick={this.handleFavouriteClick} />
|
||||
{favoriteCount !== 0 && <span className='detailed-status__link'>{favoriteCount}</span>}
|
||||
<IconButton
|
||||
className='status__action-bar-button star-icon'
|
||||
animate
|
||||
active={Boolean(meEmojiReact)}
|
||||
title={intl.formatMessage(messages.favourite)}
|
||||
icon='thumbs-up'
|
||||
emoji={meEmojiReact}
|
||||
onClick={this.handleReactClick(meEmojiReact || '👍')}
|
||||
/>
|
||||
{emojiReactCount !== 0 && <span className='detailed-status__link'>{emojiReactCount}</span>}
|
||||
</div>
|
||||
{shareButton}
|
||||
|
||||
|
@ -319,6 +346,7 @@ const mapStateToProps = state => {
|
|||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
dispatch,
|
||||
onOpenUnauthorizedModal() {
|
||||
dispatch(openModal('UNAUTHORIZED'));
|
||||
},
|
||||
|
|
|
@ -270,11 +270,11 @@ class ActionBar extends React.PureComponent {
|
|||
<IconButton
|
||||
className='star-icon'
|
||||
animate
|
||||
active={meEmojiReact}
|
||||
active={Boolean(meEmojiReact)}
|
||||
title={intl.formatMessage(messages.favourite)}
|
||||
icon='thumbs-up'
|
||||
emoji={meEmojiReact}
|
||||
onClick={this.handleReactClick('👍')}
|
||||
onClick={this.handleReactClick(meEmojiReact || '👍')}
|
||||
text='Like'
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -12,10 +12,12 @@ export class StatusInteractionBar extends React.Component {
|
|||
}
|
||||
|
||||
getNormalizedReacts = () => {
|
||||
const { status, me } = this.props;
|
||||
const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']);
|
||||
const favouritesCount = status.get('favourites_count');
|
||||
return reduceEmoji(emojiReacts, favouritesCount, me).reverse();
|
||||
const { status } = this.props;
|
||||
return reduceEmoji(
|
||||
status.getIn(['pleroma', 'emoji_reactions']),
|
||||
status.get('favourites_count'),
|
||||
status.get('favourited'),
|
||||
).reverse();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -17,7 +17,7 @@ import {
|
|||
pin,
|
||||
unpin,
|
||||
} from '../../actions/interactions';
|
||||
import { emojiReact, unEmojiReact } from '../../actions/emoji_reacts';
|
||||
import { simpleEmojiReact } from '../../actions/emoji_reacts';
|
||||
import {
|
||||
replyCompose,
|
||||
mentionCompose,
|
||||
|
@ -163,28 +163,7 @@ class Status extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
handleEmojiReactClick = (status, emoji) => {
|
||||
const { dispatch } = this.props;
|
||||
const emojiReacts = status.getIn(['pleroma', 'emoji_reactions']);
|
||||
|
||||
if (emoji === '👍' && status.get('favourited')) return dispatch(unfavourite(status));
|
||||
|
||||
const undo = emojiReacts.filter(e => e.get('me') === true && e.get('name') === emoji).count() > 0;
|
||||
if (undo) return dispatch(unEmojiReact(status, emoji));
|
||||
|
||||
return Promise.all(
|
||||
emojiReacts
|
||||
.filter(emojiReact => emojiReact.get('me') === true)
|
||||
.map(emojiReact => dispatch(unEmojiReact(status, emojiReact.get('name')))),
|
||||
status.get('favourited') && dispatch(unfavourite(status))
|
||||
).then(() => {
|
||||
if (emoji === '👍') {
|
||||
dispatch(favourite(status));
|
||||
} else {
|
||||
dispatch(emojiReact(status, emoji));
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
this.props.dispatch(simpleEmojiReact(status, emoji));
|
||||
}
|
||||
|
||||
handleFavouriteClick = (status) => {
|
||||
|
|
Ładowanie…
Reference in New Issue