Account page of material example now has save button that saves Accou…

…nt Data changes.

examples/complete/material/package.json

@@ -71,7 +71,7 @@
     "react-tap-event-plugin": "1.0.0",
     "redux": "^3.6.0",
     "redux-auth-wrapper": "^1.0.0",
-    "redux-form": "^6.4.3",
+    "redux-form": "^6.6.1",
     "redux-thunk": "^2.2.0"
   },
   "devDependencies": {

examples/complete/material/src/routes/Account/components/AccountForm/AccountForm.js

@@ -1,36 +1,43 @@
 import React, { PropTypes } from 'react'
-
-import classes from './AccountForm.scss'
-import ProviderDataForm from '../ProviderDataForm/ProviderDataForm'
-
-import { Field } from 'redux-form'
+import { Field, reduxForm, submit } from 'redux-form'
+import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
+import RaisedButton from 'material-ui/RaisedButton'
 import TextField from 'components/TextField'
+import { ACCOUNT_FORM_NAME } from 'constants/formNames'
+import { connect } from 'react-redux'
+import ProviderDataForm from '../ProviderDataForm/ProviderDataForm'
+import classes from './AccountForm.scss'
 
-export const AccountForm = ({ account, handleSubmit, submitting }) => (
-  <div className={classes.container}>
+export const AccountForm = ({ account, handleSubmit, submitForm, submitting }) => (
+  <form className={classes.container} onSubmit={handleSubmit}>
     <h4>Account</h4>
-    <div>
-      <Field
-        name='username'
-        component={TextField}
-        label='Username'
-      />
-    </div>
-    <div>
-      <Field
-        name='email'
-        component={TextField}
-        label='Email'
-      />
-    </div>
+    <Field
+      name='displayName'
+      component={TextField}
+      label='Name'
+    />
+    <Field
+      name='email'
+      component={TextField}
+      label='Email'
+    />
     <div>
       <h4>Linked Accounts</h4>
       {
         account.providerData &&
           <ProviderDataForm providerData={account.providerData} />
       }
     </div>
-  </div>
+    <div>
+      <RaisedButton
+        label='Save'
+        primary
+        type='submit'
+        onTouchTap={submitForm}
+        disabled={submitting}
+      />
+    </div>
+  </form>
 )
 
 AccountForm.propTypes = {
@@ -40,4 +47,14 @@ AccountForm.propTypes = {
   handleSubmit: PropTypes.func,
   submitting: PropTypes.bool
 }
-export default AccountForm
+
+const form = reduxForm({
+  form: ACCOUNT_FORM_NAME,
+  enableReinitialization: true
+})(AccountForm)
+
+export default connect(
+  ({ firebase }) => ({
+    initialValues: pathToJS(firebase, 'profile')
+  }),
+)(form)

examples/complete/material/src/routes/Account/containers/AccountContainer.js

@@ -3,6 +3,8 @@ import Paper from 'material-ui/Paper'
 import { connect } from 'react-redux'
 import { reduxForm } from 'redux-form'
 import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
+import { submit } from 'redux-form'
+import { reduxFirebase as rfConfig } from 'config'
 import { ACCOUNT_FORM_NAME } from 'constants/formNames'
 import { UserIsAuthenticated } from 'utils/router'
 import defaultUserImageUrl from 'static/User.png'
@@ -11,21 +13,20 @@ import AccountForm from '../components/AccountForm/AccountForm'
 import classes from './AccountContainer.scss'
 
 @UserIsAuthenticated // redirect to /login if user is not authenticated
-@firebaseConnect()
+@firebaseConnect() // add this.props.firebase
 @connect(
   // Map state to props
   ({ firebase }) => ({
-    authError: pathToJS(firebase, 'authError'),
+    auth: pathToJS(firebase, 'auth'),
     account: pathToJS(firebase, 'profile'),
-    initialValues: pathToJS(firebase, 'profile')
-  })
+  }),
+  {
+    submitForm: () => (dispatch) => {
+      dispatch(submit(ACCOUNT_FORM_NAME));
+    },
+  }
 )
-@reduxForm({
-  form: ACCOUNT_FORM_NAME,
-  enableReinitialization: true
-})
 export default class Account extends Component {
-
   static contextTypes = {
     router: React.PropTypes.object.isRequired
   }
@@ -51,8 +52,17 @@ export default class Account extends Component {
     })
   }
 
+  updateAccount = (newData) => {
+    return this.props.firebase
+      .update(`${rfConfig.userProfile}/${this.props.auth.uid}`, newData)
+      .catch((err) => {
+        console.error('Error updating account', err)
+        // TODO: Display error to user
+      })
+  }
+
   render () {
-    const { account, firebase: { saveAccount } } = this.props
+    const { account } = this.props
 
     if (!isLoaded(account)) {
       return <LoadingSpinner />
@@ -71,8 +81,9 @@ export default class Account extends Component {
             </div>
             <div className={classes.meta}>
               <AccountForm
-                onSubmit={saveAccount}
                 account={account}
+                submitForm={this.props.submitForm}
+                onSubmit={this.updateAccount}
               />
             </div>
           </div>

yarn.lock

@@ -2590,6 +2590,10 @@ [email protected]:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
+hoist-non-react-statics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"