show reactions in detailed status view

This commit is contained in:
fef 2022-11-25 23:02:40 +00:00 committed by Jeremy Kescher
parent a445e38694
commit 6eeda52a8e
No known key found for this signature in database
GPG key ID: 80A419A7A613DFA4
4 changed files with 56 additions and 5 deletions

View file

@ -44,10 +44,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 { createSelector } from 'reselect';
import { Map as ImmutableMap } from 'immutable';
const customEmojiMap = createSelector([state => state.get('custom_emojis')], items => items.reduce((map, emoji) => map.set(emoji.get('shortcode'), emoji), ImmutableMap()));
import buildCustomEmojiMap from '../utils/emoji_map';
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@ -91,7 +88,7 @@ const makeMapStateToProps = () => {
account: account || props.account,
settings: state.get('local_settings'),
prepend: prepend || props.prepend,
emojiMap: customEmojiMap(state),
emojiMap: buildCustomEmojiMap(state),
pictureInPicture: getPictureInPicture(state, props),
};
};

View file

@ -20,6 +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';
class DetailedStatus extends ImmutablePureComponent {
@ -45,6 +46,9 @@ class DetailedStatus extends ImmutablePureComponent {
available: PropTypes.bool,
}),
onToggleMediaVisibility: PropTypes.func,
onReactionAdd: PropTypes.func.isRequired,
onReactionRemove: PropTypes.func.isRequired,
emojiMap: ImmutablePropTypes.map.isRequired,
intl: PropTypes.object.isRequired,
};
@ -323,6 +327,14 @@ class DetailedStatus extends ImmutablePureComponent {
disabled
/>
<StatusReactionsBar
statusId={status.get('id')}
reactions={status.get('reactions')}
addReaction={this.props.onReactionAdd}
removeReaction={this.props.onReactionRemove}
emojiMap={this.props.emojiMap}
/>
<div className='detailed-status__meta'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />

View file

@ -29,6 +29,8 @@ import {
unreblog,
pin,
unpin,
statusAddReaction,
statusRemoveReaction,
} from 'flavours/glitch/actions/interactions';
import {
replyCompose,
@ -55,6 +57,7 @@ import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/com
import Icon from 'flavours/glitch/components/icon';
import { Helmet } from 'react-helmet';
import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
import buildCustomEmojiMap from '../../utils/emoji_map';
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@ -148,6 +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),
};
};
@ -295,6 +299,30 @@ class Status extends ImmutablePureComponent {
}
};
handleReactionAdd = (statusId, name) => {
const { dispatch } = this.props;
const { signedIn } = this.context.identity;
if (signedIn) {
dispatch(statusAddReaction(statusId, name));
} else {
dispatch(openModal('INTERACTION', {
type: 'reaction_add',
accountId: status.getIn(['account', 'id']),
url: status.get('url'),
}));
}
}
handleReactionRemove = (statusId, name) => {
const { dispatch } = this.props;
const { signedIn } = this.context.identity;
if (signedIn) {
dispatch(statusRemoveReaction(statusId, name));
}
}
handlePin = (status) => {
if (status.get('pinned')) {
this.props.dispatch(unpin(status));
@ -682,6 +710,8 @@ class Status extends ImmutablePureComponent {
settings={settings}
onOpenVideo={this.handleOpenVideo}
onOpenMedia={this.handleOpenMedia}
onReactionAdd={this.handleReactionAdd}
onReactionRemove={this.handleReactionRemove}
expanded={isExpanded}
onToggleHidden={this.handleToggleHidden}
onTranslate={this.handleTranslate}
@ -689,6 +719,7 @@ class Status extends ImmutablePureComponent {
showMedia={this.state.showMedia}
onToggleMediaVisibility={this.handleToggleMediaVisibility}
pictureInPicture={pictureInPicture}
emojiMap={this.props.emojiMap}
/>
<ActionBar

View file

@ -0,0 +1,11 @@
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;