diff --git a/app/soapbox/features/admin/components/admin_nav.js b/app/soapbox/features/admin/components/admin_nav.js index 6f5e69c95..1c0a17ea9 100644 --- a/app/soapbox/features/admin/components/admin_nav.js +++ b/app/soapbox/features/admin/components/admin_nav.js @@ -33,10 +33,10 @@ class AdminNav extends React.PureComponent { - + - + {((instance.get('registrations') && instance.get('approval_required')) || approvalCount > 0) && ( diff --git a/app/soapbox/features/admin/reports.js b/app/soapbox/features/admin/reports.js new file mode 100644 index 000000000..85129c9ce --- /dev/null +++ b/app/soapbox/features/admin/reports.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { defineMessages, injectIntl } from 'react-intl'; +import { connect } from 'react-redux'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Column from '../ui/components/column'; +import ScrollableList from 'soapbox/components/scrollable_list'; +import { fetchReports } from 'soapbox/actions/admin'; + +const messages = defineMessages({ + heading: { id: 'column.admin.reports', defaultMessage: 'Reports' }, + emptyMessage: { id: 'admin.reports.empty_message', defaultMessage: 'There are no open reports. When a user reports a post, it will show up here.' }, +}); + +const mapStateToProps = state => { + const ids = state.getIn(['admin', 'openReports']); + return { + reports: ids.toList().map(id => state.getIn(['admin', 'reports', id])), + }; +}; + +export default @connect(mapStateToProps) +@injectIntl +class Reports extends ImmutablePureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + reports: ImmutablePropTypes.list.isRequired, + }; + + state = { + isLoading: true, + } + + componentDidMount() { + const { dispatch } = this.props; + dispatch(fetchReports()) + .then(() => this.setState({ isLoading: false })) + .catch(() => {}); + } + + render() { + const { intl, reports } = this.props; + const { isLoading } = this.state; + const showLoading = isLoading && reports.count() === 0; + + return ( + + + {reports.map(report => ( +
+ {report.get('id')} +
+ ))} +
+
+ ); + } + +} diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 806f56bfe..59c36c831 100644 --- a/app/soapbox/features/ui/index.js +++ b/app/soapbox/features/ui/index.js @@ -89,6 +89,7 @@ import { ServerInfo, Dashboard, AwaitingApproval, + Reports, } from './util/async-components'; // Dummy import, to make sure that ends up in the application bundle. @@ -280,6 +281,7 @@ class SwitchingColumnsArea extends React.PureComponent { + diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 6e313b4d8..1e9cc7550 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -225,3 +225,7 @@ export function Dashboard() { export function AwaitingApproval() { return import(/* webpackChunkName: "features/admin/awaiting_approval" */'../../admin/awaiting_approval'); } + +export function Reports() { + return import(/* webpackChunkName: "features/admin/reports" */'../../admin/reports'); +}