show reactions in detailed status view
This commit is contained in:
parent
a445e38694
commit
6eeda52a8e
4 changed files with 56 additions and 5 deletions
|
@ -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),
|
||||
};
|
||||
};
|
||||
|
|
|
@ -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' />
|
||||
|
|
|
@ -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
|
||||
|
|
11
app/javascript/flavours/glitch/utils/emoji_map.js
Normal file
11
app/javascript/flavours/glitch/utils/emoji_map.js
Normal 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;
|
Loading…
Reference in a new issue