rubiline
/
Glitch-Shrike
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor notifications code to reduce differences with upstream (#2692) 

* Merge back `Follow` notification component

* Merge back part of `FollowRequestContainer` notification container

* Reduce differences with upstream in the `mention` case

* Reduce differences with upstream in the `favourite` case

* Reduce differences with upstream in the `reblog` case

* Reduce differences with upstream in the `status` case

* Reduce differences with upstream in the `update` case

* Reduce differences with upstream in the `poll` case

* Merge back `AdminSignup` notification component

* Merge back `AdminReport` notification container
shrike
Claire 2024-04-06 19:34:30 +02:00 committed by GitHub
parent 8a64406d34
commit 9451997fa8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 433 additions and 642 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx
View File

@ -1,114 +0,0 @@
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { Permalink } from 'flavours/glitch/components/permalink';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import NotificationOverlayContainer from '../containers/overlay_container';
import Report from './report';
class AdminReport extends ImmutablePureComponent {
static propTypes = {
hidden: PropTypes.bool,
id: PropTypes.string.isRequired,
account: ImmutablePropTypes.map.isRequired,
notification: ImmutablePropTypes.map.isRequired,
unread: PropTypes.bool,
report: ImmutablePropTypes.map.isRequired,
...WithRouterPropTypes,
};
handleMoveUp = () => {
const { notification, onMoveUp } = this.props;
onMoveUp(notification.get('id'));
};
handleMoveDown = () => {
const { notification, onMoveDown } = this.props;
onMoveDown(notification.get('id'));
};
handleOpen = () => {
this.handleOpenProfile();
};
handleOpenProfile = () => {
const { history, notification } = this.props;
history.push(`/@${notification.getIn(['account', 'acct'])}`);
};
handleMention = e => {
e.preventDefault();
const { history, notification, onMention } = this.props;
onMention(notification.get('account'), history);
};
getHandlers () {
return {
moveUp: this.handleMoveUp,
moveDown: this.handleMoveDown,
open: this.handleOpen,
openProfile: this.handleOpenProfile,
mention: this.handleMention,
reply: this.handleMention,
};
}
render () {
const { account, notification, unread, report } = this.props;
if (!report) {
return null;
}
// Links to the display name.
const displayName = account.get('display_name_html') || account.get('username');
const link = (
<bdi><Permalink
className='notification__display-name'
href={account.get('url')}
title={account.get('acct')}
to={`/@${account.get('acct')}`}
dangerouslySetInnerHTML={{ __html: displayName }}
/></bdi>
);
const targetAccount = report.get('target_account');
const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
const targetLink = <bdi><Permalink className='notification__display-name' href={targetAccount.get('url')} title={targetAccount.get('acct')} to={`/@${targetAccount.get('acct')}`} dangerouslySetInnerHTML={targetDisplayNameHtml} /></bdi>;
return (
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0}>
<div className='notification__message'>
<Icon id='flag' icon={FlagIcon} />
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.admin.report' defaultMessage='{name} reported {target}' values={{ name: link, target: targetLink }} />
</span>
</div>
<Report account={account} report={notification.get('report')} hidden={this.props.hidden} />
<NotificationOverlayContainer notification={notification} />
</div>
</HotKeys>
);
}
}
export default withRouter(AdminReport);

107
app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx
View File

@ -1,107 +0,0 @@
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { Permalink } from 'flavours/glitch/components/permalink';
import AccountContainer from 'flavours/glitch/containers/account_container';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import NotificationOverlayContainer from '../containers/overlay_container';
class NotificationAdminSignup extends ImmutablePureComponent {
static propTypes = {
hidden: PropTypes.bool,
id: PropTypes.string.isRequired,
account: ImmutablePropTypes.map.isRequired,
notification: ImmutablePropTypes.map.isRequired,
unread: PropTypes.bool,
...WithRouterPropTypes,
};
handleMoveUp = () => {
const { notification, onMoveUp } = this.props;
onMoveUp(notification.get('id'));
};
handleMoveDown = () => {
const { notification, onMoveDown } = this.props;
onMoveDown(notification.get('id'));
};
handleOpen = () => {
this.handleOpenProfile();
};
handleOpenProfile = () => {
const { history, notification } = this.props;
history.push(`/@${notification.getIn(['account', 'acct'])}`);
};
handleMention = e => {
e.preventDefault();
const { history, notification, onMention } = this.props;
onMention(notification.get('account'), history);
};
getHandlers () {
return {
moveUp: this.handleMoveUp,
moveDown: this.handleMoveDown,
open: this.handleOpen,
openProfile: this.handleOpenProfile,
mention: this.handleMention,
reply: this.handleMention,
};
}
render () {
const { account, notification, hidden, unread } = this.props;
// Links to the display name.
const displayName = account.get('display_name_html') || account.get('username');
const link = (
<bdi><Permalink
className='notification__display-name'
href={account.get('url')}
title={account.get('acct')}
to={`/@${account.get('acct')}`}
dangerouslySetInnerHTML={{ __html: displayName }}
/></bdi>
);
// Renders.
return (
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0}>
<div className='notification__message'>
<Icon id='user-plus' icon={PersonAddIcon} />
<FormattedMessage
id='notification.admin.sign_up'
defaultMessage='{name} signed up'
values={{ name: link }}
/>
</div>
<AccountContainer hidden={hidden} id={account.get('id')} withNote={false} />
<NotificationOverlayContainer notification={notification} />
</div>
</HotKeys>
);
}
}
export default withRouter(NotificationAdminSignup);

107
app/javascript/flavours/glitch/features/notifications/components/follow.jsx
View File

@ -1,107 +0,0 @@
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { Permalink } from 'flavours/glitch/components/permalink';
import AccountContainer from 'flavours/glitch/containers/account_container';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import NotificationOverlayContainer from '../containers/overlay_container';
class NotificationFollow extends ImmutablePureComponent {
static propTypes = {
hidden: PropTypes.bool,
id: PropTypes.string.isRequired,
account: ImmutablePropTypes.map.isRequired,
notification: ImmutablePropTypes.map.isRequired,
unread: PropTypes.bool,
...WithRouterPropTypes,
};
handleMoveUp = () => {
const { notification, onMoveUp } = this.props;
onMoveUp(notification.get('id'));
};
handleMoveDown = () => {
const { notification, onMoveDown } = this.props;
onMoveDown(notification.get('id'));
};
handleOpen = () => {
this.handleOpenProfile();
};
handleOpenProfile = () => {
const { history, notification } = this.props;
history.push(`/@${notification.getIn(['account', 'acct'])}`);
};
handleMention = e => {
e.preventDefault();
const { history, notification, onMention } = this.props;
onMention(notification.get('account'), history);
};
getHandlers () {
return {
moveUp: this.handleMoveUp,
moveDown: this.handleMoveDown,
open: this.handleOpen,
openProfile: this.handleOpenProfile,
mention: this.handleMention,
reply: this.handleMention,
};
}
render () {
const { account, notification, hidden, unread } = this.props;
// Links to the display name.
const displayName = account.get('display_name_html') || account.get('username');
const link = (
<bdi><Permalink
className='notification__display-name'
href={account.get('url')}
title={account.get('acct')}
to={`/@${account.get('acct')}`}
dangerouslySetInnerHTML={{ __html: displayName }}
/></bdi>
);
// Renders.
return (
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0}>
<div className='notification__message'>
<Icon id='user-plus' icon={PersonAddIcon} />
<FormattedMessage
id='notification.follow'
defaultMessage='{name} followed you'
values={{ name: link }}
/>
</div>
<AccountContainer hidden={hidden} id={account.get('id')} withNote={false} />
<NotificationOverlayContainer notification={notification} />
</div>
</HotKeys>
);
}
}
export default withRouter(NotificationFollow);

104
app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
View File

@ -1,26 +1,16 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { HotKeys } from 'react-hotkeys';
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
import { Avatar } from 'flavours/glitch/components/avatar';
import { DisplayName } from 'flavours/glitch/components/display_name';
import { Icon } from 'flavours/glitch/components/icon';
import { IconButton } from 'flavours/glitch/components/icon_button';
import { Permalink } from 'flavours/glitch/components/permalink';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import NotificationOverlayContainer from '../containers/overlay_container';
const messages = defineMessages({
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@ -34,50 +24,10 @@ class FollowRequest extends ImmutablePureComponent {
onAuthorize: PropTypes.func.isRequired,
onReject: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
notification: ImmutablePropTypes.map.isRequired,
unread: PropTypes.bool,
...WithRouterPropTypes,
};
handleMoveUp = () => {
const { notification, onMoveUp } = this.props;
onMoveUp(notification.get('id'));
};
handleMoveDown = () => {
const { notification, onMoveDown } = this.props;
onMoveDown(notification.get('id'));
};
handleOpen = () => {
this.handleOpenProfile();
};
handleOpenProfile = () => {
const { history, notification } = this.props;
history.push(`/@${notification.getIn(['account', 'acct'])}`);
};
handleMention = e => {
e.preventDefault();
const { history, notification, onMention } = this.props;
onMention(notification.get('account'), history);
};
getHandlers () {
return {
moveUp: this.handleMoveUp,
moveDown: this.handleMoveDown,
open: this.handleOpen,
openProfile: this.handleOpenProfile,
mention: this.handleMention,
reply: this.handleMention,
};
}
render () {
const { intl, hidden, account, onAuthorize, onReject, notification, unread } = this.props;
const { intl, hidden, account, onAuthorize, onReject } = this.props;
if (!account) {
return <div />;
@ -92,51 +42,23 @@ class FollowRequest extends ImmutablePureComponent {
);
}
// Links to the display name.
const displayName = account.get('display_name_html') || account.get('username');
const link = (
<bdi><Permalink
className='notification__display-name'
href={account.get('url')}
title={account.get('acct')}
to={`/@${account.get('acct')}`}
dangerouslySetInnerHTML={{ __html: displayName }}
/></bdi>
);
return (
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0}>
<div className='notification__message'>
<Icon id='user' icon={PersonIcon} />
<div className='account'>
<div className='account__wrapper'>
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
<DisplayName account={account} />
</Permalink>
<FormattedMessage
id='notification.follow_request'
defaultMessage='{name} has requested to follow you'
values={{ name: link }}
/>
<div className='account__relationship'>
<IconButton title={intl.formatMessage(messages.authorize)} icon='check' iconComponent={CheckIcon} onClick={onAuthorize} />
<IconButton title={intl.formatMessage(messages.reject)} icon='times' iconComponent={CloseIcon} onClick={onReject} />
</div>
<div className='account'>
<div className='account__wrapper'>
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
<DisplayName account={account} />
</Permalink>
<div className='account__relationship'>
<IconButton title={intl.formatMessage(messages.authorize)} icon='check' iconComponent={CheckIcon} onClick={onAuthorize} />
<IconButton title={intl.formatMessage(messages.reject)} icon='times' iconComponent={CloseIcon} onClick={onReject} />
</div>
</div>
</div>
<NotificationOverlayContainer notification={notification} />
</div>
</HotKeys>
</div>
);
}
}
export default withRouter(injectIntl(FollowRequest));
export default injectIntl(FollowRequest);

572
app/javascript/flavours/glitch/features/notifications/components/notification.jsx
View File

@ -1,236 +1,410 @@
// Package imports.
import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
import classNames from 'classnames';
import { withRouter } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Our imports,
import { HotKeys } from 'react-hotkeys';
import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
import { Icon } from 'flavours/glitch/components/icon';
import { Permalink } from 'flavours/glitch/components/permalink';
import AccountContainer from 'flavours/glitch/containers/account_container';
import StatusContainer from 'flavours/glitch/containers/status_container';
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
import NotificationAdminReportContainer from '../containers/admin_report_container';
import NotificationFollowRequestContainer from '../containers/follow_request_container';
import FollowRequestContainer from '../containers/follow_request_container';
import NotificationOverlayContainer from '../containers/overlay_container';
import NotificationAdminSignup from './admin_signup';
import NotificationFollow from './follow';
import Report from './report';
export default class Notification extends ImmutablePureComponent {
const messages = defineMessages({
follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
adminSignUp: { id: 'notification.admin.sign_up', defaultMessage: '{name} signed up' },
adminReport: { id: 'notification.admin.report', defaultMessage: '{name} reported {target}' },
});
const notificationForScreenReader = (intl, message, timestamp) => {
const output = [message];
output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }));
return output.join(', ');
};
class Notification extends ImmutablePureComponent {
static propTypes = {
notification: ImmutablePropTypes.map.isRequired,
hidden: PropTypes.bool,
onMoveUp: PropTypes.func.isRequired,
onMoveDown: PropTypes.func.isRequired,
onMention: PropTypes.func.isRequired,
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,
cacheMediaWidth: PropTypes.func,
cachedMediaWidth: PropTypes.number,
onUnmount: PropTypes.func,
unread: PropTypes.bool,
...WithRouterPropTypes,
};
handleMoveUp = () => {
const { notification, onMoveUp } = this.props;
onMoveUp(notification.get('id'));
};
handleMoveDown = () => {
const { notification, onMoveDown } = this.props;
onMoveDown(notification.get('id'));
};
handleOpen = () => {
const { notification } = this.props;
if (notification.get('status')) {
this.props.history.push(`/@${notification.getIn(['status', 'account', 'acct'])}/${notification.get('status')}`);
} else {
this.handleOpenProfile();
}
};
handleOpenProfile = () => {
const { notification } = this.props;
this.props.history.push(`/@${notification.getIn(['account', 'acct'])}`);
};
handleMention = e => {
e.preventDefault();
const { notification, onMention } = this.props;
onMention(notification.get('account'), this.props.history);
};
handleHotkeyFavourite = () => {
const { status } = this.props;
if (status) this.props.onFavourite(status);
};
handleHotkeyBoost = e => {
const { status } = this.props;
if (status) this.props.onReblog(status, e);
};
getHandlers () {
return {
reply: this.handleMention,
favourite: this.handleHotkeyFavourite,
boost: this.handleHotkeyBoost,
mention: this.handleMention,
open: this.handleOpen,
openProfile: this.handleOpenProfile,
moveUp: this.handleMoveUp,
moveDown: this.handleMoveDown,
};
}
renderFollow (notification, account, link) {
const { intl, unread } = this.props;
return (
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}>
<div className='notification__message'>
<Icon id='user-plus' icon={PersonAddIcon} />
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
</span>
</div>
<AccountContainer id={account.get('id')} hidden={this.props.hidden} />
<NotificationOverlayContainer notification={notification} />
</div>
</HotKeys>
);
}
renderFollowRequest (notification, account, link) {
const { intl, unread } = this.props;
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='notification__message'>
<Icon id='user' icon={PersonIcon} />
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.follow_request' defaultMessage='{name} has requested to follow you' values={{ name: link }} />
</span>
</div>
<FollowRequestContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
<NotificationOverlayContainer notification={notification} />
</div>
</HotKeys>
);
}
renderMention (notification) {
return (
<StatusContainer
id={notification.get('status')}
containerId={notification.get('id')}
withDismiss
hidden={this.props.hidden}
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
onMention={this.props.onMention}
contextType='notifications'
getScrollPosition={this.props.getScrollPosition}
updateScrollBottom={this.props.updateScrollBottom}
notification={notification}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
unread={this.props.unread}
onUnmount={this.props.onUnmount}
/>
);
}
renderFavourite (notification) {
return (
<StatusContainer
containerId={notification.get('id')}
hidden={!!this.props.hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='favourite'
muted
withDismiss
notification={notification}
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
onMention={this.props.onMention}
contextType='notifications'
getScrollPosition={this.props.getScrollPosition}
updateScrollBottom={this.props.updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
unread={this.props.unread}
/>
);
}
renderReblog (notification) {
return (
<StatusContainer
containerId={notification.get('id')}
hidden={!!this.props.hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='reblog'
muted
notification={notification}
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
onMention={this.props.onMention}
contextType='notifications'
getScrollPosition={this.props.getScrollPosition}
updateScrollBottom={this.props.updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
}
renderStatus (notification) {
return (
<StatusContainer
containerId={notification.get('id')}
hidden={!!this.props.hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='status'
muted
notification={notification}
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
onMention={this.props.onMention}
contextType='notifications'
getScrollPosition={this.props.getScrollPosition}
updateScrollBottom={this.props.updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
}
renderUpdate (notification) {
return (
<StatusContainer
containerId={notification.get('id')}
hidden={!!this.props.hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='update'
muted
notification={notification}
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
onMention={this.props.onMention}
contextType='notifications'
getScrollPosition={this.props.getScrollPosition}
updateScrollBottom={this.props.updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
}
renderPoll (notification) {
return (
<StatusContainer
containerId={notification.get('id')}
hidden={!!this.props.hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='poll'
muted
notification={notification}
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
onMention={this.props.onMention}
contextType='notifications'
getScrollPosition={this.props.getScrollPosition}
updateScrollBottom={this.props.updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
}
renderAdminSignUp (notification, account, link) {
const { intl, unread } = this.props;
return (
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminSignUp, { name: account.get('acct') }), notification.get('created_at'))}>
<div className='notification__message'>
<Icon id='user-plus' icon={PersonAddIcon} />
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.admin.sign_up' defaultMessage='{name} signed up' values={{ name: link }} />
</span>
</div>
<AccountContainer id={account.get('id')} hidden={this.props.hidden} />
<NotificationOverlayContainer notification={notification} />
</div>
</HotKeys>
);
}
renderAdminReport (notification, account, link) {
const { intl, unread, report } = this.props;
if (!report) {
return null;
}
const targetAccount = report.get('target_account');
const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
const targetLink = (
<bdi>
<Permalink
className='notification__display-name'
href={account.get('url')}
title={targetAccount.get('acct')}
to={`/@${targetAccount.get('acct')}`}
dangerouslySetInnerHTML={targetDisplayNameHtml}
/>
</bdi>
);
return (
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminReport, { name: account.get('acct'), target: notification.getIn(['report', 'target_account', 'acct']) }), notification.get('created_at'))}>
<div className='notification__message'>
<Icon id='flag' icon={FlagIcon} />
<span title={notification.get('created_at')}>
<FormattedMessage id='notification.admin.report' defaultMessage='{name} reported {target}' values={{ name: link, target: targetLink }} />
</span>
</div>
<Report account={account} report={notification.get('report')} hidden={this.props.hidden} />
<NotificationOverlayContainer notification={notification} />
</div>
</HotKeys>
);
}
render () {
const {
hidden,
notification,
onMoveDown,
onMoveUp,
onMention,
getScrollPosition,
updateScrollBottom,
} = this.props;
const { notification } = this.props;
const account = notification.get('account');
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 (
<NotificationFollow
hidden={hidden}
id={notification.get('id')}
account={notification.get('account')}
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
unread={this.props.unread}
/>
);
return this.renderFollow(notification, account, link);
case 'follow_request':
return (
<NotificationFollowRequestContainer
hidden={hidden}
id={notification.get('id')}
account={notification.get('account')}
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
unread={this.props.unread}
/>
);
case 'admin.sign_up':
return (
<NotificationAdminSignup
hidden={hidden}
id={notification.get('id')}
account={notification.get('account')}
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
unread={this.props.unread}
/>
);
case 'admin.report':
return (
<NotificationAdminReportContainer
hidden={hidden}
id={notification.get('id')}
account={notification.get('account')}
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
unread={this.props.unread}
/>
);
return this.renderFollowRequest(notification, account, link);
case 'mention':
return (
<StatusContainer
containerId={notification.get('id')}
hidden={hidden}
id={notification.get('status')}
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
contextType='notifications'
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
case 'status':
return (
<StatusContainer
containerId={notification.get('id')}
hidden={hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='status'
muted
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
contextType='notifications'
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
return this.renderMention(notification);
case 'favourite':
return (
<StatusContainer
containerId={notification.get('id')}
hidden={hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='favourite'
muted
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
contextType='notifications'
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
return this.renderFavourite(notification);
case 'reblog':
return (
<StatusContainer
containerId={notification.get('id')}
hidden={hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='reblog'
muted
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
contextType='notifications'
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
case 'poll':
return (
<StatusContainer
containerId={notification.get('id')}
hidden={hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='poll'
muted
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
contextType='notifications'
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
return this.renderReblog(notification);
case 'status':
return this.renderStatus(notification);
case 'update':
return (
<StatusContainer
containerId={notification.get('id')}
hidden={hidden}
id={notification.get('status')}
account={notification.get('account')}
prepend='update'
muted
notification={notification}
onMoveDown={onMoveDown}
onMoveUp={onMoveUp}
onMention={onMention}
contextType='notifications'
getScrollPosition={getScrollPosition}
updateScrollBottom={updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
onUnmount={this.props.onUnmount}
withDismiss
unread={this.props.unread}
/>
);
default:
return null;
return this.renderUpdate(notification);
case 'poll':
return this.renderPoll(notification);
case 'admin.sign_up':
return this.renderAdminSignUp(notification, account, link);
case 'admin.report':
return this.renderAdminReport(notification, account, link);
}
return null;
}
}
export default withRouter(injectIntl(Notification));

15
app/javascript/flavours/glitch/features/notifications/containers/admin_report_container.js
View File

@ -1,15 +0,0 @@
import { connect } from 'react-redux';
import { makeGetReport } from 'flavours/glitch/selectors';
import AdminReport from '../components/admin_report';
const mapStateToProps = (state, { notification }) => {
const getReport = makeGetReport();
return {
report: notification.get('report') ? getReport(state, notification.get('report'), notification.getIn(['report', 'target_account', 'id'])) : null,
};
};
export default connect(mapStateToProps)(AdminReport);

56
app/javascript/flavours/glitch/features/notifications/containers/notification_container.js
View File

@ -1,24 +1,62 @@
import { connect } from 'react-redux';
import { mentionCompose } from 'flavours/glitch/actions/compose';
import { makeGetNotification } from 'flavours/glitch/selectors';
import { initBoostModal } from '../../../actions/boosts';
import { mentionCompose } from '../../../actions/compose';
import {
reblog,
favourite,
unreblog,
unfavourite,
} from '../../../actions/interactions';
import { boostModal } from '../../../initial_state';
import { makeGetNotification, makeGetStatus, makeGetReport } from '../../../selectors';
import Notification from '../components/notification';
const makeMapStateToProps = () => {
const getNotification = makeGetNotification();
const getStatus = makeGetStatus();
const getReport = makeGetReport();
const mapStateToProps = (state, props) => ({
notification: getNotification(state, props.notification, props.accountId),
notifCleaning: state.getIn(['notifications', 'cleaningMode']),
});
const mapStateToProps = (state, props) => {
const notification = getNotification(state, props.notification, props.accountId);
return {
notification: notification,
status: notification.get('status') ? getStatus(state, { id: notification.get('status'), contextType: 'notifications' }) : null,
report: notification.get('report') ? getReport(state, notification.get('report'), notification.getIn(['report', 'target_account', 'id'])) : null,
notifCleaning: state.getIn(['notifications', 'cleaningMode']),
};
};
return mapStateToProps;
};
const mapDispatchToProps = dispatch => ({
onMention: (account, history) => {
dispatch(mentionCompose(account, history));
onMention: (account, router) => {
dispatch(mentionCompose(account, router));
},
onModalReblog (status, privacy) {
dispatch(reblog(status, privacy));
},
onReblog (status, e) {
if (status.get('reblogged')) {
dispatch(unreblog(status));
} else {
if (e.shiftKey || !boostModal) {
this.onModalReblog(status);
} else {
dispatch(initBoostModal({ status, onReblog: this.onModalReblog }));
}
}
},
onFavourite (status) {
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
dispatch(favourite(status));
}
},
});