Export Follows, Blocks and Mutes as CSV Files

app/soapbox/features/export_data/components/csv_exporter.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import { SimpleForm } from 'soapbox/features/forms';
+
+export default @connect()
+@injectIntl
+class CSVExporter extends ImmutablePureComponent {
+
+  static propTypes = {
+    action: PropTypes.func.isRequired,
+    messages: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    isLoading: false,
+  }
+
+  handleClick = (event) => {
+    const { dispatch, action, intl } = this.props;
+
+    this.setState({ isLoading: true });
+    dispatch(action(intl)).then(() => {
+      this.setState({ isLoading: false });
+    }).catch((error) => {
+      this.setState({ isLoading: false });
+    });
+  }
+
+  render() {
+    const { intl, messages } = this.props;
+
+    return (
+      <SimpleForm>
+        <h2 className='export-title'>{intl.formatMessage(messages.input_label)}</h2>
+        <div>
+          <p className='export-hint hint'>{intl.formatMessage(messages.input_hint)}</p>
+          <button name='button' type='button' className='button button-primary' onClick={this.handleClick}>
+            {intl.formatMessage(messages.submit)}
+          </button>
+        </div>
+      </SimpleForm>
+    );
+  }
+
+}

app/soapbox/features/export_data/index.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import Column from '../ui/components/column';
+import {
+  exportFollows,
+  exportBlocks,
+  exportMutes,
+} from 'soapbox/actions/export_data';
+import CSVExporter from './components/csv_exporter';
+import { getFeatures } from 'soapbox/utils/features';
+
+const messages = defineMessages({
+  heading: { id: 'column.export_data', defaultMessage: 'Export data' },
+  submit: { id: 'export_data.actions.export', defaultMessage: 'Export' },
+});
+
+const followMessages = defineMessages({
+  input_label: { id: 'export_data.follows_label', defaultMessage: 'Follows' },
+  input_hint: { id: 'export_data.hints.follows', defaultMessage: 'Get a CSV file containing a list of followed accounts' },
+  submit: { id: 'export_data.actions.export_follows', defaultMessage: 'Export follows' },
+});
+
+const blockMessages = defineMessages({
+  input_label: { id: 'export_data.blocks_label', defaultMessage: 'Blocks' },
+  input_hint: { id: 'export_data.hints.blocks', defaultMessage: 'Get a CSV file containing a list of blocked accounts' },
+  submit: { id: 'export_data.actions.export_blocks', defaultMessage: 'Export blocks' },
+});
+
+const muteMessages = defineMessages({
+  input_label: { id: 'export_data.mutes_label', defaultMessage: 'Mutes' },
+  input_hint: { id: 'export_data.hints.mutes', defaultMessage: 'Get a CSV file containing a list of muted accounts' },
+  submit: { id: 'export_data.actions.export_mutes', defaultMessage: 'Export mutes' },
+});
+
+const mapStateToProps = state => ({
+  features: getFeatures(state.get('instance')),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class ExportData extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    features: PropTypes.object,
+  };
+
+  render() {
+    const { intl } = this.props;
+
+    return (
+      <Column icon='cloud-download' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+        <CSVExporter action={exportFollows} messages={followMessages} />
+        <CSVExporter action={exportBlocks} messages={blockMessages} />
+        <CSVExporter action={exportMutes} messages={muteMessages} />
+      </Column>
+    );
+  }
+
+}