Refactor ValidatedField

package.json

@@ -19,6 +19,7 @@
     "react-router": "^3.0.5",
     "react-tag-autocomplete": "^5.4.1",
     "redux": "^3.6.0",
+    "redux-form": "^7.0.4",
     "xpub-fonts": "^0.0.2"
   },
   "devDependencies": {

src/atoms/ValidatedField.js

 import React from 'react'
 import classnames from 'classnames'
 import classes from './ValidatedField.local.scss'
+import { Field } from 'redux-form'
 
 // TODO: pass ...props.input to children automatically?
 
-const ValidatedField = ({ form, children, error, warning }) => (
-  <div>
-    {children}
+const ValidatedField = ({ component, ...rest }) => (
+  <Field
+    {...rest}
+    component={({ meta, input }) => (
+      <div>
+        {component(input)}
 
-    <div className={classes.messages}>
-      {error && (
-        <div className={classnames(classes.message, classes.error)}>
-          {error}
-        </div>
-      )}
+        <div className={classes.messages}>
+          {meta.error && (
+            <div className={classnames(classes.message, classes.error)}>
+              {meta.error}
+            </div>
+          )}
 
-      {warning && (
-        <div className={classnames(classes.message, classes.warning)}>
-          {warning}
+          {meta.warning && (
+            <div className={classnames(classes.message, classes.warning)}>
+              {meta.warning}
+            </div>
+          )}
         </div>
-      )}
-    </div>
-  </div>
+      </div>
+    )}
+  />
 )
 
 export default ValidatedField