Merge branch 'export-csv-data' into 'develop'

Export Follows, Blocks and Mutes as CSV Files

Closes #529

See merge request soapbox-pub/soapbox-fe!674

app/soapbox/actions/export_data.js

@@ -0,0 +1,102 @@
+import { defineMessages } from 'react-intl';
+import snackbar from 'soapbox/actions/snackbar';
+import api, { getLinks } from '../api';
+
+export const EXPORT_FOLLOWS_REQUEST = 'EXPORT_FOLLOWS_REQUEST';
+export const EXPORT_FOLLOWS_SUCCESS = 'EXPORT_FOLLOWS_SUCCESS';
+export const EXPORT_FOLLOWS_FAIL    = 'EXPORT_FOLLOWS_FAIL';
+
+export const EXPORT_BLOCKS_REQUEST = 'EXPORT_BLOCKS_REQUEST';
+export const EXPORT_BLOCKS_SUCCESS = 'EXPORT_BLOCKS_SUCCESS';
+export const EXPORT_BLOCKS_FAIL    = 'EXPORT_BLOCKS_FAIL';
+
+export const EXPORT_MUTES_REQUEST = 'EXPORT_MUTES_REQUEST';
+export const EXPORT_MUTES_SUCCESS = 'EXPORT_MUTES_SUCCESS';
+export const EXPORT_MUTES_FAIL    = 'EXPORT_MUTES_FAIL';
+
+const messages = defineMessages({
+  blocksSuccess: { id: 'export_data.success.blocks', defaultMessage: 'Blocks exported successfully' },
+  followersSuccess: { id: 'export_data.success.followers', defaultMessage: 'Followers exported successfully' },
+  mutesSuccess: { id: 'export_data.success.mutes', defaultMessage: 'Mutes exported successfully' },
+});
+
+function fileExport(content, fileName) {
+  const fileToDownload = document.createElement('a');
+
+  fileToDownload.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(content));
+  fileToDownload.setAttribute('download', fileName);
+  fileToDownload.style.display = 'none';
+  document.body.appendChild(fileToDownload);
+  fileToDownload.click();
+  document.body.removeChild(fileToDownload);
+}
+
+function listAccounts(state) {
+  return async apiResponse => {
+    const followings = apiResponse.data;
+    let accounts = [];
+    let next = getLinks(apiResponse).refs.find(link => link.rel === 'next');
+    while (next) {
+      apiResponse = await api(state).get(next.uri);
+      next = getLinks(apiResponse).refs.find(link => link.rel === 'next');
+      Array.prototype.push.apply(followings, apiResponse.data);
+    }
+
+    accounts = followings.map(account => account.fqn);
+    return [... new Set(accounts)];
+  };
+}
+
+export function exportFollows(intl) {
+  return (dispatch, getState) => {
+    dispatch({ type: EXPORT_FOLLOWS_REQUEST });
+    const me = getState().get('me');
+    return api(getState)
+      .get(`/api/v1/accounts/${me}/following?limit=40`)
+      .then(listAccounts(getState))
+      .then((followings) => {
+        followings = followings.map(fqn => fqn + ',true');
+        followings.unshift('Account address,Show boosts');
+        fileExport(followings.join('\n'), 'export_followings.csv');
+
+        dispatch(snackbar.success(intl.formatMessage(messages.followersSuccess)));
+        dispatch({ type: EXPORT_FOLLOWS_SUCCESS });
+      }).catch(error => {
+        dispatch({ type: EXPORT_FOLLOWS_FAIL, error });
+      });
+  };
+}
+
+export function exportBlocks(intl) {
+  return (dispatch, getState) => {
+    dispatch({ type: EXPORT_BLOCKS_REQUEST });
+    return api(getState)
+      .get('/api/v1/blocks?limit=40')
+      .then(listAccounts(getState))
+      .then((blocks) => {
+        fileExport(blocks.join('\n'), 'export_block.csv');
+
+        dispatch(snackbar.success(intl.formatMessage(messages.blocksSuccess)));
+        dispatch({ type: EXPORT_BLOCKS_SUCCESS });
+      }).catch(error => {
+        dispatch({ type: EXPORT_BLOCKS_FAIL, error });
+      });
+  };
+}
+
+export function exportMutes(intl) {
+  return (dispatch, getState) => {
+    dispatch({ type: EXPORT_MUTES_REQUEST });
+    return api(getState)
+      .get('/api/v1/mutes?limit=40')
+      .then(listAccounts(getState))
+      .then((mutes) => {
+        fileExport(mutes.join('\n'), 'export_mutes.csv');
+
+        dispatch(snackbar.success(intl.formatMessage(messages.mutesSuccess)));
+        dispatch({ type: EXPORT_MUTES_SUCCESS });
+      }).catch(error => {
+        dispatch({ type: EXPORT_MUTES_FAIL, error });
+      });
+  };
+}

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

app/soapbox/features/ui/components/link_footer.js

@@ -43,6 +43,7 @@ const LinkFooter = ({ onOpenHotkeys, account, federating, showAliases, onClickLo
         <li><Link to='/follow_requests'><FormattedMessage id='navigation_bar.follow_requests' defaultMessage='Follow requests' /></Link></li>
         {isAdmin(account) && <li><a href='/pleroma/admin'><FormattedMessage id='navigation_bar.admin_settings' defaultMessage='AdminFE' /></a></li>}
         {isAdmin(account) && <li><Link to='/soapbox/config'><FormattedMessage id='navigation_bar.soapbox_config' defaultMessage='Soapbox config' /></Link></li>}
+        <li><Link to='/settings/export'><FormattedMessage id='navigation_bar.export_data' defaultMessage='Export data' /></Link></li>
         <li><Link to='/settings/import'><FormattedMessage id='navigation_bar.import_data' defaultMessage='Import data' /></Link></li>
         {(federating && showAliases) && <li><Link to='/settings/aliases'><FormattedMessage id='navigation_bar.account_aliases' defaultMessage='Account aliases' /></Link></li>}
         <li><a href='#' onClick={onOpenHotkeys}><FormattedMessage id='navigation_bar.keyboard_shortcuts' defaultMessage='Hotkeys' /></a></li>

app/soapbox/features/ui/index.js

@@ -84,6 +84,7 @@ import {
   Preferences,
   EditProfile,
   SoapboxConfig,
+  ExportData,
   ImportData,
   Backups,
   PasswordReset,
@@ -268,6 +269,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <Redirect exact from='/settings' to='/settings/preferences' />
         <WrappedRoute path='/settings/preferences' page={DefaultPage} component={Preferences} content={children} />
         <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
+        <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />
         <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />
         <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />
         <WrappedRoute path='/backups' page={DefaultPage} component={Backups} content={children} />

app/soapbox/features/ui/util/async-components.js

@@ -186,6 +186,10 @@ export function SoapboxConfig() {
   return import(/* webpackChunkName: "features/soapbox_config" */'../../soapbox_config');
 }
 
+export function ExportData() {
+  return import(/* webpackChunkName: "features/export_data" */ '../../export_data');
+}
+
 export function ImportData() {
   return import(/* webpackChunkName: "features/import_data" */'../../import_data');
 }