Merge branch 'master' into v1.4.0

# Conflicts:
#	README.md
#	examples/complete/material/src/constants/formNames.js
#
examples/complete/material/src/routes/Account/containers/AccountContaine
r.js
#
examples/complete/material/src/routes/Login/components/LoginForm/LoginFo
rm.js
#
examples/complete/material/src/routes/Login/containers/LoginContainer.js
#
examples/complete/material/src/routes/Signup/components/SignupForm/Signu
pForm.js
#
examples/complete/material/src/routes/Signup/containers/SignupContainer.
js

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,18 @@
+**Do you want to request a *feature* or report a *bug*?**  
+
+(If this is a *usage question*, please **do not post it here**—post it on [gitter](https://gitter.im/redux-firebase/Lobby) or [Stack Overflow](http://stackoverflow.com/questions/tagged/react-redux-firebase) instead. If this is not a “feature” or a “bug”, or the phrase “How do I...?” applies, then it's probably a usage question.)
+
+
+**What is the current behavior?**
+
+
+
+**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar.**
+
+
+
+**What is the expected behavior?**
+
+
+
+**Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?**

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+### Description
+
+Write here
+
+### Check List
+
+- [ ] All test passed
+- [ ] Added test to ensure to fix/ensure properly.

CHANGELOG.md

@@ -1,4 +1,4 @@
 # Change Log
 
 This project adheres to [Semantic Versioning](http://semver.org/).
-Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/prescottprue/redux-firebasev3/releases) page.
+Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/prescottprue/react-redux-firebase/releases) page.

README.md

@@ -174,15 +174,14 @@ export default class Todos extends Component {
 Alternatively, if you choose not to use decorators:
 
 ```javascript
+import { compose } from 'redux'
 
-const wrappedTodos = firebaseConnect([
-  '/todos'
-])(Todos)
-export default connect(
-  ({firebase}) => ({
-    todos: dataToJS(firebase, '/todos'),
-  })
-)(wrappedTodos)
+export default compose(
+  firebaseConnect(['/todos']),
+  connect(
+    ({firebase}) => ({ todos: dataToJS(firebase, '/todos') })
+  )
+)(Todos)
 
 ```
 
@@ -314,7 +313,7 @@ export const UserIsAuthenticated = UserAuthWrapper({
   wrapperDisplayName: 'UserIsAuthenticated',
   authSelector: ({ firebase }) => pathToJS(firebase, 'auth'),
   authenticatingSelector: ({ firebase }) =>
-    pathToJS(firebase, 'isInitializing') === true &&
+    pathToJS(firebase, 'isInitializing') === true ||
     pathToJS(firebase, 'auth') === undefined
   predicate: auth => auth !== null,
   redirectAction: (newLoc) => (dispatch) => {

docs/recipes/routing.md

@@ -2,6 +2,12 @@
 
 These recipes assume that you are using [`react-router`](https://github.com/ReactTraining/react-router), but the principles should be applicable to any routing solution.
 
+#### React Router 4
+
+There are known issues when attempting to use these patterns with react-router 4. More information to come.
+
+Progress on supporting react-router 4 [is tracked within this issue](https://github.com/prescottprue/react-redux-firebase/issues/119).
+
 ## Basic
 
 Routing can be changed based on data by using react lifecycle hooks such as `componentWillMount`, and `componentWillReceiveProps` to route users. This can be particularly useful when doing things such as route protection (only allowing user to view a route if they are logged in):
@@ -60,7 +66,9 @@ import { pathToJS } from 'react-redux-firebase'
 export const UserIsAuthenticated = UserAuthWrapper({
   wrapperDisplayName: 'UserIsAuthenticated',
   authSelector: ({ firebase }) => pathToJS(firebase, 'auth'),
-  authenticatingSelector: ({ firebase }) => pathToJS(firebase, 'isInitializing') === true,
+  authenticatingSelector: ({ firebase }) =>
+    pathToJS(firebase, 'isInitializing') === true ||
+    pathToJS(firebase, 'auth') === undefined
   predicate: auth => auth !== null,
   redirectAction: (newLoc) => (dispatch) => {
     browserHistory.replace(newLoc)

examples/complete/material/config/project.config.js

@@ -34,7 +34,7 @@ const config = {
     plugins        : ['transform-runtime', 'lodash', 'transform-decorators-legacy'],
     presets        : ['es2015', 'react', 'stage-0']
   },
-  compiler_devtool         : 'source-map',
+  compiler_devtool         : 'eval',
   compiler_hash_type       : 'hash',
   compiler_fail_on_warning : false,
   compiler_quiet           : false,

examples/complete/material/config/webpack.config.js

@@ -53,12 +53,14 @@ webpackConfig.plugins = [
       if (stats.compilation.errors.length) {
         // Log each of the warnings
         stats.compilation.errors.forEach(function (error) {
-          errors.push(error.message || error)
+          errors.push(error.stack || error.message || error)
         })
 
-        // Pretend no assets were generated. This prevents the tests
-        // from running making it clear that there were warnings.
-        throw new Error(errors)
+        if (__TEST__) {
+          // Pretend no assets were generated. This prevents the tests
+          // from running making it clear that there were warnings.
+          throw new Error(errors)
+        }
       }
     })
   },

examples/complete/material/src/constants.js

@@ -0,0 +1,26 @@
+export const LIST_PATH = '/projects'
+export const DETAIL_PATH = ':projectname'
+export const ACCOUNT_PATH = '/account'
+export const LOGIN_PATH = '/login'
+export const SIGNUP_PATH = '/signup'
+
+export const ACCOUNT_FORM_NAME = 'account'
+export const LOGIN_FORM_NAME = 'login'
+export const SIGNUP_FORM_NAME = 'signup'
+export const NEW_PROJECT_FORM_NAME = 'newProject'
+
+export const formNames = {
+  account: ACCOUNT_FORM_NAME,
+  signup: SIGNUP_FORM_NAME,
+  login: LOGIN_FORM_NAME
+}
+
+export const paths = {
+  list: LIST_PATH,
+  account: ACCOUNT_PATH,
+  detail: DETAIL_PATH,
+  login: LOGIN_PATH,
+  signup: SIGNUP_PATH
+}
+
+export default { ...paths, ...formNames }

examples/complete/material/src/containers/Navbar/Navbar.js

@@ -13,7 +13,7 @@ import {
   ACCOUNT_PATH,
   LOGIN_PATH,
   SIGNUP_PATH
-} from 'constants/paths'
+} from 'constants'
 
 // Components
 import AppBar from 'material-ui/AppBar'
@@ -122,7 +122,7 @@ export default class Navbar extends Component {
       <AppBar
         title={
           <Link to={accountExists ? `${LIST_PATH}` : '/'} className={classes.brand}>
-            material
+            material example
           </Link>
         }
         showMenuIconButton={false}

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

@@ -1,86 +1,48 @@
 import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import { Field, reduxForm, submit } from 'redux-form'
-import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
+import { Field, reduxForm } from 'redux-form'
 import RaisedButton from 'material-ui/RaisedButton'
 import TextField from 'components/TextField'
-import { List, ListItem } from 'material-ui/List'
-import AccountCircle from 'material-ui/svg-icons/action/account-circle'
-import { ACCOUNT_FORM_NAME } from 'constants/formNames'
+import { ACCOUNT_FORM_NAME } from 'constants'
+import ProviderDataForm from '../ProviderDataForm'
 import classes from './AccountForm.scss'
 
-export const AccountForm = ({ account, handleSubmit, submitForm, submitting }) => (
+export const AccountForm = ({ account, handleSubmit, submitting }) => (
   <form className={classes.container} onSubmit={handleSubmit}>
     <h4>Account</h4>
     <Field
       name='displayName'
       component={TextField}
-      label='Name'
+      label='Display Name'
     />
     <Field
       name='email'
       component={TextField}
       label='Email'
     />
-    <div>
-      <h4>Linked Accounts</h4>
-      {
-        account.providerData
-          ?
-            <List>
-              {
-                account.providerData.map((providerAccount, i) =>
-                  <ListItem
-                    key={i}
-                    primaryText={providerAccount.providerId}
-                    leftIcon={<AccountCircle />}
-                    nestedItems={[
-                      <ListItem
-                        key='display_name'
-                        primaryText={providerAccount.displayName}
-                      />,
-                      <ListItem
-                        key='email'
-                        label='email'
-                        primaryText={providerAccount.email}
-                        disabled
-                      />
-                    ]}
-                  />
-                )
-              }
-            </List>
-          :
-          null
-      }
-    </div>
-    <div>
-      <RaisedButton
-        label='Save'
-        primary
-        type='submit'
-        onTouchTap={submitForm}
-        disabled={submitting}
-      />
-    </div>
+    {
+      !!account && !!account.providerData &&
+        <div>
+          <h4>Linked Accounts</h4>
+          <ProviderDataForm
+            providerData={account.providerData}
+          />
+        </div>
+    }
+    <RaisedButton
+      primary
+      label='Save'
+      type='submit'
+      className={classes.submit}
+    />
   </form>
 )
 
 AccountForm.propTypes = {
-  account: PropTypes.shape({
-    providerData: PropTypes.array
-  }),
+  account: PropTypes.object,
   handleSubmit: PropTypes.func,
   submitting: PropTypes.bool
 }
 
-const form = reduxForm({
-  form: ACCOUNT_FORM_NAME,
-  enableReinitialization: true
+export default reduxForm({
+  form: ACCOUNT_FORM_NAME
 })(AccountForm)
-
-export default connect(
-  ({ firebase }) => ({
-    initialValues: pathToJS(firebase, 'profile')
-  }),
-)(form)

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

@@ -7,32 +7,29 @@ export const ProviderData = ({ providerData }) => (
   <div className={classes.container}>
     <List>
       {
-        providerData.map((providerAccount, i) =>
+        providerData.map((providerAccount, i) => (
           <ListItem
             key={i}
             primaryText={providerAccount.providerId}
             leftIcon={<AccountCircle />}
             nestedItems={[
               <ListItem
-                key={'display_name'}
                 primaryText={providerAccount.displayName}
               />,
               <ListItem
-                key={'email'}
                 label='email'
                 primaryText={providerAccount.email}
-                disabled
               />
             ]}
           />
-        )
+        ))
       }
     </List>
   </div>
 )
 
 ProviderData.propTypes = {
-  providerData: PropTypes.array
+  providerData: PropTypes.array.isRequired
 }
 
 export default ProviderData

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

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { reduxForm } from 'redux-form'
 import { firebaseConnect, pathToJS, isLoaded } from 'react-redux-firebase'
 import { reduxFirebase as rfConfig } from 'config'
-import { ACCOUNT_FORM_NAME } from 'constants/formNames'
+import { ACCOUNT_FORM_NAME } from 'constants'
 import { UserIsAuthenticated } from 'utils/router'
 import defaultUserImageUrl from 'static/User.png'
 import LoadingSpinner from 'components/LoadingSpinner'
@@ -13,8 +13,7 @@ import classes from './AccountContainer.scss'
 
 @UserIsAuthenticated // redirect to /login if user is not authenticated
 @firebaseConnect() // add this.props.firebase
-@connect(
-  // Map redux state to props
+@connect( // Map redux state to props
   ({ firebase }) => ({
     auth: pathToJS(firebase, 'auth'),
     account: pathToJS(firebase, 'profile'),
@@ -25,31 +24,27 @@ export default class Account extends Component {
     account: PropTypes.object,
     firebase: PropTypes.shape({
       update: PropTypes.func.isRequired,
-      logout: PropTypes.func.isRequired,
-      uploadAvatar: PropTypes.func
+      logout: PropTypes.func.isRequired
     })
   }
 
   state = { modalOpen: false }
 
-  handleLogout = () => {
-    return this.props.firebase.logout()
-  }
+  handleLogout = () => this.props.firebase.logout()
 
   toggleModal = () => {
     this.setState({
       modalOpen: !this.state.modalOpen
     })
   }
 
-  updateAccount = (newData) => {
-    return this.props.firebase
+  updateAccount = (newData) =>
+    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 } = this.props
@@ -64,13 +59,14 @@ export default class Account extends Component {
           <div className={classes.settings}>
             <div className={classes.avatar}>
               <img
-                className={classes['avatar-current']}
+                className={classes.avatarCurrent}
                 src={account && account.avatarUrl || defaultUserImageUrl}
                 onClick={this.toggleModal}
               />
             </div>
             <div className={classes.meta}>
               <AccountForm
+                initialValues={account}
                 account={account}
                 onSubmit={this.updateAccount}
               />