matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Notifications: refactor makeGetNotification, pass the full rebuilt notification all the way through

Browse Source
This commit is contained in:
Alex Gleason
2021-10-22 17:11:32 -05:00
parent 03541ccc6f
commit acf316faf6
4 changed files with 77 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
app/soapbox/features/notifications/components/notification.js
View File

@ -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;

7
app/soapbox/features/notifications/containers/notification_container.js
View File

@ -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),
};
};

2
app/soapbox/features/notifications/index.js
View File

@ -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}
/>

11
app/soapbox/selectors/index.js
View File

@ -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 });
});
};