Rename files (5): _ -> -

app/soapbox/features/export-data/components/csv-exporter.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { MessageDescriptor, useIntl } from 'react-intl';
+
+import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+import { AppDispatch, RootState } from 'soapbox/store';
+
+interface ICSVExporter {
+  messages: {
+    input_label: MessageDescriptor,
+    input_hint: MessageDescriptor,
+    submit: MessageDescriptor,
+  },
+  action: () => (dispatch: AppDispatch, getState: () => RootState) => Promise<void>,
+}
+
+const CSVExporter: React.FC<ICSVExporter> = ({ messages, action }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick: React.MouseEventHandler = (event) => {
+    setIsLoading(true);
+    dispatch(action()).then(() => {
+      setIsLoading(false);
+    }).catch(() => {
+      setIsLoading(false);
+    });
+  };
+
+  return (
+    <Form>
+      <Text size='xl' weight='bold'>{intl.formatMessage(messages.input_label)}</Text>
+      <Text theme='muted'>{intl.formatMessage(messages.input_hint)}</Text>
+
+      <FormActions>
+        <Button theme='primary' onClick={handleClick} disabled={isLoading}>
+          {intl.formatMessage(messages.submit)}
+        </Button>
+      </FormActions>
+    </Form>
+  );
+};
+
+export default CSVExporter;

app/soapbox/features/export-data/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import {
+  exportFollows,
+  exportBlocks,
+  exportMutes,
+} from 'soapbox/actions/export_data';
+
+import Column from '../ui/components/column';
+
+import CSVExporter from './components/csv-exporter';
+
+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 ExportData = () => {
+  const intl = useIntl();
+
+  return (
+    <Column icon='cloud-download-alt' label={intl.formatMessage(messages.heading)}>
+      <CSVExporter action={exportFollows} messages={followMessages} />
+      <CSVExporter action={exportBlocks} messages={blockMessages} />
+      <CSVExporter action={exportMutes} messages={muteMessages} />
+    </Column>
+  );
+};
+
+export default ExportData;