Port 2936f42a14
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
parent
f218e633b4
commit
485b43ed7e
12 changed files with 279 additions and 11 deletions
@ -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> |
||||
); |
||||
} |
||||
|
||||
} |
@ -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); |
Loading…
Reference in new issue