fix(docs): cleanup storeAs section of Firestore docs

Author: prescottprue

docs/firestore.md

@@ -1,7 +1,7 @@
 # Firestore
 
-To correctly begin using firestore, make sure you have the following:
-* `v2.0.0-beta.11` or higher (most like to use `next` tag in package.json)
+To begin using Firestore with `react-redux-firebase`, make sure you have the following:
+* `v2.0.0` or higher of `react-redux-firebase`
 * Install `redux-firestore` in your project using `npm i --save redux-firestore@latest`
 * `firestore` imported with `import 'firebase/firestore'`
 * `firestore` initialize with `firebase.firestore()`
@@ -17,27 +17,26 @@ import 'firebase/firestore' // add this to use Firestore
 import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase'
 import { reduxFirestore, firestoreReducer } from 'redux-firestore'
 
-const firebaseConfig = {}
-
 // react-redux-firebase config
 const rrfConfig = {
   userProfile: 'users',
   // useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
 }
 
-// initialize firebase instance
-firebase.initializeApp(firebaseConfig) // <- new to v2.*.*
+// initialize firebase instance with config from console
+const firebaseConfig = {}
+firebase.initializeApp(firebaseConfig)
 
 // initialize Firestore
 firebase.firestore()
 
-// Add reduxReduxFirebase enhancer when making store creator
+// Add BOTH store enhancers when making store creator
 const createStoreWithFirebase = compose(
   reactReduxFirebase(firebase, rrfConfig),
   reduxFirestore(firebase)
 )(createStore)
 
-// Add Firebase to reducers
+// Add firebase and firestore to reducers
 const rootReducer = combineReducers({
   firebase: firebaseStateReducer,
   firestore: firestoreReducer
@@ -216,13 +215,38 @@ export default enhance(SomeComponent)
 
 For more information [on using recompose visit the docs](https://github.com/acdlite/recompose/blob/master/docs/API.md)
 
-## storeAs {#populate}
+### storeAs {#storeAs}
+
+By default the results of queries are stored in redux under the path of the query. If you would like to change where the query results are stored in redux, use `storeAs`.
 
-`storeAs` is not yet supported for the Firestore integration, but will be coming soon.
+#### Examples
+1. Querying the same path with different query parameters
+
+```js
+import { compose } from 'redux'
+import { connect } from 'react-redux'
+import { firestoreConnect } from 'react-redux-firebase'
+const myProjectsReduxName = 'myProjects'
+
+compose(
+  firestoreConnect(props => [
+    { path: 'projects' },
+    {
+      path: 'projects',
+      storeAs: myProjectsReduxName,
+      queryParams: ['orderByChild=uid', '123']
+    }
+  ]),
+  connect((state, props) => ({
+    projects: state.firestore.data.projects,
+    myProjects: state.firestore.data[myProjectsReduxName], // use storeAs path to gather from redux
+  }))
+)
+```
 
 ## Populate {#populate}
 
-Populate is not yet supported for the Firestore integration, but will be coming soon.
+Populate is not yet supported for the Firestore integration, but will be coming soon. Progress can be tracked [within issue #48](https://github.com/prescottprue/redux-firestore/issues/48).
 
 ## More Info {#more}
 

docs/queries.md

@@ -17,13 +17,15 @@ import { connect } from 'react-redux'
 import { compose } from 'redux'
 import { withFirebase } from 'react-redux-firebase'
 
+const todosPath = 'todos'
+
 const Todos = ({ firebase, todos }) => (
   <div>
     <h1>Todos</h1>
     <div>
       {JSON.stringify(todos, null, 2)}
     </div>
-    <button onClick={() => firebase.watchEvent('value', 'todos')}>
+    <button onClick={() => firebase.watchEvent('value', todosPath)}>
       Load Todos
     </button>
   </div>
@@ -32,7 +34,8 @@ const Todos = ({ firebase, todos }) => (
 export default compose(
   withFirebase,
   connect((state) => ({
-    todos: state.firebase.data.todos
+    todos: state.firebase.data[todosPath],
+    // todos: state.firebase.ordered[todosPath] // for ordered data (array)
   }))
 )(Todos)
 ```
@@ -79,44 +82,6 @@ export default compose(
 
 By default the results of queries are stored in redux under the path of the query. If you would like to change where the query results are stored in redux, use [`storeAs` (more below)](#storeAs).
 
-#### Ordered vs Data (by key)
-
-##### data {#data}
-
-In order to get data from state by key, use `data`.
-
-###### Examples
-1. Get an object of projects by key
-
-```js
-compose(
-  firebaseConnect(props => [
-    { path: 'projects' }
-  ]),
-  connect((state, props) => ({
-    projects: state.firebase.data.projects,
-  }))
-)
-```
-
-##### ordered {#ordered}
-
-In order to get ordered data, use `ordered`
-
-###### Examples
-1. Get list of projects ordered by key
-
-```js
-compose(
-  firebaseConnect(props => [
-    { path: 'projects', queryParams: ['orderByKey'] }
-  ]),
-  connect((state, props) => ({
-    projects: state.firebase.ordered.projects,
-  }))
-)
-```
-
 #### Waiting For Data To Load {#loading}
 
 The `isLoaded` utility is helpful in checking to see if data has loaded. Check loaded state by passing it a list of props:
@@ -139,13 +104,9 @@ const Todos = ({ firebase, todos }) => {
   return (
     <div>
       <h1>Todos</h1>
-      <ul>
-        {
-          Object.keys(todos).map((key, id) =>
-            <TodoItem key={key} id={id} todo={todos[key]}/>
-          )
-        }
-      </ul>
+      <div>
+        {JSON.stringify(todos, null, 2)}
+      </div>
     </div>
   )
 }
@@ -154,11 +115,9 @@ export default compose(
   firebaseConnect((props) => [
     { path: 'todos' } // string equivalent 'todos'
   ]),
-  connect(
-    (state) => ({
-      todos: state.firebase.data.todos,
-    })
-  )
+  connect((state) => ({
+    todos: state.firebase.data.todos,
+  }))
 )(Todos)
 ```
 
@@ -167,7 +126,7 @@ export default compose(
 Using [`recompose`](https://github.com/acdlite/recompose) is a nice way to keep your react code clean and functional. Useful Higher Order Components are offered such as `branch` (similar to the `if` statements from the last example) making for much cleaner construction of your own HOCs:
 
 ```js
-import { some } from 'lodash'
+import { get, some } from 'lodash'
 import LoadingSpinner from 'components/LoadingSpinner' // or wherever your spinner component is
 import { isLoaded } from 'react-redux-firebase'
 import {
@@ -177,13 +136,27 @@ import {
   renderComponent
 } from 'recompose'
 
-// HOC that shows loading spinner component while condition is true
-export const spinnerWhile = condition =>
-  branch(condition, renderComponent(LoadingSpinner))
+// HOC that shows a component while condition is true
+export const renderWhile = (condition, component) =>
+  branch(condition, renderComponent(component))
 
 // HOC that shows loading spinner component while list of propNames are loading
 export const spinnerWhileLoading = propNames =>
-  spinnerWhile(props => some(propNames, name => !isLoaded(props[name])))
+  renderWhile(
+    props => some(propNames, name => !isLoaded(get(props, name))),
+    LoadingSpinner
+  )
+
+// HOC that shows a component while any of a list of props isEmpty
+export const renderIfEmpty = (propsNames, component) =>
+  renderWhile(
+    // Any of the listed prop name correspond to empty props (supporting dot path names)
+    props => some(propNames, (name) => {
+      const propValue = get(props, name)
+      return isLoaded(propValue) && isEmpty(propValue)
+    }),
+    component
+  )
 ```
 
 That can then be used in HOC compositions to wait for data to load like so:
@@ -193,10 +166,56 @@ import { compose } from 'redux'
 import { connect } from 'react-redux'
 import { firebaseConnect } from 'react-redux-firebase'
 
+const EmptyMessage = () => <div>No Projects Found</div>
+
 const enhance = compose(
+  // set/unset listener to "projects" path on component mount/unmount
   firebaseConnect(['projects']),
+  // map projects from redux state to props
   connect(({ firebase: { data: { projects } } }) => ({ projects })),
-  spinnerWhileLoading(['projects'])
+  // show loading spinner while projects are loading
+  spinnerWhileLoading(['projects']),
+  // render empty message if projects are not found
+  renderIfEmpty(['projects'], EmptyMessage)
+)
+```
+
+#### Formats
+Two portions of redux state contain data resulting from queries. `state.firebase.ordered` contains array formatted data while `state.firebase.data` contains data store by key
+
+##### data {#data}
+
+In order to get data from state by key, use `data`.
+
+###### Examples
+1. Get an object of projects by key
+
+```js
+compose(
+  firebaseConnect(props => [
+    { path: 'projects' }
+  ]),
+  connect((state, props) => ({
+    projects: state.firebase.data.projects,
+  }))
+)
+```
+
+##### ordered {#ordered}
+
+In order to get ordered data, use `ordered`
+
+###### Examples
+1. Get list of projects ordered by key
+
+```js
+compose(
+  firebaseConnect(props => [
+    { path: 'projects', queryParams: ['orderByKey'] }
+  ]),
+  connect((state, props) => ({
+    projects: state.firebase.ordered.projects,
+  }))
 )
 ```
 
@@ -484,7 +503,7 @@ compose(
 
 #### Why?
 
-Data is stored in redux under the path of the query for convince. This means that two different queries to the same path (i.e. `todos`) will both place data into `state.data.todos` even if their query parameters are different.
+Data is stored in redux under the path of the query for convenience. This means that two different queries to the same path (i.e. `todos`) will both place data into `state.data.todos` even if their query parameters are different.
 
 
 ### Populate {#populate}