childParam option handled in populatedDataToJS helper. Populates snip…

…pet added.

examples/snippets/decorators/App.js

@@ -4,10 +4,10 @@ import TodoItem from './TodoItem'
 
 // redux/firebase
 import { connect } from 'react-redux'
-import { firebase, helpers } from 'react-redux-firebase'
+import { firebaseConnect, helpers } from 'react-redux-firebase'
 const { isLoaded, isEmpty, pathToJS, dataToJS } = helpers
 
-@firebase([
+@firebaseConnect([
   '/todos'
 ])
 @connect(

examples/snippets/populates/App.js

@@ -0,0 +1,57 @@
+import React, { PropTypes, Component } from 'react'
+import { map } from 'lodash'
+import TodoItem from './TodoItem'
+
+// redux/firebase
+import { connect } from 'react-redux'
+import { firebaseConnect, helpers } from 'react-redux-firebase'
+const { populatedDataToJS, isLoaded, pathToJS, dataToJS } = helpers
+const populates = [
+  { child: 'owner', root: 'users' },
+  // or if you want a param of the populate child such as user's display name
+  // { child: 'owner', root: 'users', childParam: 'displayName' }
+]
+
+@firebaseConnect([
+  { path: '/projects', populates },
+])
+@connect(
+  ({firebase}) => ({
+    projects: populatedDataToJS(firebase, '/projects', populates),
+  })
+)
+export default class App extends Component {
+  static propTypes = {
+    projects: PropTypes.shape({
+      name: PropTypes.string,
+      owner: PropTypes.object // string if using childParam: 'displayName'
+    }),
+    firebase: PropTypes.shape({
+      set: PropTypes.func.isRequired,
+      remove: PropTypes.func.isRequired
+    })
+  }
+  render () {
+    const { firebase, projects } = this.props
+
+    const projectsList = (!isLoaded(projects))
+                        ? 'Loading'
+                        : (isEmpty(projects))
+                          ? 'Todo list is empty'
+                          : map(projects, (todo, id) => (
+                              <div>
+                                Name: {project.name}
+                                Owner: { owner.displayName || owner }
+                              </div>
+                            ))
+    return (
+      <div>
+        <h2>react-redux-firebase populate snippet</h2>
+        <div>
+          <h4>Projects List</h4>
+          {projectsList}
+        </div>
+      </div>
+    )
+  }
+}

src/helpers.js

@@ -184,16 +184,19 @@ export const dataToJS = (data, path, notSetValue) => {
  * @param {Object} list - Path of parameter to load
  * @param {Object} populate - Object with population settings
  */
-export const buildChildList = (data, list, populate) =>
+export const buildChildList = (data, list, p) =>
   mapValues(list, (val, key) => {
     let getKey = val
      // Handle key: true lists
     if (val === true) {
       getKey = key
     }
+    const pathString = p.childParam
+      ? `${p.root}/${getKey}/${p.childParam}`
+      : `${p.root}/${getKey}`
     // Set to child under key if populate child exists
-    if (dataToJS(data, `${populate.root}/${getKey}`)) {
-      return dataToJS(data, `${populate.root}/${getKey}`)
+    if (dataToJS(data, pathString)) {
+      return dataToJS(data, pathString)
     }
     // Populate child does not exist
     return val === true ? val : getKey
@@ -230,7 +233,7 @@ export const populatedDataToJS = (data, path, populates, notSetValue) => {
   }
   // Handle undefined child
   if (!dataToJS(data, path, notSetValue)) {
-    return undefined
+    return dataToJS(data, path, notSetValue)
   }
   const populateObjs = getPopulateObjs(populates)
   // reduce array of populates to object of combined populated data
@@ -251,10 +254,13 @@ export const populatedDataToJS = (data, path, populates, notSetValue) => {
         }
         // populate child is key
         if (isString(child[p.child])) {
-          if (dataToJS(data, `${p.root}/${child[p.child]}`)) {
+          const pathString = p.childParam
+            ? `${p.root}/${child[p.child]}/${p.childParam}`
+            : `${p.root}/${child[p.child]}`
+          if (dataToJS(data, pathString)) {
             return {
               ...child,
-              [p.child]: dataToJS(data, `${p.root}/${child[p.child]}`)
+              [p.child]: dataToJS(data, pathString)
             }
           }
           // matching child does not exist