[Glitch] Add notifications for new reports
Port 2936f42a14 to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
master
Eugen Rochko
Claire
parent
f218e633b4
commit
485b43ed7e
|
|
@ -103,6 +103,10 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
|
|||
dispatch(importFetchedStatus(notification.status));
|
||||
}
|
||||
|
||||
if (notification.report) {
|
||||
dispatch(importFetchedAccount(notification.report.target_account));
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: NOTIFICATIONS_UPDATE,
|
||||
notification,
|
||||
|
|
@ -146,6 +150,7 @@ const excludeTypesFromFilter = filter => {
|
|||
'status',
|
||||
'update',
|
||||
'admin.sign_up',
|
||||
'admin.report',
|
||||
]);
|
||||
|
||||
return allTypes.filterNot(item => item === filter).toJS();
|
||||
|
|
@ -191,6 +196,7 @@ export function expandNotifications({ maxId } = {}, done = noOp) {
|
|||
|
||||
dispatch(importFetchedAccounts(response.data.map(item => item.account)));
|
||||
dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status)));
|
||||
dispatch(importFetchedAccounts(response.data.filter(item => item.report).map(item => item.report.target_account)));
|
||||
|
||||
dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null, isLoadingMore, isLoadingRecent, isLoadingRecent && preferPendingItems));
|
||||
fetchRelatedRelationships(dispatch, response.data);
|
||||
|
|
|
|||
|
|
@ -140,8 +140,16 @@ export default class IconButton extends React.PureComponent {
|
|||
);
|
||||
|
||||
if (href) {
|
||||
contents = (
|
||||
<a href={href} target='_blank' rel='noopener noreferrer'>
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
aria-label={title}
|
||||
title={title}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className={classes}
|
||||
style={style}
|
||||
>
|
||||
{contents}
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,108 @@
|
|||
// Package imports.
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { HotKeys } from 'react-hotkeys';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// Our imports.
|
||||
import Permalink from 'flavours/glitch/components/permalink';
|
||||
import AccountContainer from 'flavours/glitch/containers/account_container';
|
||||
import NotificationOverlayContainer from '../containers/overlay_container';
|
||||
import Icon from 'flavours/glitch/components/icon';
|
||||
import Report from './report';
|
||||
|
||||
const messages = defineMessages({
|
||||
adminReport: { id: 'notification.admin.report', defaultMessage: '{name} reported {target}' },
|
||||
});
|
||||
|
||||
export default 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,
|
||||
};
|
||||
|
||||
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 { notification } = this.props;
|
||||
this.context.router.history.push(`/@${notification.getIn(['account', 'acct'])}`);
|
||||
}
|
||||
|
||||
handleMention = e => {
|
||||
e.preventDefault();
|
||||
|
||||
const { notification, onMention } = this.props;
|
||||
onMention(notification.get('account'), this.context.router.history);
|
||||
}
|
||||
|
||||
getHandlers () {
|
||||
return {
|
||||
moveUp: this.handleMoveUp,
|
||||
moveDown: this.handleMoveDown,
|
||||
open: this.handleOpen,
|
||||
openProfile: this.handleOpenProfile,
|
||||
mention: this.handleMention,
|
||||
reply: this.handleMention,
|
||||
};
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, account, notification, unread, report } = 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>
|
||||
);
|
||||
|
||||
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'>
|
||||
<div className='notification__favourite-icon-wrapper'>
|
||||
<Icon id='flag' fixedWidth />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -179,6 +179,19 @@ export default class ColumnSettings extends React.PureComponent {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isStaff && (
|
||||
<div role='group' aria-labelledby='notifications-admin-report'>
|
||||
<span id='notifications-status' className='column-settings__section'><FormattedMessage id='notifications.column_settings.admin.report' defaultMessage='New reports:' /></span>
|
||||
|
||||
<div className='column-settings__pillbar'>
|
||||
<PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'admin.report']} onChange={onChange} label={alertStr} />
|
||||
{showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'admin.report']} onChange={this.onPushChange} label={pushStr} />}
|
||||
<PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'admin.report']} onChange={onChange} label={showStr} />
|
||||
<PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'admin.report']} onChange={onChange} label={soundStr} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import StatusContainer from 'flavours/glitch/containers/status_container';
|
|||
import NotificationFollow from './follow';
|
||||
import NotificationFollowRequestContainer from '../containers/follow_request_container';
|
||||
import NotificationAdminSignup from './admin_signup';
|
||||
import NotificationAdminReportContainer from '../containers/admin_report_container';
|
||||
|
||||
export default class Notification extends ImmutablePureComponent {
|
||||
|
||||
|
|
@ -77,6 +78,19 @@ export default class Notification extends ImmutablePureComponent {
|
|||
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':
|
||||
return (
|
||||
<StatusContainer
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import AvatarOverlay from 'flavours/glitch/components/avatar_overlay';
|
||||
import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
|
||||
|
||||
const messages = defineMessages({
|
||||
openReport: { id: 'report_notification.open', defaultMessage: 'Open report' },
|
||||
other: { id: 'report_notification.categories.other', defaultMessage: 'Other' },
|
||||
spam: { id: 'report_notification.categories.spam', defaultMessage: 'Spam' },
|
||||
violation: { id: 'report_notification.categories.violation', defaultMessage: 'Rule violation' },
|
||||
});
|
||||
|
||||
export default @injectIntl
|
||||
class Report extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map.isRequired,
|
||||
report: ImmutablePropTypes.map.isRequired,
|
||||
hidden: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { intl, hidden, report, account } = this.props;
|
||||
|
||||
if (!report) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (hidden) {
|
||||
return (
|
||||
<Fragment>
|
||||
{report.get('id')}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='notification__report'>
|
||||
<div className='notification__report__avatar'>
|
||||
<AvatarOverlay account={report.get('target_account')} friend={account} />
|
||||
</div>
|
||||
|
||||
<div className='notification__report__details'>
|
||||
<div>
|
||||
<RelativeTimestamp timestamp={report.get('created_at')} short={false} /> · <FormattedMessage id='report_notification.attached_statuses' defaultMessage='{count, plural, one {{count} post} other {{count} posts}} attached' values={{ count: report.get('status_ids').size }} />
|
||||
<br />
|
||||
<strong>{intl.formatMessage(messages[report.get('category')])}</strong>
|
||||
</div>
|
||||
|
||||
<div className='notification__report__actions'>
|
||||
<a href={`/admin/reports/${report.get('id')}`} className='button' target='_blank' rel='noopener noreferrer'>{intl.formatMessage(messages.openReport)}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
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);
|
||||
|
|
@ -31,7 +31,7 @@ import {
|
|||
} from 'flavours/glitch/actions/markers';
|
||||
import { DOMAIN_BLOCK_SUCCESS } from 'flavours/glitch/actions/domain_blocks';
|
||||
import { TIMELINE_DELETE, TIMELINE_DISCONNECT } from 'flavours/glitch/actions/timelines';
|
||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import { fromJS, Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||
import compareId from 'flavours/glitch/util/compare_id';
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
|
|
@ -58,6 +58,7 @@ const notificationToMap = (state, notification) => ImmutableMap({
|
|||
account: notification.account.id,
|
||||
markedForDelete: state.get('markNewForDelete'),
|
||||
status: notification.status ? notification.status.id : null,
|
||||
report: notification.report ? fromJS(notification.report) : null,
|
||||
});
|
||||
|
||||
const normalizeNotification = (state, notification, usePendingItems) => {
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ const initialState = ImmutableMap({
|
|||
status: false,
|
||||
update: false,
|
||||
'admin.sign_up': false,
|
||||
'admin.report': false,
|
||||
}),
|
||||
|
||||
quickFilter: ImmutableMap({
|
||||
|
|
@ -64,6 +65,7 @@ const initialState = ImmutableMap({
|
|||
status: true,
|
||||
update: true,
|
||||
'admin.sign_up': true,
|
||||
'admin.report': true,
|
||||
}),
|
||||
|
||||
sounds: ImmutableMap({
|
||||
|
|
@ -76,6 +78,7 @@ const initialState = ImmutableMap({
|
|||
status: true,
|
||||
update: true,
|
||||
'admin.sign_up': true,
|
||||
'admin.report': true,
|
||||
}),
|
||||
}),
|
||||
|
||||
|
|
|
|||
|
|
@ -171,14 +171,15 @@ export const getAlerts = createSelector([getAlertsBase], (base) => {
|
|||
return arr;
|
||||
});
|
||||
|
||||
export const makeGetNotification = () => {
|
||||
return createSelector([
|
||||
(_, base) => base,
|
||||
(state, _, accountId) => state.getIn(['accounts', accountId]),
|
||||
], (base, account) => {
|
||||
return base.set('account', account);
|
||||
});
|
||||
};
|
||||
export const makeGetNotification = () => createSelector([
|
||||
(_, base) => base,
|
||||
(state, _, accountId) => state.getIn(['accounts', accountId]),
|
||||
], (base, account) => base.set('account', account));
|
||||
|
||||
export const makeGetReport = () => createSelector([
|
||||
(_, base) => base,
|
||||
(state, _, targetAccountId) => state.getIn(['accounts', targetAccountId]),
|
||||
], (base, targetAccount) => base.set('target_account', targetAccount));
|
||||
|
||||
export const getAccountGallery = createSelector([
|
||||
(state, id) => state.getIn(['timelines', `account:${id}:media`, 'items'], ImmutableList()),
|
||||
|
|
|
|||
|
|
@ -105,6 +105,8 @@
|
|||
position: relative;
|
||||
@include avatar-size(48px);
|
||||
|
||||
position: relative;
|
||||
|
||||
&-base {
|
||||
@include avatar-radius();
|
||||
@include avatar-size(36px);
|
||||
|
|
@ -243,6 +245,33 @@
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.notification__report {
|
||||
padding: 8px 10px;
|
||||
padding-left: 68px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
min-height: 54px;
|
||||
|
||||
&__details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $darker-text-color;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification__message {
|
||||
margin-left: 42px;
|
||||
padding: 8px 0 0 26px;
|
||||
|
|
|
|||
|
|
@ -154,6 +154,16 @@
|
|||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.notification__report {
|
||||
padding: 15px 15px 15px (48px + 15px * 2);
|
||||
min-height: 48px + 2px;
|
||||
|
||||
&__avatar {
|
||||
left: 15px;
|
||||
top: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 15px;
|
||||
min-height: 48px + 2px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue