sforkowany z mirror/soapbox
Notifications: refactor makeGetNotification, pass the full rebuilt notification all the way through
Alex Gleason
rodzic
03541ccc6f
commit
acf316faf6
|
|
@ -36,7 +36,6 @@ class Notification extends ImmutablePureComponent {
|
|||
onFavourite: PropTypes.func.isRequired,
|
||||
onReblog: PropTypes.func.isRequired,
|
||||
onToggleHidden: PropTypes.func.isRequired,
|
||||
status: ImmutablePropTypes.map,
|
||||
intl: PropTypes.object.isRequired,
|
||||
getScrollPosition: PropTypes.func,
|
||||
updateScrollBottom: PropTypes.func,
|
||||
|
|
@ -58,7 +57,7 @@ class Notification extends ImmutablePureComponent {
|
|||
const { notification } = this.props;
|
||||
|
||||
if (notification.get('status')) {
|
||||
this.context.router.history.push(`/@${notification.getIn(['account', 'acct'])}/posts/${notification.get('status')}`);
|
||||
this.context.router.history.push(`/@${notification.getIn(['account', 'acct'])}/posts/${notification.getIn(['status', 'id'])}`);
|
||||
} else {
|
||||
this.handleOpenProfile();
|
||||
}
|
||||
|
|
@ -77,17 +76,20 @@ class Notification extends ImmutablePureComponent {
|
|||
}
|
||||
|
||||
handleHotkeyFavourite = () => {
|
||||
const { status } = this.props;
|
||||
const { notification } = this.props;
|
||||
const status = notification.get('status');
|
||||
if (status) this.props.onFavourite(status);
|
||||
}
|
||||
|
||||
handleHotkeyBoost = e => {
|
||||
const { status } = this.props;
|
||||
const { notification } = this.props;
|
||||
const status = notification.get('status');
|
||||
if (status) this.props.onReblog(status, e);
|
||||
}
|
||||
|
||||
handleHotkeyToggleHidden = () => {
|
||||
const { status } = this.props;
|
||||
const { notification } = this.props;
|
||||
const status = notification.get('status');
|
||||
if (status) this.props.onToggleHidden(status);
|
||||
}
|
||||
|
||||
|
|
@ -105,12 +107,30 @@ class Notification extends ImmutablePureComponent {
|
|||
};
|
||||
}
|
||||
|
||||
renderFollow(notification, account, link) {
|
||||
renderLink = account => {
|
||||
return (
|
||||
<bdi>
|
||||
<Permalink
|
||||
className='notification__display-name'
|
||||
href={`/@${account.get('acct')}`}
|
||||
title={account.get('acct')}
|
||||
to={`/@${account.get('acct')}`}
|
||||
dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
|
||||
/>
|
||||
</bdi>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
renderFollow(notification) {
|
||||
const { intl } = this.props;
|
||||
|
||||
const account = notification.get('account');
|
||||
const link = this.renderLink(account);
|
||||
|
||||
return (
|
||||
<HotKeys handlers={this.getHandlers()}>
|
||||
<div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: account.get('acct') }), notification.get('created_at'))}>
|
||||
<div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__icon-wrapper'>
|
||||
<Icon src={require('@tabler/icons/icons/user-plus.svg')} />
|
||||
|
|
@ -121,18 +141,21 @@ class Notification extends ImmutablePureComponent {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<AccountContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
|
||||
<AccountContainer id={notification.getIn(['account', 'id'])} withNote={false} hidden={this.props.hidden} />
|
||||
</div>
|
||||
</HotKeys>
|
||||
);
|
||||
}
|
||||
|
||||
renderFollowRequest(notification, account, link) {
|
||||
renderFollowRequest(notification) {
|
||||
const { intl, unread } = this.props;
|
||||
|
||||
const account = notification.get('account');
|
||||
const link = this.renderLink(account);
|
||||
|
||||
return (
|
||||
<HotKeys handlers={this.getHandlers()}>
|
||||
<div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}>
|
||||
<div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__icon-wrapper'>
|
||||
<Icon src={require('@tabler/icons/icons/user.svg')} />
|
||||
|
|
@ -143,7 +166,7 @@ class Notification extends ImmutablePureComponent {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<FollowRequestContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
|
||||
<FollowRequestContainer id={notification.getIn(['account', 'id'])} withNote={false} hidden={this.props.hidden} />
|
||||
</div>
|
||||
</HotKeys>
|
||||
);
|
||||
|
|
@ -153,7 +176,7 @@ class Notification extends ImmutablePureComponent {
|
|||
return (
|
||||
<div className='notification notification-mention' tabIndex='0'>
|
||||
<StatusContainer
|
||||
id={notification.get('status')}
|
||||
id={notification.getIn(['status', 'id'])}
|
||||
withDismiss
|
||||
hidden={this.props.hidden}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
|
|
@ -168,9 +191,12 @@ class Notification extends ImmutablePureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderChatMention(notification, link) {
|
||||
renderChatMention(notification) {
|
||||
const { intl } = this.props;
|
||||
|
||||
const account = notification.get('account');
|
||||
const link = this.renderLink(account);
|
||||
|
||||
return (
|
||||
<HotKeys handlers={this.getHandlers()}>
|
||||
<div className='notification notification-chat-mention focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.chat_mention', defaultMessage: '{name} sent you a message' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
|
||||
|
|
@ -195,9 +221,12 @@ class Notification extends ImmutablePureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderEmojiReact(notification, link) {
|
||||
renderEmojiReact(notification) {
|
||||
const { intl } = this.props;
|
||||
|
||||
const account = notification.get('account');
|
||||
const link = this.renderLink(account);
|
||||
|
||||
return (
|
||||
<HotKeys handlers={this.getHandlers()}>
|
||||
<div className='notification notification-emoji-react focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.pleroma:emoji_reaction', defaultMessage: '{name} reacted to your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
|
||||
|
|
@ -212,7 +241,7 @@ class Notification extends ImmutablePureComponent {
|
|||
</div>
|
||||
|
||||
<StatusContainer
|
||||
id={notification.get('status')}
|
||||
id={notification.getIn(['status', 'id'])}
|
||||
account={notification.get('account')}
|
||||
muted
|
||||
withDismiss
|
||||
|
|
@ -227,9 +256,12 @@ class Notification extends ImmutablePureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderFavourite(notification, link) {
|
||||
renderFavourite(notification) {
|
||||
const { intl } = this.props;
|
||||
|
||||
const account = notification.get('account');
|
||||
const link = this.renderLink(account);
|
||||
|
||||
return (
|
||||
<HotKeys handlers={this.getHandlers()}>
|
||||
<div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} liked your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
|
||||
|
|
@ -244,7 +276,7 @@ class Notification extends ImmutablePureComponent {
|
|||
</div>
|
||||
|
||||
<StatusContainer
|
||||
id={notification.get('status')}
|
||||
id={notification.getIn(['status', 'id'])}
|
||||
account={notification.get('account')}
|
||||
muted
|
||||
withDismiss
|
||||
|
|
@ -259,9 +291,12 @@ class Notification extends ImmutablePureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderReblog(notification, link) {
|
||||
renderReblog(notification) {
|
||||
const { intl } = this.props;
|
||||
|
||||
const account = notification.get('account');
|
||||
const link = this.renderLink(account);
|
||||
|
||||
return (
|
||||
<HotKeys handlers={this.getHandlers()}>
|
||||
<div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} reposted your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
|
||||
|
|
@ -276,7 +311,7 @@ class Notification extends ImmutablePureComponent {
|
|||
</div>
|
||||
|
||||
<StatusContainer
|
||||
id={notification.get('status')}
|
||||
id={notification.getIn(['status', 'id'])}
|
||||
account={notification.get('account')}
|
||||
muted
|
||||
withDismiss
|
||||
|
|
@ -308,7 +343,7 @@ class Notification extends ImmutablePureComponent {
|
|||
</div>
|
||||
|
||||
<StatusContainer
|
||||
id={notification.get('status')}
|
||||
id={notification.getIn(['status', 'id'])}
|
||||
account={notification.get('account')}
|
||||
muted
|
||||
withDismiss
|
||||
|
|
@ -323,14 +358,17 @@ class Notification extends ImmutablePureComponent {
|
|||
);
|
||||
}
|
||||
|
||||
renderMove(notification, account, targetAccount, link) {
|
||||
renderMove(notification) {
|
||||
const { intl } = this.props;
|
||||
|
||||
const targetLink = <bdi><Permalink className='notification__display-name' href={`/@${targetAccount.get('acct')}`} to={`/@${targetAccount.get('acct')}`}>{targetAccount.get('acct')}</Permalink></bdi>;
|
||||
const account = notification.get('account');
|
||||
const target = notification.get('target');
|
||||
const link = this.renderLink(account);
|
||||
const targetLink = this.renderLink(target);
|
||||
|
||||
return (
|
||||
<HotKeys handlers={this.getHandlers()}>
|
||||
<div className='notification notification-move focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.move', defaultMessage: '{name} moved to {targetName}' }, { name: account.get('acct'), targetName: targetAccount.get('acct') }), notification.get('created_at'))}>
|
||||
<div className='notification notification-move focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.move', defaultMessage: '{name} moved to {targetName}' }, { name: notification.getIn(['account', 'acct']), targetName: notification.getIn(['target', 'acct']) }), notification.get('created_at'))}>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__icon-wrapper'>
|
||||
<Icon src={require('@tabler/icons/icons/briefcase.svg')} />
|
||||
|
|
@ -341,7 +379,7 @@ class Notification extends ImmutablePureComponent {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<AccountContainer id={targetAccount.get('id')} withNote={false} hidden={this.props.hidden} />
|
||||
<AccountContainer id={notification.getIn(['target', 'id'])} withNote={false} hidden={this.props.hidden} />
|
||||
</div>
|
||||
</HotKeys>
|
||||
);
|
||||
|
|
@ -349,30 +387,26 @@ class Notification extends ImmutablePureComponent {
|
|||
|
||||
render() {
|
||||
const { notification } = this.props;
|
||||
const account = notification.get('account');
|
||||
const targetAccount = notification.get('target');
|
||||
const displayNameHtml = { __html: account.get('display_name_html') };
|
||||
const link = <bdi><Permalink className='notification__display-name' href={`/@${account.get('acct')}`} title={account.get('acct')} to={`/@${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
|
||||
|
||||
switch(notification.get('type')) {
|
||||
case 'follow':
|
||||
return this.renderFollow(notification, account, link);
|
||||
return this.renderFollow(notification);
|
||||
case 'follow_request':
|
||||
return this.renderFollowRequest(notification, account, link);
|
||||
return this.renderFollowRequest(notification);
|
||||
case 'mention':
|
||||
return this.renderMention(notification);
|
||||
case 'favourite':
|
||||
return this.renderFavourite(notification, link);
|
||||
return this.renderFavourite(notification);
|
||||
case 'reblog':
|
||||
return this.renderReblog(notification, link);
|
||||
return this.renderReblog(notification);
|
||||
case 'poll':
|
||||
return this.renderPoll(notification);
|
||||
case 'move':
|
||||
return this.renderMove(notification, account, targetAccount, link);
|
||||
return this.renderMove(notification);
|
||||
case 'pleroma:emoji_reaction':
|
||||
return this.renderEmojiReact(notification, link);
|
||||
return this.renderEmojiReact(notification);
|
||||
case 'pleroma:chat_mention':
|
||||
return this.renderChatMention(notification, link);
|
||||
return this.renderChatMention(notification);
|
||||
}
|
||||
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { makeGetNotification, makeGetStatus } from '../../../selectors';
|
||||
import { makeGetNotification } from '../../../selectors';
|
||||
import Notification from '../components/notification';
|
||||
import { openModal } from '../../../actions/modal';
|
||||
import { mentionCompose } from '../../../actions/compose';
|
||||
|
|
@ -17,13 +17,10 @@ import { getSettings } from 'soapbox/actions/settings';
|
|||
|
||||
const makeMapStateToProps = () => {
|
||||
const getNotification = makeGetNotification();
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const notification = getNotification(state, props.notification, props.accountId, props.targetId);
|
||||
return {
|
||||
notification: notification,
|
||||
status: notification.get('status') ? getStatus(state, { id: notification.get('status') }) : null,
|
||||
notification: getNotification(state, props.notification),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -152,8 +152,6 @@ class Notifications extends React.PureComponent {
|
|||
<NotificationContainer
|
||||
key={item.get('id')}
|
||||
notification={item}
|
||||
accountId={item.get('account')}
|
||||
targetId={item.get('target')}
|
||||
onMoveUp={this.handleMoveUp}
|
||||
onMoveDown={this.handleMoveDown}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -182,11 +182,12 @@ export const getAlerts = createSelector([getAlertsBase], (base) => {
|
|||
|
||||
export const makeGetNotification = () => {
|
||||
return createSelector([
|
||||
(_, base) => base,
|
||||
(state, _, accountId) => state.getIn(['accounts', accountId]),
|
||||
(state, _, __, targetId) => state.getIn(['accounts', targetId]),
|
||||
], (base, account, target) => {
|
||||
return base.set('account', account).set('target', target);
|
||||
(state, notification) => notification,
|
||||
(state, notification) => state.getIn(['accounts', notification.get('account')]),
|
||||
(state, notification) => state.getIn(['accounts', notification.get('target')]),
|
||||
(state, notification) => state.getIn(['statuses', notification.get('status')]),
|
||||
], (notification, account, target, status) => {
|
||||
return notification.merge({ account, target, status });
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue