Remove Redux-Form in Generate Wallet (#466)

* remove redux-form from package.json, vendors, reducers

* refactor GenerateWallet components, remove redux-form dependency

common/containers/Tabs/GenerateWallet/components/EnterPassword.tsx

@@ -1,41 +1,37 @@
 import { GenerateNewWalletAction } from 'actions/generateWallet';
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import { Field, reduxForm } from 'redux-form';
 import translate from 'translations';
 import './EnterPassword.scss';
 import PasswordInput from './PasswordInput';
 import Template from './Template';
+
 // VALIDATORS
-const minLength = min => value => {
+const minLength = min => value => value && value.length >= min;
-  return value && value.length < min
-    ? `Must be ${min} characters or more`
-    : undefined;
-};
 const minLength9 = minLength(9);
-const required = value => (value ? undefined : 'Required');
 
 interface Props {
-  walletPasswordForm: any;
   generateNewWallet(pw: string): GenerateNewWalletAction;
 }
 
 interface State {
   fileName: null | string;
   blobURI: null | string;
+  password: string;
+  isPasswordValid: boolean;
   isPasswordVisible: boolean;
 }
-class EnterPassword extends Component<Props, State> {
+export default class EnterPassword extends Component<Props, State> {
   public state = {
     fileName: null,
     blobURI: null,
+    password: '',
+    isPasswordValid: false,
     isPasswordVisible: false
   };
 
   public render() {
-    const { walletPasswordForm } = this.props;
+    const { password, isPasswordValid, isPasswordVisible } = this.state;
-    const { isPasswordVisible } = this.state;
-    const AnyField = Field as new () => Field<any>;
     const content = (
       <div className="EnterPw">
         <h1 className="EnterPw-title" aria-live="polite">
@@ -44,20 +40,18 @@ class EnterPassword extends Component<Props, State> {
 
         <label className="EnterPw-password">
           <h4 className="EnterPw-password-label">{translate('GEN_Label_1')}</h4>
-          <AnyField
+          <PasswordInput
-            className="EnterPw-password-field"
+            password={password}
-            validate={[required, minLength9]}
+            onPasswordChange={this.onPasswordChange}
-            component={PasswordInput}
             isPasswordVisible={isPasswordVisible}
             togglePassword={this.togglePassword}
-            name="password"
+            isPasswordValid={isPasswordValid}
-            type="text"
           />
         </label>
 
         <button
           onClick={this.onClickGenerateFile}
-          disabled={walletPasswordForm ? walletPasswordForm.syncErrors : true}
+          disabled={!isPasswordValid}
           className="EnterPw-submit btn btn-primary btn-block"
         >
           {translate('NAV_GenerateWallet')}
@@ -131,15 +125,19 @@ class EnterPassword extends Component<Props, State> {
     return <Template content={content} help={help} />;
   }
   private onClickGenerateFile = () => {
-    const form = this.props.walletPasswordForm;
+    this.props.generateNewWallet(this.state.password);
-    this.props.generateNewWallet(form.values.password);
+    this.setState({ password: '' });
   };
 
   private togglePassword = () => {
     this.setState({ isPasswordVisible: !this.state.isPasswordVisible });
   };
-}
 
-export default reduxForm({
+  private onPasswordChange = (e: any) => {
-  form: 'walletPasswordForm' // a unique name for this form
+    const password = e.target.value;
-})(EnterPassword as any);
+    this.setState({
+      isPasswordValid: minLength9(password),
+      password
+    });
+  };
+}

common/containers/Tabs/GenerateWallet/components/PasswordInput.tsx

@@ -2,27 +2,35 @@ import React, { Component } from 'react';
 import { translateRaw } from 'translations';
 
 interface Props {
+  password: string;
+  onPasswordChange: any;
   togglePassword: any;
   isPasswordVisible?: boolean;
-  input: any;
+  isPasswordValid: boolean;
-  meta: any;
 }
 
 export default class PasswordInput extends Component<Props, {}> {
   public render() {
-    const { input, meta, isPasswordVisible, togglePassword } = this.props;
+    const {
+      password,
+      isPasswordValid,
+      isPasswordVisible,
+      togglePassword,
+      onPasswordChange
+    } = this.props;
 
     return (
       <div>
         <div>
           <div className="input-group" style={{ width: '100%' }}>
             <input
-              {...input}
+              value={password}
               name="password"
-              className={`form-control ${meta.error ? 'is-invalid' : ''}`}
+              className={`form-control ${!isPasswordValid ? 'is-invalid' : ''}`}
               type={isPasswordVisible ? 'text' : 'password'}
               placeholder={translateRaw('GEN_Placeholder_1')}
               aria-label={translateRaw('GEN_Aria_1')}
+              onChange={onPasswordChange}
             />
             <span
               onClick={togglePassword}

common/reducers/index.ts

@@ -1,6 +1,5 @@
 import { routerReducer } from 'react-router-redux';
 import { combineReducers } from 'redux';
-import { reducer as formReducer } from 'redux-form';
 import { config, State as ConfigState } from './config';
 import { customTokens, State as CustomTokensState } from './customTokens';
 import {
@@ -39,6 +38,5 @@ export default combineReducers({
   customTokens,
   rates,
   deterministicWallets,
-  form: formReducer,
   routing: routerReducer
 });

common/vendors.js

@@ -11,7 +11,6 @@ require('react-redux');
 require('react-router');
 require('react-router-redux');
 require('redux');
-require('redux-form');
 require('redux-logger');
 require('redux-saga');
 require('wallet-address-validator');

package.json

@@ -33,7 +33,6 @@
     "react-router-redux": "4.0.8",
     "react-transition-group": "2.2.1",
     "redux": "3.7.2",
-    "redux-form": "7.1.2",
     "redux-logger": "3.0.6",
     "redux-promise-middleware": "4.4.2",
     "redux-saga": "0.16.0",