From 3c8768d3305e1ccc2ea6ca7663833118cef45031 Mon Sep 17 00:00:00 2001
From: Tim Mikeladze <tim.mikeladze@gmail.com>
Date: Wed, 22 Feb 2017 13:23:02 -0800
Subject: [PATCH] Working on refactor

---
 packages/material-ui/src/Accounts.js    |   4 +-
 packages/material-ui/src/index.story.js |   6 +-
 packages/material-ui/src/login.js       |  23 ++++--
 packages/react/package.json             |   1 -
 packages/react/src/Accounts.js          |   9 +-
 packages/react/src/LoginFields.js       |  23 ------
 packages/react/src/SignupFields.js      | 105 +++++++++++++-----------
 packages/react/src/SignupFieldsOld.js   |  80 ------------------
 packages/react/src/enhanceLogin.js      |  24 ++++++
 packages/react/src/index.js             |   4 +-
 packages/react/src/login.js             |  60 --------------
 packages/react/src/loginForm.js         |  27 ------
 packages/react/src/signupForm.js        |  74 -----------------
 13 files changed, 110 insertions(+), 330 deletions(-)
 delete mode 100644 packages/react/src/LoginFields.js
 delete mode 100644 packages/react/src/SignupFieldsOld.js
 create mode 100644 packages/react/src/enhanceLogin.js
 delete mode 100644 packages/react/src/login.js
 delete mode 100644 packages/react/src/loginForm.js
 delete mode 100644 packages/react/src/signupForm.js

diff --git a/packages/material-ui/src/Accounts.js b/packages/material-ui/src/Accounts.js
index 71701bb..3718e70 100644
--- a/packages/material-ui/src/Accounts.js
+++ b/packages/material-ui/src/Accounts.js
@@ -5,7 +5,7 @@ import Signup from './Signup';
 
 export default ({ ...otherProps }) =>
   <Accounts
-    Login={() => <Login {...otherProps} />}
-    Signup={() => <Signup {...otherProps} />}
+    Login={loginProps => <Login {...loginProps} {...otherProps} />}
+    Signup={signupProps => <Signup {...signupProps} {...otherProps} />}
     {...otherProps}
   />;
diff --git a/packages/material-ui/src/index.story.js b/packages/material-ui/src/index.story.js
index 3a49547..ce233a9 100644
--- a/packages/material-ui/src/index.story.js
+++ b/packages/material-ui/src/index.story.js
@@ -23,7 +23,11 @@ const style = {
 storiesOf('Accounts', module)
   .add('login', () => (
     <div style={style}>
-      <AccountsWithContext formType="login" />
+      <AccountsWithContext
+        formType="login" onChangeLoginUserField={(e) => {
+          console.log('HIT');
+        }}
+      />
     </div>
   ))
   .add('signup', () => (
diff --git a/packages/material-ui/src/login.js b/packages/material-ui/src/login.js
index a5e821b..6c9475d 100644
--- a/packages/material-ui/src/login.js
+++ b/packages/material-ui/src/login.js
@@ -28,25 +28,35 @@ LoginFields.propTypes = {
   children: PropTypes.node,
 };
 
-const LoginUserField = ({ ...otherProps }) =>
+const LoginUserField = ({ onChangeLoginUserField, ...otherProps }) =>
   <TextField
     hintText="Username or email"
     style={{
       marginBottom: 10,
     }}
+    onChange={onChangeLoginUserField}
     {...otherProps}
   />;
 
-const LoginPasswordField = ({ ...otherProps }) =>
+LoginUserField.propTypes = {
+  onChangeLoginUserField: PropTypes.func,
+};
+
+const LoginPasswordField = ({ onChangeLoginPasswordField, ...otherProps }) =>
   <TextField
     hintText="Password"
     type="password"
     style={{
       marginBottom: 10,
     }}
+    onChange={onChangeLoginPasswordField}
     {...otherProps}
   />;
 
+LoginPasswordField.propTypes = {
+  onChangeLoginPasswordField: PropTypes.func,
+};
+
 const LoginButton = () =>
   <RaisedButton
     primary
@@ -121,7 +131,7 @@ const Login = ({
   LoginButton,
   SignupButton,
   ...otherProps
-}) => (
+}) =>
   <DefaultLayout
     Header={Header}
     Footer={() => <Footer SignupButton={SignupButton} />}
@@ -129,13 +139,12 @@ const Login = ({
   >
     <Avatar />
     <LoginFields>
-      <LoginUserField />
-      <LoginPasswordField />
+      <LoginUserField {...otherProps} />
+      <LoginPasswordField {...otherProps} />
     </LoginFields>
     <LoginButton />
     <RecoverButton />
-  </DefaultLayout>
-  );
+  </DefaultLayout>;
 
 Login.propTypes = {
   Avatar: PropTypes.node,
diff --git a/packages/react/package.json b/packages/react/package.json
index 1a40b9d..f0aac5b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -71,7 +71,6 @@
   "dependencies": {
     "@accounts/client": "0.0.3",
     "@accounts/common": "0.0.3",
-    "immutable-form": "^0.0.12",
     "react": "^15.3.2",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
diff --git a/packages/react/src/Accounts.js b/packages/react/src/Accounts.js
index fa194b9..1faf72c 100644
--- a/packages/react/src/Accounts.js
+++ b/packages/react/src/Accounts.js
@@ -1,7 +1,7 @@
 import React, { PropTypes, Component } from 'react';
 import AccountsClient from '@accounts/client';
 import FormTypes from './FormTypes';
-import connectLoginForm from './connectLoginForm';
+import enhanceLogin from './enhanceLogin';
 
 class Accounts extends Component {
   static propTypes = {
@@ -27,16 +27,17 @@ class Accounts extends Component {
     const {
       Login,
       Signup,
+      ...otherProps
     } = this.props;
-    let ConnectedForm;
+    let Form;
     switch (this.state.formType) {
       case FormTypes.LOGIN:
-        ConnectedForm = connectLoginForm(<Login />);
+        Form = enhanceLogin(Login);
         break;
       default:
         break;
     }
-    return <ConnectedForm setFormType={this.setFormType} {...this.props} />;
+    return <Form {...otherProps} />;
   }
 }
 
diff --git a/packages/react/src/LoginFields.js b/packages/react/src/LoginFields.js
deleted file mode 100644
index 774c07f..0000000
--- a/packages/react/src/LoginFields.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { PropTypes } from 'react';
-import AccountsClient from '@accounts/client';
-
-const LoginFields = ({ form, fields }) =>
-  <div>
-    <AccountsClient.ui.UserField
-      value={fields.getIn(['user', 'value'])}
-      errorText={fields.getIn(['user', 'errors']).first()}
-      onChange={event => form.setField('user', event.target.value)}
-    />
-    <AccountsClient.ui.PasswordField
-      value={fields.getIn(['password', 'value'])}
-      errorText={fields.getIn(['password', 'errors']).first()}
-      onChange={event => form.setField('password', event.target.value)}
-    />
-  </div>;
-
-LoginFields.propTypes = {
-  form: PropTypes.object,
-  fields: PropTypes.object,
-};
-
-export default LoginFields;
diff --git a/packages/react/src/SignupFields.js b/packages/react/src/SignupFields.js
index 7a6aa96..b0f5395 100644
--- a/packages/react/src/SignupFields.js
+++ b/packages/react/src/SignupFields.js
@@ -1,54 +1,71 @@
 import React, { PropTypes } from 'react';
+import AccountsClient from '@accounts/client';
 import { PasswordSignupFields } from '@accounts/common';
 
-const SignupFields = ({
-  passwordSignupFields,
-  Wrapper,
-  SignupEmailField,
-  SignupEmailOptionalField,
-  SignupUsernameField,
-  SignupPasswordField,
-  SignupPasswordConfirmField,
-}) => {
+const emailProps = ({ form, fields }) => ({
+  value: fields.getIn(['email', 'value']),
+  errorText: fields.getIn(['email', 'errors']).first(),
+  onChange: event => form.setField('email', event.target.value),
+});
+
+const usernameProps = ({ form, fields }) => ({
+  value: fields.getIn(['username', 'value']),
+  errorText: fields.getIn(['username', 'errors']).first(),
+  onChange: event => form.setField('username', event.target.value),
+});
+
+const passwordProps = ({ form, fields }) => ({
+  value: fields.getIn(['password', 'value']),
+  errorText: fields.getIn(['password', 'errors']).first(),
+  onChange: event => form.setField('password', event.target.value),
+});
+
+const passwordConfirmProps = ({ form, fields }) => ({
+  value: fields.getIn(['passwordConfirm', 'value']),
+  errorText: fields.getIn(['passwordConfirm', 'errors']).first(),
+  onChange: event => form.setField('passwordConfirm', event.target.value),
+});
+
+const SignupFields = ({ form, fields }) => {
   const {
-  EMAIL_ONLY,
-  USERNAME_ONLY,
-  USERNAME_AND_EMAIL,
-  USERNAME_AND_OPTIONAL_EMAIL,
-} = PasswordSignupFields;
-  switch (passwordSignupFields) {
+    EMAIL_ONLY,
+    USERNAME_ONLY,
+    USERNAME_AND_EMAIL,
+    USERNAME_AND_OPTIONAL_EMAIL,
+  } = PasswordSignupFields;
+  switch (AccountsClient.options().passwordSignupFields) {
     case EMAIL_ONLY:
       return (
-        <Wrapper>
-          <SignupEmailField />
-          <SignupPasswordField />
-          <SignupPasswordConfirmField />
-        </Wrapper>);
+        <div>
+          <AccountsClient.ui.EmailField {...emailProps({ form, fields })} />
+          <AccountsClient.ui.PasswordField {...passwordProps({ form, fields })} />
+          <AccountsClient.ui.PasswordConfirmField {...passwordConfirmProps({ form, fields })} />
+        </div>);
     case USERNAME_ONLY:
       return (
-        <Wrapper>
-          <SignupUsernameField />
-          <SignupPasswordField />
-          <SignupPasswordConfirmField />
-        </Wrapper>
+        <div>
+          <AccountsClient.ui.UsernameField {...usernameProps({ form, fields })} />
+          <AccountsClient.ui.PasswordField {...passwordProps({ form, fields })} />
+          <AccountsClient.ui.PasswordConfirmField {...passwordConfirmProps({ form, fields })} />
+        </div>
       );
     case USERNAME_AND_EMAIL:
       return (
-        <Wrapper>
-          <SignupUsernameField />
-          <SignupEmailField />
-          <SignupPasswordField />
-          <SignupPasswordConfirmField />
-        </Wrapper>
+        <div>
+          <AccountsClient.ui.UsernameField {...usernameProps({ form, fields })} />
+          <AccountsClient.ui.EmailField {...emailProps({ form, fields })} />
+          <AccountsClient.ui.PasswordField {...passwordProps({ form, fields })} />
+          <AccountsClient.ui.PasswordConfirmField {...passwordConfirmProps({ form, fields })} />
+        </div>
       );
     case USERNAME_AND_OPTIONAL_EMAIL:
       return (
-        <Wrapper>
-          <SignupUsernameField />
-          <SignupEmailOptionalField />
-          <SignupPasswordField />
-          <SignupPasswordConfirmField />
-        </Wrapper>
+        <div>
+          <AccountsClient.ui.UsernameField {...usernameProps({ form, fields })} />
+          <AccountsClient.ui.EmailOptionalField {...emailProps({ form, fields })} />
+          <AccountsClient.ui.PasswordField {...passwordProps({ form, fields })} />
+          <AccountsClient.ui.PasswordConfirmField {...passwordConfirmProps({ form, fields })} />
+        </div>
       );
     default:
       return null;
@@ -56,18 +73,8 @@ const SignupFields = ({
 };
 
 SignupFields.propTypes = {
-  passwordSignupFields: PropTypes.string,
-  Wrapper: PropTypes.node,
-  SignupEmailOptionalField: PropTypes.node,
-  SignupEmailField: PropTypes.node,
-  SignupUsernameField: PropTypes.node,
-  SignupPasswordField: PropTypes.node,
-  SignupPasswordConfirmField: PropTypes.node,
-};
-
-SignupFields.defaultProps = {
-  //eslint-disable-next-line
-  Wrapper: ({ children }) => <div>{children}</div>,
+  form: PropTypes.object,
+  fields: PropTypes.object,
 };
 
 export default SignupFields;
diff --git a/packages/react/src/SignupFieldsOld.js b/packages/react/src/SignupFieldsOld.js
deleted file mode 100644
index b0f5395..0000000
--- a/packages/react/src/SignupFieldsOld.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { PropTypes } from 'react';
-import AccountsClient from '@accounts/client';
-import { PasswordSignupFields } from '@accounts/common';
-
-const emailProps = ({ form, fields }) => ({
-  value: fields.getIn(['email', 'value']),
-  errorText: fields.getIn(['email', 'errors']).first(),
-  onChange: event => form.setField('email', event.target.value),
-});
-
-const usernameProps = ({ form, fields }) => ({
-  value: fields.getIn(['username', 'value']),
-  errorText: fields.getIn(['username', 'errors']).first(),
-  onChange: event => form.setField('username', event.target.value),
-});
-
-const passwordProps = ({ form, fields }) => ({
-  value: fields.getIn(['password', 'value']),
-  errorText: fields.getIn(['password', 'errors']).first(),
-  onChange: event => form.setField('password', event.target.value),
-});
-
-const passwordConfirmProps = ({ form, fields }) => ({
-  value: fields.getIn(['passwordConfirm', 'value']),
-  errorText: fields.getIn(['passwordConfirm', 'errors']).first(),
-  onChange: event => form.setField('passwordConfirm', event.target.value),
-});
-
-const SignupFields = ({ form, fields }) => {
-  const {
-    EMAIL_ONLY,
-    USERNAME_ONLY,
-    USERNAME_AND_EMAIL,
-    USERNAME_AND_OPTIONAL_EMAIL,
-  } = PasswordSignupFields;
-  switch (AccountsClient.options().passwordSignupFields) {
-    case EMAIL_ONLY:
-      return (
-        <div>
-          <AccountsClient.ui.EmailField {...emailProps({ form, fields })} />
-          <AccountsClient.ui.PasswordField {...passwordProps({ form, fields })} />
-          <AccountsClient.ui.PasswordConfirmField {...passwordConfirmProps({ form, fields })} />
-        </div>);
-    case USERNAME_ONLY:
-      return (
-        <div>
-          <AccountsClient.ui.UsernameField {...usernameProps({ form, fields })} />
-          <AccountsClient.ui.PasswordField {...passwordProps({ form, fields })} />
-          <AccountsClient.ui.PasswordConfirmField {...passwordConfirmProps({ form, fields })} />
-        </div>
-      );
-    case USERNAME_AND_EMAIL:
-      return (
-        <div>
-          <AccountsClient.ui.UsernameField {...usernameProps({ form, fields })} />
-          <AccountsClient.ui.EmailField {...emailProps({ form, fields })} />
-          <AccountsClient.ui.PasswordField {...passwordProps({ form, fields })} />
-          <AccountsClient.ui.PasswordConfirmField {...passwordConfirmProps({ form, fields })} />
-        </div>
-      );
-    case USERNAME_AND_OPTIONAL_EMAIL:
-      return (
-        <div>
-          <AccountsClient.ui.UsernameField {...usernameProps({ form, fields })} />
-          <AccountsClient.ui.EmailOptionalField {...emailProps({ form, fields })} />
-          <AccountsClient.ui.PasswordField {...passwordProps({ form, fields })} />
-          <AccountsClient.ui.PasswordConfirmField {...passwordConfirmProps({ form, fields })} />
-        </div>
-      );
-    default:
-      return null;
-  }
-};
-
-SignupFields.propTypes = {
-  form: PropTypes.object,
-  fields: PropTypes.object,
-};
-
-export default SignupFields;
diff --git a/packages/react/src/enhanceLogin.js b/packages/react/src/enhanceLogin.js
new file mode 100644
index 0000000..e5a0875
--- /dev/null
+++ b/packages/react/src/enhanceLogin.js
@@ -0,0 +1,24 @@
+import {
+  compose,
+  withHandlers,
+  withProps,
+  withState,
+} from 'recompose';
+
+const enhanceLogin = compose(
+  withState('loginUserField', 'setLoginUserField', ''),
+  withState('loginPasswordField', 'setLoginPasswordField', ''),
+  withHandlers({
+    loginWithPassword: props => (user, password) => {
+
+    },
+    onChangeLoginUserField: ({ setLoginUserField }) => (e) => {
+      setLoginUserField(e.target.value);
+    },
+    onChangeLoginPasswordField: ({ setLoginPasswordField }) => (e) => {
+      setLoginPasswordField(e.target.value);
+    },
+  }),
+);
+
+export default enhanceLogin;
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 5d28e62..0cab22b 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -2,12 +2,12 @@ import withAccounts from './withAccounts';
 import DefaultLayout from './DefaultLayout';
 import Accounts from './Accounts';
 import SignupFields from './SignupFields';
-import connectLoginForm from './connectLoginForm';
+import enhanceLogin from './enhanceLogin';
 
 export {
   withAccounts,
   DefaultLayout,
   Accounts,
   SignupFields,
-  connectLoginForm,
+  enhanceLogin,
 };
diff --git a/packages/react/src/login.js b/packages/react/src/login.js
deleted file mode 100644
index 6e56778..0000000
--- a/packages/react/src/login.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import Accounts from '@accounts/client';
-
-if (!Accounts.ui.login) {
-  Accounts.ui.login = {};
-}
-
-const Form = ({ style, ...otherProps }) =>
-  <div className="accounts-login-form" style={style}>
-    <Accounts.ui.login.Fields {...otherProps} />
-    <Accounts.ui.login.Buttons {...otherProps} />
-  </div>;
-
-export { Form };
-Accounts.ui.login.Form = Form;
-
-const Fields = ({ style, ...otherProps }) =>
-  <div className="accounts-login-fields" style={style}>
-    <Accounts.ui.login.UserField {...otherProps} />
-    <Accounts.ui.login.PasswordField {...otherProps} />
-  </div>;
-
-export { Fields };
-Accounts.ui.login.Fields = Fields;
-
-const PasswordField = ({ style, ...otherProps }) =>
-  <input type="text" className="accounts-login-fields-password" style={style} />;
-
-export { PasswordField };
-Accounts.ui.login.PasswordField = PasswordField;
-
-const UserField = ({ style, ...otherProps }) =>
-  <input type="text" className="accounts-login-fields-user" style={style} />;
-
-export { UserField };
-Accounts.ui.login.UserField = UserField;
-
-const Buttons = ({ style, ...otherProps }) =>
-  <div className="accounts-login-buttons" style={style}>
-    <Accounts.ui.login.LoginButton {...otherProps} />
-    <Accounts.ui.login.SignupButton {...otherProps} />
-  </div>;
-
-export { Buttons };
-Accounts.ui.login.Buttons = Buttons;
-
-const LoginButton = ({ style, ...otherProps }) =>
-  <button className="accounts-login-buttons-login" style={style}>
-    Login
-  </button>;
-
-export { LoginButton };
-Accounts.ui.login.LoginButton = LoginButton;
-
-const SignupButton = ({ style, ...otherProps }) =>
-  <button className="accounts-login-buttons-signup" style={style}>
-    Signup
-  </button>;
-
-Accounts.ui.login.SignupButton = SignupButton;
diff --git a/packages/react/src/loginForm.js b/packages/react/src/loginForm.js
deleted file mode 100644
index 2498998..0000000
--- a/packages/react/src/loginForm.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Accounts from '@accounts/client';
-import { Form } from 'immutable-form';
-
-const validateUser = user => user.trim().length === 0 && 'Username or email is required';
-
-const loginForm = () => new Form('login', {
-  fields: {
-    user: {
-      validate: [
-        validateUser,
-      ],
-    },
-    password: {
-      validate: [
-        password => password.length === 0 && 'Password is required',
-      ],
-    },
-  },
-}).setSubmit(({ form }) =>
-  Accounts.loginWithPassword(
-    form.getField('user').get('value'),
-    form.getField('password').get('value'),
-  ).catch((err) => {
-    form.addError(err.serialize().message);
-  }));
-
-export default loginForm;
diff --git a/packages/react/src/signupForm.js b/packages/react/src/signupForm.js
deleted file mode 100644
index 82897eb..0000000
--- a/packages/react/src/signupForm.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import Accounts from '@accounts/client';
-import { Form } from 'immutable-form';
-import { PasswordSignupFields, validators } from '@accounts/common';
-
-const validateUsername = username => username.trim().length === 0 && 'Username is required';
-const validateEmail = email => !validators.isEmail(email) && 'Not a valid email address';
-const signupForm = () => new Form('signup', {
-  fields: ({
-    password: {
-      validate: [
-        password =>
-          password.length < Accounts.options().minimumPasswordLength
-            && `Password must be at least ${Accounts.options().minimumPasswordLength} characters`,
-      ],
-    },
-    passwordConfirm: {
-      validate: [
-        (confirmPassword, { form }) => confirmPassword !== form.getField('password').get('value')
-          && 'Passwords do not match',
-      ],
-    },
-    // eslint-disable-next-line consistent-return
-    ...(() => {
-      const {
-      EMAIL_ONLY,
-      USERNAME_ONLY,
-      USERNAME_AND_EMAIL,
-      USERNAME_AND_OPTIONAL_EMAIL,
-    } = PasswordSignupFields;
-      switch (Accounts.options().passwordSignupFields) {
-        case EMAIL_ONLY:
-          return {
-            email: {
-              validate: [
-                validateEmail,
-              ],
-            },
-          };
-        case USERNAME_ONLY:
-          return {
-            username: {
-              validate: [
-                validateUsername,
-              ],
-            },
-          };
-        case USERNAME_AND_EMAIL:
-        case USERNAME_AND_OPTIONAL_EMAIL:
-          return {
-            username: {
-              validate: [
-                validateUsername,
-              ],
-            },
-            email: {
-              validate: [
-                validateEmail,
-              ],
-            },
-          };
-        default:
-          break;
-      }
-    })(),
-  }),
-}).setSubmit(({ form }) => Accounts.createUser({
-  password: form.getField('password').get('value'),
-  username: form.getField('username').get('value'),
-  email: form.getField('email').get('value'),
-}).catch((err) => {
-  form.addError(err.serialize().message);
-}));
-
-export default signupForm;