Reports: convert to TSX

app/soapbox/features/admin/reports.js

@@ -1,76 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchReports } from 'soapbox/actions/admin';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import { makeGetReport } from 'soapbox/selectors';
-
-import Report from './components/report';
-
-const messages = defineMessages({
-  heading: { id: 'column.admin.reports', defaultMessage: 'Reports' },
-  modlog: { id: 'column.admin.reports.menu.moderation_log', defaultMessage: 'Moderation Log' },
-  emptyMessage: { id: 'admin.reports.empty_message', defaultMessage: 'There are no open reports. If a user gets reported, they will show up here.' },
-});
-
-const mapStateToProps = state => {
-  const getReport = makeGetReport();
-  const ids = state.getIn(['admin', 'openReports']);
-
-  return {
-    reports: ids.toList().map(id => getReport(state, id)),
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Reports extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    reports: ImmutablePropTypes.list.isRequired,
-  };
-
-  state = {
-    isLoading: true,
-  }
-
-  makeColumnMenu = () => {
-    const { intl } = this.props;
-
-    return [{
-      text: intl.formatMessage(messages.modlog),
-      to: '/admin/log',
-      icon: require('@tabler/icons/icons/list.svg'),
-    }];
-  }
-
-  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 (
-      <ScrollableList
-        isLoading={isLoading}
-        showLoading={showLoading}
-        scrollKey='admin-reports'
-        emptyMessage={intl.formatMessage(messages.emptyMessage)}
-      >
-        {reports.map(report => <Report report={report} key={report.get('id')} />)}
-      </ScrollableList>
-    );
-  }
-
-}

app/soapbox/features/admin/reports.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { fetchReports } from 'soapbox/actions/admin';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { makeGetReport } from 'soapbox/selectors';
+
+import Report from './components/report';
+
+const messages = defineMessages({
+  heading: { id: 'column.admin.reports', defaultMessage: 'Reports' },
+  modlog: { id: 'column.admin.reports.menu.moderation_log', defaultMessage: 'Moderation Log' },
+  emptyMessage: { id: 'admin.reports.empty_message', defaultMessage: 'There are no open reports. If a user gets reported, they will show up here.' },
+});
+
+const getReport = makeGetReport();
+
+const Reports: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const [isLoading, setLoading] = useState(true);
+
+  const reports = useAppSelector(state => {
+    const ids = state.admin.openReports;
+    return ids.toList().map(id => getReport(state, id));
+  });
+
+  useEffect(() => {
+    dispatch(fetchReports())
+      .then(() => setLoading(false))
+      .catch(() => {});
+  }, []);
+
+  const showLoading = isLoading && reports.count() === 0;
+
+  return (
+    <ScrollableList
+      isLoading={isLoading}
+      showLoading={showLoading}
+      scrollKey='admin-reports'
+      emptyMessage={intl.formatMessage(messages.emptyMessage)}
+    >
+      {reports.map(report => <Report report={report} key={report.get('id')} />)}
+    </ScrollableList>
+  );
+};
+
+export default Reports;