Fix problem with transaction form validation

- Use validator instead of lodash for validation
- Update transaction form validator
- Fix problem with error messages not showing up
- Update redux-form

package.json

@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "firebase": "^3.7.1",
-    "lodash": "^4.17.4",
     "react": "~15.4.1",
     "react-native": "0.42.0",
     "react-native-config": "^0.3.1",
@@ -18,9 +17,10 @@
     "react-navigation": "^1.0.0-beta.6",
     "react-redux": "^5.0.3",
     "redux": "^3.6.0",
-    "redux-form": "^6.6.0",
+    "redux-form": "^6.6.3",
     "redux-persist": "^4.6.0",
-    "redux-thunk": "^2.2.0"
+    "redux-thunk": "^2.2.0",
+    "validator": "^7.0.0"
   },
   "devDependencies": {
     "babel-jest": "19.0.0",

src/components/TransactionForm/TransactionForm.js

@@ -9,33 +9,34 @@ import DatePicker from 'react-native-datepicker'
 import { validateTransaction } from '../../lib/validation'
 import colors from '../../config/colors'
 
-const renderInputField = ({ input, label, meta: { touched, error }, ...custom }) => (
+const renderInputField = ({ input: { onChange, ...restInput }, label, meta: { touched, error }, ...custom }) => (
   <View>
     <FormLabel>{label}</FormLabel>
-    <FormInput {...input} />
+    <FormInput onChangeText={onChange} {...restInput} />
     {touched && (error && <FormValidationMessage>{error}</FormValidationMessage>)}
   </View>
 )
 
-const renderDateField = ({ input, label, meta: { touched, error }, ...custom }) => (
+const renderDateField = ({ input: { onChange, ...restInput }, label, meta: { touched, error }, ...custom }) => (
   <View>
     <FormLabel>{label}</FormLabel>
-    <FormInput {...input} />
+    <FormInput onChangeText={onChange} {...restInput} />
     {touched && (error && <FormValidationMessage>{error}</FormValidationMessage>)}
   </View>
 )
 
-const renderMoneyField = ({ input, label, meta: { touched, error }, ...custom }) => (
+const renderMoneyField = ({ input: { onChange, ...restInput }, label, meta: { touched, error }, ...custom }) => (
   <View>
     <FormLabel>{label}</FormLabel>
-    <FormInput {...input} keyboardType="numeric" />
+    <FormInput keyboardType="numeric" onChangeText={onChange} {...restInput}  />
     {touched && (error && <FormValidationMessage>{error}</FormValidationMessage>)}
   </View>
 )
 
 class TransactionForm extends Component {
   render() {
-    const { buttonTitle, handleSubmit, handleSubmitHandler } = this.props
+    const { buttonTitle, handleSubmit, handleSubmitHandler, submitting } = this.props
+    const title = submitting ? 'processing' : buttonTitle 
 
     return (
       <View>
@@ -45,9 +46,10 @@ class TransactionForm extends Component {
         <Field name="outflow" label="Outflow" component={renderMoneyField} />
 
         <Button
-          title={buttonTitle}
+          title={title}
           backgroundColor={colors.primary}
           onPress={handleSubmit(handleSubmitHandler)}
+          disabled={submitting}
         />
       </View>
     )
@@ -60,8 +62,8 @@ TransactionForm.propTypes = {
 }
 
 TransactionForm = reduxForm({
-  form: 'add_transaction', // a unique name for this form
-  validateTransaction
+  form: 'transaction_form', // a unique name for this form
+  validate: validateTransaction
 })(TransactionForm)
 
 export default TransactionForm

src/containers/TransactionFormContainer.js

@@ -30,7 +30,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
       const { back } = NavigationActions
       updateTransactionInFirebase(key, values)
         .then(() => {
-          dispatch(back())
+          return dispatch(back())
         })
         .catch((error) => {
           console.log('updateTransaction Error: ', error)

src/lib/validation.js

@@ -1,20 +1,21 @@
-import { isNumber, isInteger } from 'lodash/core'
+import { isISO8601, isCurrency } from 'validator'
 
 export const validateTransaction = values => {
   const errors = {}
+  const { date = '', inflow = '', outflow = '' } = values
 
   // Date should be in timestamp format
-  if (!isInteger(values.date)) {
+  if (!isISO8601(date)) {
     errors.date = "Please enter a valid date"
   }
 
   // Inflow should be a number
-  if (!isNumber(values.inflow)) {
+  if (!isCurrency(inflow)) {
     errors.inflow = 'Please input a number for inflow'
   }
 
   // Outflow should be a number
-  if (!isNumber(values.outflow)) {
+  if (!isCurrency(outflow)) {
     errors.outflow = 'Please input a number for outflow'
   }
 

yarn.lock

@@ -1697,7 +1697,7 @@ fbjs-scripts@^0.7.0:
     semver "^5.1.0"
     through2 "^2.0.0"
 
-fbjs@^0.8.4, fbjs@^0.8.5:
+fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9:
   version "0.8.9"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14"
   dependencies:
@@ -3355,6 +3355,12 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.5.6:
+  version "15.5.8"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
+  dependencies:
+    fbjs "^0.8.9"
+
 prr@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
@@ -3643,9 +3649,9 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
-redux-form@^6.6.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.6.0.tgz#a26f05d5a2b317596733718031dec94126a0f05c"
+redux-form@^6.6.3:
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.6.3.tgz#62362654f2214c83a8f9fcb8313702bb46f92205"
   dependencies:
     deep-equal "^1.0.1"
     es6-error "^4.0.0"
@@ -3654,6 +3660,7 @@ redux-form@^6.6.0:
     is-promise "^2.1.0"
     lodash "^4.17.3"
     lodash-es "^4.17.3"
+    prop-types "^15.5.6"
 
 redux-persist@^4.6.0:
   version "4.6.0"
@@ -4304,6 +4311,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "~1.0.0"
     spdx-expression-parse "~1.0.0"
 
+validator@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/validator/-/validator-7.0.0.tgz#c74deb8063512fac35547938e6f0b1504a282fd2"
+
 vary@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.0.1.tgz#99e4981566a286118dfb2b817357df7993376d10"