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
This commit is contained in:
Claire
GitHub
parent
8a64406d34
commit
9451997fa8
7 changed files with 433 additions and 642 deletions
|
|
@ -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);
|
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -1,26 +1,16 @@
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { withRouter } from 'react-router-dom';
|
|
||||||
|
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
|
||||||
import { HotKeys } from 'react-hotkeys';
|
|
||||||
|
|
||||||
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
|
import CheckIcon from '@/material-icons/400-24px/check.svg?react';
|
||||||
import CloseIcon from '@/material-icons/400-24px/close.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 { Avatar } from 'flavours/glitch/components/avatar';
|
||||||
import { DisplayName } from 'flavours/glitch/components/display_name';
|
import { DisplayName } from 'flavours/glitch/components/display_name';
|
||||||
import { Icon } from 'flavours/glitch/components/icon';
|
|
||||||
import { IconButton } from 'flavours/glitch/components/icon_button';
|
import { IconButton } from 'flavours/glitch/components/icon_button';
|
||||||
import { Permalink } from 'flavours/glitch/components/permalink';
|
import { Permalink } from 'flavours/glitch/components/permalink';
|
||||||
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
|
|
||||||
|
|
||||||
import NotificationOverlayContainer from '../containers/overlay_container';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
|
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
|
||||||
|
|
@ -34,50 +24,10 @@ class FollowRequest extends ImmutablePureComponent {
|
||||||
onAuthorize: PropTypes.func.isRequired,
|
onAuthorize: PropTypes.func.isRequired,
|
||||||
onReject: PropTypes.func.isRequired,
|
onReject: PropTypes.func.isRequired,
|
||||||
intl: PropTypes.object.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 () {
|
render () {
|
||||||
const { intl, hidden, account, onAuthorize, onReject, notification, unread } = this.props;
|
const { intl, hidden, account, onAuthorize, onReject } = this.props;
|
||||||
|
|
||||||
if (!account) {
|
if (!account) {
|
||||||
return <div />;
|
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 (
|
return (
|
||||||
<HotKeys handlers={this.getHandlers()}>
|
<div className='account'>
|
||||||
<div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0}>
|
<div className='account__wrapper'>
|
||||||
<div className='notification__message'>
|
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
|
||||||
<Icon id='user' icon={PersonIcon} />
|
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||||||
|
<DisplayName account={account} />
|
||||||
|
</Permalink>
|
||||||
|
|
||||||
<FormattedMessage
|
<div className='account__relationship'>
|
||||||
id='notification.follow_request'
|
<IconButton title={intl.formatMessage(messages.authorize)} icon='check' iconComponent={CheckIcon} onClick={onAuthorize} />
|
||||||
defaultMessage='{name} has requested to follow you'
|
<IconButton title={intl.formatMessage(messages.reject)} icon='times' iconComponent={CloseIcon} onClick={onReject} />
|
||||||
values={{ name: link }}
|
|
||||||
/>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</HotKeys>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default withRouter(injectIntl(FollowRequest));
|
export default injectIntl(FollowRequest);
|
||||||
|
|
|
||||||
|
|
@ -1,236 +1,410 @@
|
||||||
// Package imports.
|
|
||||||
import PropTypes from 'prop-types';
|
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 ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
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 StatusContainer from 'flavours/glitch/containers/status_container';
|
||||||
|
import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
|
||||||
|
|
||||||
import NotificationAdminReportContainer from '../containers/admin_report_container';
|
import FollowRequestContainer from '../containers/follow_request_container';
|
||||||
import NotificationFollowRequestContainer from '../containers/follow_request_container';
|
import NotificationOverlayContainer from '../containers/overlay_container';
|
||||||
|
|
||||||
import NotificationAdminSignup from './admin_signup';
|
import Report from './report';
|
||||||
import NotificationFollow from './follow';
|
|
||||||
|
|
||||||
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 = {
|
static propTypes = {
|
||||||
notification: ImmutablePropTypes.map.isRequired,
|
notification: ImmutablePropTypes.map.isRequired,
|
||||||
hidden: PropTypes.bool,
|
hidden: PropTypes.bool,
|
||||||
onMoveUp: PropTypes.func.isRequired,
|
onMoveUp: PropTypes.func.isRequired,
|
||||||
onMoveDown: PropTypes.func.isRequired,
|
onMoveDown: PropTypes.func.isRequired,
|
||||||
onMention: 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,
|
getScrollPosition: PropTypes.func,
|
||||||
updateScrollBottom: PropTypes.func,
|
updateScrollBottom: PropTypes.func,
|
||||||
cacheMediaWidth: PropTypes.func,
|
cacheMediaWidth: PropTypes.func,
|
||||||
cachedMediaWidth: PropTypes.number,
|
cachedMediaWidth: PropTypes.number,
|
||||||
onUnmount: PropTypes.func,
|
onUnmount: PropTypes.func,
|
||||||
unread: PropTypes.bool,
|
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 () {
|
render () {
|
||||||
const {
|
const { notification } = this.props;
|
||||||
hidden,
|
const account = notification.get('account');
|
||||||
notification,
|
const displayNameHtml = { __html: account.get('display_name_html') };
|
||||||
onMoveDown,
|
const link = (
|
||||||
onMoveUp,
|
<bdi>
|
||||||
onMention,
|
<Permalink
|
||||||
getScrollPosition,
|
className='notification__display-name'
|
||||||
updateScrollBottom,
|
href={`/@${account.get('acct')}`}
|
||||||
} = this.props;
|
title={account.get('acct')}
|
||||||
|
to={`/@${account.get('acct')}`}
|
||||||
|
dangerouslySetInnerHTML={displayNameHtml}
|
||||||
|
/>
|
||||||
|
</bdi>
|
||||||
|
);
|
||||||
|
|
||||||
switch(notification.get('type')) {
|
switch(notification.get('type')) {
|
||||||
case 'follow':
|
case 'follow':
|
||||||
return (
|
return this.renderFollow(notification, account, link);
|
||||||
<NotificationFollow
|
|
||||||
hidden={hidden}
|
|
||||||
id={notification.get('id')}
|
|
||||||
account={notification.get('account')}
|
|
||||||
notification={notification}
|
|
||||||
onMoveDown={onMoveDown}
|
|
||||||
onMoveUp={onMoveUp}
|
|
||||||
onMention={onMention}
|
|
||||||
unread={this.props.unread}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case 'follow_request':
|
case 'follow_request':
|
||||||
return (
|
return this.renderFollowRequest(notification, account, link);
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case 'mention':
|
case 'mention':
|
||||||
return (
|
return this.renderMention(notification);
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case 'favourite':
|
case 'favourite':
|
||||||
return (
|
return this.renderFavourite(notification);
|
||||||
<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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case 'reblog':
|
case 'reblog':
|
||||||
return (
|
return this.renderReblog(notification);
|
||||||
<StatusContainer
|
case 'status':
|
||||||
containerId={notification.get('id')}
|
return this.renderStatus(notification);
|
||||||
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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case 'update':
|
case 'update':
|
||||||
return (
|
return this.renderUpdate(notification);
|
||||||
<StatusContainer
|
case 'poll':
|
||||||
containerId={notification.get('id')}
|
return this.renderPoll(notification);
|
||||||
hidden={hidden}
|
case 'admin.sign_up':
|
||||||
id={notification.get('status')}
|
return this.renderAdminSignUp(notification, account, link);
|
||||||
account={notification.get('account')}
|
case 'admin.report':
|
||||||
prepend='update'
|
return this.renderAdminReport(notification, account, link);
|
||||||
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 null;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default withRouter(injectIntl(Notification));
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -1,24 +1,62 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
import { mentionCompose } from 'flavours/glitch/actions/compose';
|
import { initBoostModal } from '../../../actions/boosts';
|
||||||
import { makeGetNotification } from 'flavours/glitch/selectors';
|
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';
|
import Notification from '../components/notification';
|
||||||
|
|
||||||
const makeMapStateToProps = () => {
|
const makeMapStateToProps = () => {
|
||||||
const getNotification = makeGetNotification();
|
const getNotification = makeGetNotification();
|
||||||
|
const getStatus = makeGetStatus();
|
||||||
|
const getReport = makeGetReport();
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => ({
|
const mapStateToProps = (state, props) => {
|
||||||
notification: getNotification(state, props.notification, props.accountId),
|
const notification = getNotification(state, props.notification, props.accountId);
|
||||||
notifCleaning: state.getIn(['notifications', 'cleaningMode']),
|
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;
|
return mapStateToProps;
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
const mapDispatchToProps = dispatch => ({
|
||||||
onMention: (account, history) => {
|
onMention: (account, router) => {
|
||||||
dispatch(mentionCompose(account, history));
|
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));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue