Start migration to react-final-form

Author: catarak

client/modules/User/actions.js

@@ -48,6 +48,13 @@ export function loginUserFailure(error) {
   };
 }
 
+export function setPreferences(preferences) {
+  return {
+    type: ActionTypes.SET_PREFERENCES,
+    preferences
+  };
+}
+
 export function validateAndLoginUser(previousPath, formProps, dispatch) {
   return new Promise((resolve, reject) => {
     loginUser(formProps)

client/modules/User/components/LoginForm.jsx

@@ -1,63 +1,91 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withTranslation } from 'react-i18next';
+import { Form, Field } from 'react-final-form';
+import { useDispatch, useSelector } from 'react-redux';
 import Button from '../../../common/Button';
 
-import { domOnlyProps } from '../../../utils/reduxFormUtils';
+import { validateLogin } from '../../../utils/reduxFormUtils';
+import { loginUser, loginUserSuccess, setPreferences } from '../actions';
+import { setLanguage } from '../../IDE/actions/preferences';
+import { justOpenedProject } from '../../IDE/actions/ide';
+
+function validateAndLoginUser() {
+  return new Promise((resolve, reject) => {
+    loginUser(formProps)
+      .then((response) => {
+        dispatch(loginUserSuccess(response.data));
+        dispatch(setPreferences(response.data.preferences));
+        dispatch(setLanguage(response.data.preferences.language, { persistPreference: false }));
+        dispatch(justOpenedProject());
+        browserHistory.push(props.previousPath);
+        resolve();
+      })
+      .catch(error =>
+        reject({ password: error.response.data.message, _error: 'Login failed!' })); // eslint-disable-line
+  });
+}
 
 function LoginForm(props) {
-  const {
-    fields: { email, password },
-    handleSubmit,
-    submitting,
-    pristine,
-  } = props;
   return (
-    <form
-      className="form"
-      onSubmit={handleSubmit(props.validateAndLoginUser.bind(this, props.previousPath))}
+    <Form
+      fields={['email', 'password']}
+      validate={validateLogin}
+      onSubmit={props.validateAndLoginUser.bind(this, props.previousPath)}
     >
-      <p className="form__field">
-        <label htmlFor="email" className="form__label">{props.t('LoginForm.UsernameOrEmail')}</label>
-        <input
-          className="form__input"
-          aria-label={props.t('LoginForm.UsernameOrEmailARIA')}
-          type="text"
-          id="email"
-          {...domOnlyProps(email)}
-        />
-        {email.touched && email.error && (
-          <span className="form-error">{email.error}</span>
-        )}
-      </p>
-      <p className="form__field">
-        <label htmlFor="password" className="form__label">{props.t('LoginForm.Password')}</label>
-        <input
-          className="form__input"
-          aria-label={props.t('LoginForm.PasswordARIA')}
-          type="password"
-          id="password"
-          {...domOnlyProps(password)}
-        />
-        {password.touched && password.error && (
-          <span className="form-error">{password.error}</span>
-        )}
-      </p>
-      <Button
-        type="submit"
-        disabled={submitting || pristine}
-      >{props.t('LoginForm.Submit')}
-      </Button>
-    </form>
+      {({
+        handleSubmit, pristine, submitting
+      }) => (
+        <form
+          className="form"
+          onSubmit={handleSubmit}
+        >
+          <Field name="email">
+            {field => (
+              <p className="form__field">
+                <label htmlFor="email" className="form__label">{props.t('LoginForm.UsernameOrEmail')}</label>
+                <input
+                  className="form__input"
+                  aria-label={props.t('LoginForm.UsernameOrEmailARIA')}
+                  type="text"
+                  id="email"
+                  {...field.input}
+                />
+                {field.meta.touched && field.meta.error && (
+                  <span className="form-error">{field.meta.error}</span>
+                )}
+              </p>
+            )}
+          </Field>
+          <Field name="password">
+            {field => (
+              <p className="form__field">
+                <label htmlFor="password" className="form__label">{props.t('LoginForm.Password')}</label>
+                <input
+                  className="form__input"
+                  aria-label={props.t('LoginForm.PasswordARIA')}
+                  type="password"
+                  id="password"
+                  {...field.input}
+                />
+                {field.meta.touched && field.meta.error && (
+                  <span className="form-error">{field.meta.error}</span>
+                )}
+              </p>
+            )}
+          </Field>
+          <Button
+            type="submit"
+            disabled={submitting || pristine}
+          >{props.t('LoginForm.Submit')}
+          </Button>
+        </form>
+      )}
+    </Form>
   );
 }
 
 LoginForm.propTypes = {
-  fields: PropTypes.shape({
-    email: PropTypes.object.isRequired, // eslint-disable-line
-    password: PropTypes.object.isRequired, // eslint-disable-line
-  }).isRequired,
-  handleSubmit: PropTypes.func.isRequired,
   validateAndLoginUser: PropTypes.func.isRequired,
   submitting: PropTypes.bool,
   pristine: PropTypes.bool,

client/modules/User/pages/LoginView.jsx

@@ -1,15 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { reduxForm } from 'redux-form';
+import { connect } from 'react-redux';
 import { Link, browserHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { withTranslation } from 'react-i18next';
 import { validateAndLoginUser } from '../actions';
 import LoginForm from '../components/LoginForm';
-import { validateLogin } from '../../../utils/reduxFormUtils';
 import SocialAuthButton from '../components/SocialAuthButton';
 import Nav from '../../../components/Nav';
-import ResponsiveForm from '../components/ResponsiveForm';
 
 class LoginView extends React.Component {
   constructor(props) {
@@ -88,8 +86,4 @@ LoginView.defaultProps = {
   },
 };
 
-export default withTranslation()(reduxForm({
-  form: 'login',
-  fields: ['email', 'password'],
-  validate: validateLogin
-}, mapStateToProps, mapDispatchToProps)(LoginView));
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(LoginView));