Admin: reports boilerplate

app/soapbox/features/admin/components/admin_nav.js

@@ -33,10 +33,10 @@ class AdminNav extends React.PureComponent {
               <Icon id='tachometer' className='promo-panel-item__icon' fixedWidth />
               <FormattedMessage id='admin_nav.dashboard' defaultMessage='Dashboard' />
             </NavLink>
-            <a className='promo-panel-item' href='/pleroma/admin/#/reports/index' target='_blank'>
+            <NavLink className='promo-panel-item' to='/admin/reports'>
               <IconWithCounter icon='gavel' count={reportsCount} fixedWidth />
               <FormattedMessage id='admin_nav.reports' defaultMessage='Reports' />
-            </a>
+            </NavLink>
             {((instance.get('registrations') && instance.get('approval_required')) || approvalCount > 0) && (
               <NavLink className='promo-panel-item' to='/admin/approval'>
                 <IconWithCounter icon='user' count={approvalCount} fixedWidth />

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 (
+      <Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <ScrollableList isLoading={isLoading} showLoading={showLoading} scrollKey='admin-reports' emptyMessage={intl.formatMessage(messages.emptyMessage)}>
+          {reports.map(report => (
+            <div className='admin-report' key={report.get('id')}>
+              {report.get('id')}
+            </div>
+          ))}
+        </ScrollableList>
+      </Column>
+    );
+  }
+
+}

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 <Status /> ends up in the application bundle.
@@ -280,6 +281,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <Redirect from='/admin/dashboard' to='/admin' exact />
         <WrappedRoute path='/admin' page={AdminPage} component={Dashboard} content={children} exact />
         <WrappedRoute path='/admin/approval' page={AdminPage} component={AwaitingApproval} content={children} exact />
+        <WrappedRoute path='/admin/reports' page={AdminPage} component={Reports} content={children} exact />
         <WrappedRoute path='/info' layout={LAYOUT.EMPTY} component={ServerInfo} content={children} />
 
         <WrappedRoute layout={LAYOUT.EMPTY} component={GenericNotFound} content={children} />

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