From 5a703bbf5028c5e5a7ba3a3be531a90bd5f3bf55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 28 Sep 2022 22:57:25 +0200
Subject: [PATCH] TS/FC: Migrations page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/migration/index.js  | 119 ---------------------
 app/soapbox/features/migration/index.tsx | 125 +++++++++++++++++++++++
 2 files changed, 125 insertions(+), 119 deletions(-)
 delete mode 100644 app/soapbox/features/migration/index.js
 create mode 100644 app/soapbox/features/migration/index.tsx

diff --git a/app/soapbox/features/migration/index.js b/app/soapbox/features/migration/index.js
deleted file mode 100644
index b323c833c..000000000
--- a/app/soapbox/features/migration/index.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import { moveAccount } from 'soapbox/actions/security';
-import snackbar from 'soapbox/actions/snackbar';
-// import Column from 'soapbox/features/ui/components/column';
-import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
-
-const messages = defineMessages({
-  heading: { id: 'column.migration', defaultMessage: 'Account migration' },
-  submit: { id: 'migration.submit', defaultMessage: 'Move followers' },
-  moveAccountSuccess: { id: 'migration.move_account.success', defaultMessage: 'Account successfully moved.' },
-  moveAccountFail: { id: 'migration.move_account.fail', defaultMessage: 'Account migration failed.' },
-  acctFieldLabel: { id: 'migration.fields.acct.label', defaultMessage: 'Handle of the new account' },
-  acctFieldPlaceholder: { id: 'migration.fields.acct.placeholder', defaultMessage: 'username@domain' },
-  currentPasswordFieldLabel: { id: 'migration.fields.confirm_password.label', defaultMessage: 'Current password' },
-});
-
-export default @connect()
-@injectIntl
-class Migration extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  state = {
-    targetAccount: '',
-    password: '',
-    isLoading: false,
-  }
-
-  handleInputChange = e => {
-    this.setState({ [e.target.name]: e.target.value });
-  }
-
-  clearForm = () => {
-    this.setState({ targetAccount: '', password: '' });
-  }
-
-  handleSubmit = e => {
-    const { targetAccount, password } = this.state;
-    const { dispatch, intl } = this.props;
-    this.setState({ isLoading: true });
-    return dispatch(moveAccount(targetAccount, password)).then(() => {
-      this.clearForm();
-      dispatch(snackbar.success(intl.formatMessage(messages.moveAccountSuccess)));
-    }).catch(error => {
-      dispatch(snackbar.error(intl.formatMessage(messages.moveAccountFail)));
-    }).then(() => {
-      this.setState({ isLoading: false });
-    });
-  }
-
-  render() {
-    const { intl } = this.props;
-
-    return (
-      <Column label={intl.formatMessage(messages.heading)}>
-        <Form onSubmit={this.handleSubmit}>
-          <Text theme='muted'>
-            <FormattedMessage
-              id='migration.hint'
-              defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.'
-              values={{
-                link: (
-                  <Link
-                    className='hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500'
-                    to='/settings/aliases'
-                  >
-                    <FormattedMessage
-                      id='migration.hint.link'
-                      defaultMessage='create an account alias'
-                    />
-                  </Link>
-                ),
-              }}
-            />
-          </Text>
-          <FormGroup
-            labelText={intl.formatMessage(messages.acctFieldLabel)}
-          >
-            <Input
-              name='targetAccount'
-              placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
-              onChange={this.handleInputChange}
-              value={this.state.targetAccount}
-              required
-            />
-          </FormGroup>
-          <FormGroup
-            labelText={intl.formatMessage(messages.currentPasswordFieldLabel)}
-          >
-            <Input
-              type='password'
-              name='password'
-              onChange={this.handleInputChange}
-              value={this.state.password}
-              required
-            />
-          </FormGroup>
-          <FormActions>
-            <Button
-              theme='primary'
-              text={intl.formatMessage(messages.submit)}
-              onClick={this.handleSubmit}
-            />
-          </FormActions>
-        </Form>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/migration/index.tsx b/app/soapbox/features/migration/index.tsx
new file mode 100644
index 000000000..d84e05576
--- /dev/null
+++ b/app/soapbox/features/migration/index.tsx
@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { moveAccount } from 'soapbox/actions/security';
+import snackbar from 'soapbox/actions/snackbar';
+import { Button, Column, Form, FormActions, FormGroup, Input, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  heading: { id: 'column.migration', defaultMessage: 'Account migration' },
+  submit: { id: 'migration.submit', defaultMessage: 'Move followers' },
+  moveAccountSuccess: { id: 'migration.move_account.success', defaultMessage: 'Account successfully moved.' },
+  moveAccountFail: { id: 'migration.move_account.fail', defaultMessage: 'Account migration failed.' },
+  moveAccountFailCooldownPeriod: { id: 'migration.move_account.fail.cooldown_period', defaultMessage: 'You have moved your account too recently. Please try again later.' },
+  acctFieldLabel: { id: 'migration.fields.acct.label', defaultMessage: 'Handle of the new account' },
+  acctFieldPlaceholder: { id: 'migration.fields.acct.placeholder', defaultMessage: 'username@domain' },
+  currentPasswordFieldLabel: { id: 'migration.fields.confirm_password.label', defaultMessage: 'Current password' },
+});
+
+const Migration = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const cooldownPeriod = useAppSelector((state) => state.instance.pleroma.getIn(['metadata', 'migration_cooldown_period'])) as number | undefined;
+
+  const [targetAccount, setTargetAccount] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = e => {
+    if (e.target.name === 'password') setPassword(e.target.value);
+    else setTargetAccount(e.target.value);
+  };
+
+  const clearForm = () => {
+    setTargetAccount('');
+    setPassword('');
+  };
+
+  const handleSubmit: React.FormEventHandler = e => {
+    setIsLoading(true);
+    return dispatch(moveAccount(targetAccount, password)).then(() => {
+      clearForm();
+      dispatch(snackbar.success(intl.formatMessage(messages.moveAccountSuccess)));
+    }).catch(error => {
+      let message = intl.formatMessage(messages.moveAccountFail);
+
+      const errorMessage = (error.response?.data)?.error;
+      if (errorMessage === 'You are within cooldown period.') {
+        message = intl.formatMessage(messages.moveAccountFailCooldownPeriod);
+      }
+
+      dispatch(snackbar.error(message));
+    }).then(() => {
+      setIsLoading(false);
+    });
+  };
+
+  return (
+    <Column label={intl.formatMessage(messages.heading)}>
+      <Form onSubmit={handleSubmit}>
+        <Text theme='muted'>
+          <FormattedMessage
+            id='migration.hint'
+            defaultMessage='This will move your followers to the new account. No other data will be moved. To perform migration, you need to {link} on your new account first.'
+            values={{
+              link: (
+                <Link
+                  className='hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500'
+                  to='/settings/aliases'
+                >
+                  <FormattedMessage
+                    id='migration.hint.link'
+                    defaultMessage='create an account alias'
+                  />
+                </Link>
+              ),
+            }}
+          />
+          {!!cooldownPeriod && (<>
+            {' '}
+            <FormattedMessage
+              id='migration.hint.cooldown_period'
+              defaultMessage='If you migrate your account, you will not be able to migrate your account for {cooldownPeriod, plural, one {one day} other {the next # days}}.'
+              values={{ cooldownPeriod }}
+            />
+          </>)}
+        </Text>
+        <FormGroup
+          labelText={intl.formatMessage(messages.acctFieldLabel)}
+        >
+          <Input
+            name='targetAccount'
+            placeholder={intl.formatMessage(messages.acctFieldPlaceholder)}
+            onChange={handleInputChange}
+            value={targetAccount}
+            required
+          />
+        </FormGroup>
+        <FormGroup
+          labelText={intl.formatMessage(messages.currentPasswordFieldLabel)}
+        >
+          <Input
+            type='password'
+            name='password'
+            onChange={handleInputChange}
+            value={password}
+            required
+          />
+        </FormGroup>
+        <FormActions>
+          <Button
+            theme='primary'
+            text={intl.formatMessage(messages.submit)}
+            onClick={handleSubmit}
+            disabled={isLoading}
+          />
+        </FormActions>
+      </Form>
+    </Column>
+  );
+};
+
+export default Migration;