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');
+}