Firebase updated to v3.9.0. More material example updates.

* Material example updates
  * /projects is now protected route
  * pushWithMeta is used in projects
  * comments updated

Author: prescottprue

docs/api/compose.md

@@ -25,6 +25,9 @@ Middleware that handles configuration (placed in redux's
         changes. Argument Pattern: `(authData, firebase, dispatch)`
     -   `config.onRedirectResult` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function run when redirect
         result is returned. Argument Pattern: `(authData, firebase, dispatch)`
+    -   `config.customAuthParameters` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** Object for setting which
+
+            customAuthParameters are passed to external auth providers.
     -   `config.profileFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying how user profile is saved.
     -   `config.uploadFileDataFactory` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Factory for modifying
         how file meta data is written during file uploads
@@ -63,4 +66,18 @@ const createStoreWithFirebase = compose(
 const store = createStoreWithFirebase(rootReducer, initialState)
 ```
 
+_Custom Auth Parameters_
+
+```javascript
+// Follow Setup example with the following config:
+const config = {
+  customAuthParameters: {
+     google: {
+       // prompts user to select account on every google login
+       prompt: 'select_account'
+     }
+  }
+}
+```
+
 Returns **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** That accepts a component a returns a wrapped version of component

docs/api/helpers.md

@@ -9,7 +9,8 @@ Detect whether items are loaded yet or not
 **Examples**
 
 ```javascript
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { firebaseConnect, isLoaded, dataToJS } from 'react-redux-firebase'
 ```
@@ -28,7 +29,8 @@ Detect whether items are empty or not
 **Examples**
 
 ```javascript
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { firebaseConnect, isEmpty, dataToJS } from 'react-redux-firebase'
 ```

docs/queries.md

@@ -128,7 +128,7 @@ Limit query results to include a range starting at a specific number
 
 **Internal Method**: [ `limitToLast`](https://firebase.google.com/docs/reference/js/firebase.database.Query#limitToLast)
 
-#### Example
+#### Examples
 
 1. Starting at the fifth item
   ```js
@@ -146,6 +146,9 @@ Limit query results to include a range starting at a specific number
   ```
 
 ## endAt
+
+#### Examples
+1. Usage with startAt
 ```js
 @firebaseConnect([
   'todos#orderByChild=added&startAt=1&endAt=5'
@@ -156,6 +159,14 @@ Limit query results to include a range starting at a specific number
 ## equalTo
 Limit query results with parameter equal to previous query method (i.e when used with orderByChild, it limits results with child equal to provided value). Internally runs [Firebase's `equalTo`](https://firebase.google.com/docs/reference/js/firebase.database.Query#equalTo).
 
+### Parsing
+The following are internally parsed:
+  * `null`
+  * `boolean`
+  * `number`
+
+This means the actual value will be parsed instead of the string containing the value. If you do not want this to happen, look at the `notParsed` query parameter below.
+
 #### Examples
 1. Order by child parameter
 ```js
@@ -171,7 +182,6 @@ Can be used to keep internal parsing from happening. Useful when attempting to s
 
 #### Examples
 1. Order by child parameter equal to a number string. Equivalent of searching for `'123'` (where as not using `notParsed` would search for children equal to `123`)
-
 ```js
 @firebaseConnect([
   {

examples/complete/material/src/config.js

@@ -13,7 +13,7 @@ export const firebase = {
 export const reduxFirebase = {
   userProfile: 'users', // root that user profiles are written to
   enableLogging: false, // enable/disable Firebase Database Logging
-  updateProfileOnLogin: false // enable/disable updating of profile on login
+  updateProfileOnLogin: false, // enable/disable updating of profile on login
   // profileDecorator: (userData) => ({ email: userData.email }) // customize format of user profile
 }
 

examples/complete/material/src/routes/Home/components/TodoItem/TodoItem.js

@@ -38,7 +38,7 @@ export default class TodoItem extends Component {
                 {todo.text}
               </span><br />
               <span className='TodoItem-Owner'>
-                {
+                Owner: {
                   isObject(todo.owner)
                   ? todo.owner.displayName || todo.owner.username
                   : todo.owner || 'No Owner'

examples/complete/material/src/routes/Home/containers/HomeContainer.js

@@ -7,9 +7,9 @@ import {
   firebaseConnect,
   isLoaded,
   pathToJS,
-  dataToJS,
-  // orderedToJS, // needed for ordered list
-  populatedDataToJS // needed for populated list
+  // dataToJS, // needed for full list and once
+  orderedToJS, // needed for ordered list
+  // populatedDataToJS // needed for populated list
 } from 'react-redux-firebase'
 import CircularProgress from 'material-ui/CircularProgress'
 import Snackbar from 'material-ui/Snackbar'
@@ -20,23 +20,22 @@ import TodoItem from '../components/TodoItem'
 import NewTodoPanel from '../components/NewTodoPanel'
 import classes from './HomeContainer.scss'
 
-const populates = [
-  { child: 'owner', root: 'users', keyProp: 'key' }
-]
+// const populates = [{ child: 'owner', root: 'users', keyProp: 'uid' }]
 
 @firebaseConnect([
   // 'todos' // sync full list of todos
-  // { path: '/projects', type: 'once' } // for loading once instead of binding
-  // { path: 'todos', queryParams: ['limitToFirst=20'] } // limit to first 20
-  { path: 'todos', populates } // populate
-  // { path: 'todos', queryParams: ['orderByChild=text'] }, // list todos alphabetically
+  // { path: 'todos', type: 'once' } // for loading once instead of binding
+  { path: 'todos', queryParams: ['orderByKey', 'limitToLast=8'] } // limit to first 20
+  // { path: 'todos', populates } // populate
+  // { path: 'todos', queryParams: ['orderByKey', 'limitToLast=5'] }, // get five most recent (array will need to be inverted)
 ])
 @connect(
   ({firebase}) => ({
     auth: pathToJS(firebase, 'auth'),
+    account: pathToJS(firebase, 'profile'),
     // todos: dataToJS(firebase, 'todos')
-    todos: populatedDataToJS(firebase, '/todos', populates), // if populating
-    // todos: orderedToJS(firebase, 'todos'), // if using ordering such as orderByChild
+    // todos: populatedDataToJS(firebase, '/todos', populates), // if populating
+    todos: orderedToJS(firebase, 'todos'), // if using ordering such as orderByChild
   })
 )
 export default class Home extends Component {
@@ -72,10 +71,12 @@ export default class Home extends Component {
     if (!auth || !auth.uid) {
       return this.setState({ error: 'You must be Logged into Delete' })
     }
-    if (todos[id].owner !== auth.uid) {
-      return this.setState({ error: 'You must own todo to delete' })
-    }
-    firebase.remove(`/todos/${id}`)
+    return this.setState({ error: 'Delete example requires using populate' })
+    // only works if populated
+    // if (todos[id].owner.uid !== auth.uid) {
+    //   return this.setState({ error: 'You must own todo to delete' })
+    // }
+    // firebase.remove(`/todos/${id}`)
   }
 
   handleAdd = (newTodo) => {
@@ -85,15 +86,16 @@ export default class Home extends Component {
     } else {
       newTodo.owner = 'Anonymous'
     }
-    // using this.props.firebase.pushWithMeta would attach createdBy and createdAt
+    // attach a timestamp
+    newTodo.createdAt = this.props.firebase.database.ServerValue.TIMESTAMP
+    // using this.props.firebase.pushWithMeta here instead would automatically attach createdBy and createdAt
     return this.props.firebase.push('/todos', newTodo)
   }
 
   render () {
     const { todos } = this.props
     const { error } = this.state
-    console.log('todos:', todos)
-
+    console.log('this.props.account', this.props.account)
     return (
       <div className={classes.container} style={{ color: Theme.palette.primary2Color }}>
         {
@@ -115,6 +117,10 @@ export default class Home extends Component {
               redux-firebasev3.firebaseio.com
             </a>
           </span>
+          <span style={{ marginTop: '2rem' }}>
+            <strong>Note: </strong>
+            old data is removed
+          </span>
         </div>
         <div className={classes.todos}>
           <NewTodoPanel
@@ -129,7 +135,8 @@ export default class Home extends Component {
                 <List className={classes.list}>
                   {
                     todos &&
-                      map(todos, (todo, id) => (
+                    // todos list is reversed so the most recent is first
+                      map(todos.reverse(), (todo, id) => (
                         <TodoItem
                           key={id}
                           id={id}

examples/complete/material/src/routes/Projects/containers/ProjectsContainer.js

@@ -10,16 +10,18 @@ import {
   isEmpty
 } from 'react-redux-firebase'
 import { LIST_PATH } from 'constants'
+import { UserIsAuthenticated } from 'utils/router'
+import LoadingSpinner from 'components/LoadingSpinner'
 import ProjectTile from '../components/ProjectTile/ProjectTile'
 import NewProjectTile from '../components/NewProjectTile/NewProjectTile'
 import NewProjectDialog from '../components/NewProjectDialog/NewProjectDialog'
-import LoadingSpinner from 'components/LoadingSpinner'
 import classes from './ProjectsContainer.scss'
 
 const populates = [
   { child: 'createdBy', root: 'users', keyProp: 'uid' }
 ]
 
+@UserIsAuthenticated
 @firebaseConnect([
   { path: 'projects', populates }
   // 'projects#populate=owner:users' // string equivalent
@@ -50,10 +52,7 @@ export default class Projects extends Component {
 
   newSubmit = (newProject) => {
     const { auth, firebase: { push } } = this.props
-    if (auth.uid) {
-      newProject.owner = auth.uid
-    }
-    push('projects', newProject)
+    return pushWithMeta('projects', newProject)
       .then(() => this.setState({ newProjectModal: false }))
       .catch(err => {
         // TODO: Show Snackbar
@@ -62,7 +61,7 @@ export default class Projects extends Component {
   }
 
   deleteProject = (key) => {
-    this.props.firebase.remove(`projects/${key}`)
+    return this.props.firebase.remove(`projects/${key}`)
       .then(() => {
         // TODO: Show snackbar
       })
@@ -86,7 +85,6 @@ export default class Projects extends Component {
     const { projects, auth } = this.props
     const { newProjectModal } = this.state
 
-
     return (
       <div className={classes.container}>
         {