ImportData: allow importing Blocks

app/soapbox/actions/import_data.js

@@ -5,6 +5,14 @@ export const IMPORT_FOLLOWS_REQUEST = 'IMPORT_FOLLOWS_REQUEST';
 export const IMPORT_FOLLOWS_SUCCESS = 'IMPORT_FOLLOWS_SUCCESS';
 export const IMPORT_FOLLOWS_FAIL    = 'IMPORT_FOLLOWS_FAIL';
 
+export const IMPORT_BLOCKS_REQUEST = 'IMPORT_BLOCKS_REQUEST';
+export const IMPORT_BLOCKS_SUCCESS = 'IMPORT_BLOCKS_SUCCESS';
+export const IMPORT_BLOCKS_FAIL    = 'IMPORT_BLOCKS_FAIL';
+
+export const IMPORT_MUTES_REQUEST = 'IMPORT_MUTES_REQUEST';
+export const IMPORT_MUTES_SUCCESS = 'IMPORT_MUTES_SUCCESS';
+export const IMPORT_MUTES_FAIL    = 'IMPORT_MUTES_FAIL';
+
 export function importFollows(params) {
   return (dispatch, getState) => {
     dispatch({ type: IMPORT_FOLLOWS_REQUEST });
@@ -18,3 +26,31 @@ export function importFollows(params) {
       });
   };
 }
+
+export function importBlocks(params) {
+  return (dispatch, getState) => {
+    dispatch({ type: IMPORT_BLOCKS_REQUEST });
+    return api(getState)
+      .post('/api/pleroma/blocks_import', params)
+      .then(response => {
+        dispatch(showAlert('', 'Blocks imported successfully'));
+        dispatch({ type: IMPORT_BLOCKS_SUCCESS, config: response.data });
+      }).catch(error => {
+        dispatch({ type: IMPORT_BLOCKS_FAIL, error });
+      });
+  };
+}
+
+export function importMutes(params) {
+  return (dispatch, getState) => {
+    dispatch({ type: IMPORT_MUTES_REQUEST });
+    return api(getState)
+      .post('/api/pleroma/mutes_import', params)
+      .then(response => {
+        dispatch(showAlert('', 'Mutes imported successfully'));
+        dispatch({ type: IMPORT_MUTES_SUCCESS, config: response.data });
+      }).catch(error => {
+        dispatch({ type: IMPORT_MUTES_FAIL, error });
+      });
+  };
+}

app/soapbox/features/import_data/components/csv_importer.js

@@ -0,0 +1,77 @@
+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,
+  FieldsGroup,
+  FileChooserCSV,
+} from 'soapbox/features/forms';
+
+export default @connect()
+@injectIntl
+class CSVImporter extends ImmutablePureComponent {
+
+  static propTypes = {
+    action: PropTypes.func.isRequired,
+    messages: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    file: null,
+    isLoading: false,
+  }
+
+  handleSubmit = (event) => {
+    const { dispatch, action } = this.props;
+
+    let params = new FormData();
+    params.append('list', this.state.file);
+
+    this.setState({ isLoading: true });
+    dispatch(action(params)).then(() => {
+      this.setState({ isLoading: false });
+    }).catch((error) => {
+      this.setState({ isLoading: false });
+    });
+
+    event.preventDefault();
+  }
+
+  handleFileChange = e => {
+    const [file] = e.target.files || [];
+    this.setState({ file });
+  }
+
+  render() {
+    const { intl, messages } = this.props;
+
+    return (
+      <SimpleForm onSubmit={this.handleSubmit}>
+        <fieldset disabled={this.state.isLoading}>
+          <FieldsGroup>
+            <div className='fields-row file-picker'>
+              <div className='fields-row__column fields-group fields-row__column-6'>
+                <FileChooserCSV
+                  label={intl.formatMessage(messages.input_label)}
+                  hint={intl.formatMessage(messages.input_hint)}
+                  onChange={this.handleFileChange}
+                  required
+                />
+              </div>
+            </div>
+          </FieldsGroup>
+        </fieldset>
+        <div className='actions'>
+          <button name='button' type='submit' className='btn button button-primary'>
+            {intl.formatMessage(messages.submit)}
+          </button>
+        </div>
+      </SimpleForm>
+    );
+  }
+
+}

app/soapbox/features/import_data/index.js

@@ -1,82 +1,54 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import Column from '../ui/components/column';
 import {
-  SimpleForm,
+  importFollows,
-  FieldsGroup,
+  importBlocks,
-  FileChooserCSV,
+  // importMutes,
-} from 'soapbox/features/forms';
+} from 'soapbox/actions/import_data';
-import { importFollows } from 'soapbox/actions/import_data';
+import CSVImporter from './components/csv_importer';
 
 const messages = defineMessages({
   heading: { id: 'column.import_data', defaultMessage: 'Import data' },
+  submit: { id: 'import_data.actions.import', defaultMessage: 'Import' },
 });
 
-export default @connect()
+const followMessages = defineMessages({
-@injectIntl
+  input_label: { id: 'import_data.follows_label', defaultMessage: 'Follows' },
+  input_hint: { id: 'import_data.hints.follows', defaultMessage: 'CSV file containing a list of followed accounts' },
+  submit: { id: 'import_data.actions.import_follows', defaultMessage: 'Import follows' },
+});
+
+const blockMessages = defineMessages({
+  input_label: { id: 'import_data.blocks_label', defaultMessage: 'Blocks' },
+  input_hint: { id: 'import_data.hints.blocks', defaultMessage: 'CSV file containing a list of blocked accounts' },
+  submit: { id: 'import_data.actions.import_blocks', defaultMessage: 'Import blocks' },
+});
+
+// Not yet supported by Pleroma stable, in develop branch
+// const muteMessages = defineMessages({
+//   input_label: { id: 'import_data.mutes_label', defaultMessage: 'Mutes' },
+//   input_hint: { id: 'import_data.hints.mutes', defaultMessage: 'CSV file containing a list of muted accounts' },
+//   submit: { id: 'import_data.actions.import_mutes', defaultMessage: 'Import mutes' },
+// });
+
+export default @injectIntl
 class ImportData extends ImmutablePureComponent {
 
   static propTypes = {
-    dispatch: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
 
-  state = {
-    followsCSV: null,
-    isLoading: false,
-  }
-
-  handleSubmit = (event) => {
-    const { dispatch } = this.props;
-
-    let params = new FormData();
-    params.append('list', this.state.followsCSV);
-
-    this.setState({ isLoading: true });
-    dispatch(importFollows(params)).then(() => {
-      this.setState({ isLoading: false });
-    }).catch((error) => {
-      this.setState({ isLoading: false });
-    });
-
-    event.preventDefault();
-  }
-
-  handleFileChange = e => {
-    const [followsCSV] = e.target.files || [];
-    this.setState({ followsCSV });
-  }
-
   render() {
     const { intl } = this.props;
 
     return (
       <Column icon='cloud-upload' heading={intl.formatMessage(messages.heading)} backBtnSlim>
-        <SimpleForm onSubmit={this.handleSubmit}>
+        <CSVImporter action={importFollows} messages={followMessages} />
-          <fieldset disabled={this.state.isLoading}>
+        <CSVImporter action={importBlocks} messages={blockMessages} />
-            <FieldsGroup>
+        {/* <CSVImporter action={importMutes} messages={muteMessages} /> */}
-              <div className='fields-row file-picker'>
-                <div className='fields-row__column fields-group fields-row__column-6'>
-                  <FileChooserCSV
-                    label={<FormattedMessage id='import_data.follows_label' defaultMessage='Follows' />}
-                    name='follows'
-                    hint={<FormattedMessage id='import_data.hints.follows' defaultMessage='CSV file containing a list of followed accounts' />}
-                    onChange={this.handleFileChange}
-                    required
-                  />
-                </div>
-              </div>
-            </FieldsGroup>
-          </fieldset>
-          <div className='actions'>
-            <button name='button' type='submit' className='btn button button-primary'>
-              <FormattedMessage id='import_data.actions.import' defaultMessage='Import' />
-            </button>
-          </div>
-        </SimpleForm>
       </Column>
     );
   }