Upgrade to new form binder

website/src/Profile/ProfileForm.js

@@ -1,9 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Column, Row, Box, Button, BoundInput, BoundButton } from 'ui'
-import { sizeInfo, colorInfo } from 'ui/style'
-import { FormBinder } from 'react-form-binder'
-import autobind from 'autobind-decorator'
+import React from "react"
+import PropTypes from "prop-types"
+import { Column, Row, Box, Button, BoundInput, BoundButton } from "ui"
+import { sizeInfo, colorInfo } from "ui/style"
+import { FormBinder } from "react-form-binder"
+import autobind from "autobind-decorator"
 
 export class ProfileForm extends React.Component {
   static propTypes = {
@@ -11,31 +11,34 @@ export class ProfileForm extends React.Component {
     onSaved: PropTypes.func.isRequired,
     onModifiedChanged: PropTypes.func,
     onChangePassword: PropTypes.func,
-    onChangeEmail: PropTypes.func
+    onChangeEmail: PropTypes.func,
   }
 
   static bindings = {
     email: {
-      isValid: (r, v) => (v !== ''),
-      isDisabled: (r) => (!!r._id)
+      isValid: (r, v) => v !== "",
+      isDisabled: (r) => !!r._id,
     },
     firstName: {
-      isValid: (r, v) => (v !== '')
+      isValid: (r, v) => v !== "",
     },
     lastName: {
-      isValid: (r, v) => (v !== '')
+      isValid: (r, v) => v !== "",
     },
     save: {
       noValue: true,
-      isDisabled: (r) => (!r.anyModified || !r.allValid)
-    }
+      isDisabled: (r) => !r.anyModified || !r.allValid,
+    },
   }
 
   constructor(props) {
     super(props)
     this.state = {
       binder: new FormBinder(
-        this.props.user, ProfileForm.bindings, this.props.onModifiedChanged)
+        this.props.user,
+        ProfileForm.bindings,
+        this.props.onModifiedChanged
+      ),
     }
   }
 
@@ -43,7 +46,10 @@ export class ProfileForm extends React.Component {
     if (nextProps.user !== this.props.user) {
       this.setState({
         binder: new FormBinder(
-          nextProps.user, ProfileForm.bindings, nextProps.onModifiedChanged)
+          nextProps.user,
+          ProfileForm.bindings,
+          nextProps.onModifiedChanged
+        ),
       })
     }
   }
@@ -61,15 +67,19 @@ export class ProfileForm extends React.Component {
 
   @autobind
   handleChangeEmail() {
-    this.props.onChangeEmail(this.state.binder.getFieldValue('email'))
+    this.props.onChangeEmail(this.state.binder.getBindingValue("email"))
   }
 
   render() {
     const { binder } = this.state
 
     return (
-      <form onSubmit={this.handleSubmit} id='profileForm'>
-        <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }}
+      <form onSubmit={this.handleSubmit} id="profileForm">
+        <Box
+          border={{
+            width: sizeInfo.headerBorderWidth,
+            color: colorInfo.headerBorder,
+          }}
           radius={sizeInfo.formBoxRadius}>
           <Row>
             <Row.Item width={sizeInfo.formRowSpacing} />
@@ -77,34 +87,58 @@ export class ProfileForm extends React.Component {
               <Column>
                 <Column.Item height={sizeInfo.formColumnSpacing} />
                 <Column.Item>
-                  <BoundInput label='First Name' name='firstName'
-                    message='First name is required' binder={binder} />
+                  <BoundInput
+                    label="First Name"
+                    name="firstName"
+                    message="First name is required"
+                    binder={binder}
+                  />
                 </Column.Item>
                 <Column.Item>
-                  <BoundInput label='Last Name' name='lastName'
-                    binder={binder} />
+                  <BoundInput
+                    label="Last Name"
+                    name="lastName"
+                    binder={binder}
+                  />
                 </Column.Item>
                 <Column.Item>
-                  <BoundInput label='Email' name='email'
-                    message='Required. Must be a valid email address.'
-                    binder={binder} />
+                  <BoundInput
+                    label="Email"
+                    name="email"
+                    message="Required. Must be a valid email address."
+                    binder={binder}
+                  />
                 </Column.Item>
                 <Column.Item height={sizeInfo.formColumnSpacing} />
                 <Column.Item height={sizeInfo.buttonHeight}>
                   <Row>
                     <Row.Item>
-                      <Button text={'Change Email'} label='&nbsp;'
-                        width={sizeInfo.buttonWideWidth} onClick={this.handleChangeEmail} />
+                      <Button
+                        text={"Change Email"}
+                        label="&nbsp;"
+                        width={sizeInfo.buttonWideWidth}
+                        onClick={this.handleChangeEmail}
+                      />
                     </Row.Item>
                     <Row.Item width={sizeInfo.formRowSpacing} />
                     <Row.Item>
-                      <Button text={'Change Password'} label='&nbsp;'
-                        width={sizeInfo.buttonWideWidth} onClick={this.props.onChangePassword} />
+                      <Button
+                        text={"Change Password"}
+                        label="&nbsp;"
+                        width={sizeInfo.buttonWideWidth}
+                        onClick={this.props.onChangePassword}
+                      />
                     </Row.Item>
                     <Row.Item grow />
                     <Row.Item>
-                      <BoundButton submit='profileForm' size='medium' text='Save' label='&nbsp;' name='save'
-                        binder={binder} />
+                      <BoundButton
+                        submit="profileForm"
+                        size="medium"
+                        text="Save"
+                        label="&nbsp;"
+                        name="save"
+                        binder={binder}
+                      />
                     </Row.Item>
                   </Row>
                 </Column.Item>