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 (
-
-
-
- );
- }
-
-}
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 = 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 (
+
+
+
+ );
+};
+
+export default Migration;