Merge branch 'master' into v1.5.0

Author: Scott Prue

docs/api/connect.md

@@ -33,7 +33,7 @@ const fbWrapped = firebaseConnect([
 // pass todos list from redux as this.props.todosList
 export default connect(({ firebase }) => ({
   todosList: dataToJS(firebase, 'todos'),
-  profile: pathToJS(firebase, 'profile'), // pass profile data as this.props.proifle
+  profile: pathToJS(firebase, 'profile'), // pass profile data as this.props.profile
   auth: pathToJS(firebase, 'auth') // pass auth data as this.props.auth
 }))(fbWrapped)
 ```

docs/roadmap.md

@@ -2,8 +2,6 @@
 
 ## Current Minor Version (`v1.4.0`)
 
-**NOTE**: `v1.4.0` is still in pre-release, please check the [releases page](https://github.com/prescottprue/react-redux-firebase/releases) for the most up to date release information
-
 #### Features
 * `react-native` support (including [complete example](https://github.com/prescottprue/react-redux-firebase/tree/v1.4.0-beta/examples/complete/react-native) app as well as a [create your own recipe](/docs/recipes/react-native.md))
 * Server Side Rendering Support - [#72](https://github.com/prescottprue/react-redux-firebase/issues/72)
@@ -33,6 +31,9 @@
 
 
 ## Next Minor Version (`v1.5.0`)
+
+**NOTE**: `v1.5.0` is still in pre-release, please check the [releases page](https://github.com/prescottprue/react-redux-firebase/releases) for the most up to date release information
+
 * Use `prop-types` package instead of `React.PropTypes` - [#122](https://github.com/prescottprue/react-redux-firebase/pull/122) - thanks [@petetnt](https://github.com/petetnt)
 * New Features for Population - [#132](https://github.com/prescottprue/react-redux-firebase/pull/132) - thanks [@javamonn](https://github.com/javamonn)
   * Lodash supported path syntax for `populates.child`
@@ -67,7 +68,7 @@
 **NOTE:** The changes are unconfirmed and will most likely change
 
 #### Progress
-  * [`v2.0.0-alpha`](https://github.com/prescottprue/react-redux-firebase/tree/v2.0.0-alpha) has been started, view [the branch](https://github.com/prescottprue/react-redux-firebase/tree/v2.0.0-alpha)
+* [`v2.0.0-alpha`](https://github.com/prescottprue/react-redux-firebase/tree/v2.0.0-alpha) has been started, view [the branch](https://github.com/prescottprue/react-redux-firebase/tree/v2.0.0-alpha)
 
 #### Breaking Changes
 * Remove usage of `Immutable.js` and Immutable Maps (no more need for `pathToJS()` & `dataToJS()` to load data from redux)

examples/snippets/populates/App.js

@@ -9,20 +9,21 @@ import {
   pathToJS,
   dataToJS
 } from 'react-redux-firebase'
-import TodoItem from './TodoItem'
 
 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' }
 ]
 
+// gather projects and matching owners from firebase and place into redux
 @firebaseConnect([
-  { path: '/projects', populates },
+  { path: 'projects', populates },
 ])
+// projects with owner populated from redux into component props
 @connect(
-  ({firebase}) => ({
-    projects: populatedDataToJS(firebase, '/projects', populates),
+  ({ firebase }) => ({
+    projects: populatedDataToJS(firebase, 'projects', populates),
   })
 )
 export default class App extends Component {
@@ -43,10 +44,10 @@ export default class App extends Component {
                         ? 'Loading'
                         : (isEmpty(projects))
                           ? 'Todo list is empty'
-                          : map(projects, (todo, id) => (
+                          : map(projects, (project, id) => (
                               <div>
                                 Name: {project.name}
-                                Owner: { owner.displayName || owner }
+                                Owner: { project.owner.displayName }
                               </div>
                             ))
     return (

examples/snippets/populates/README.md

@@ -0,0 +1,30 @@
+# State Based Query Example
+
+This example shows using data from redux state to be used in queries. A good example of this is querying based on the current user's UID.
+
+**Note** Example does not use routing, which is what will commonly be used when creating a full application. For how to build with routing, please view [the routing recipes section of the docs.](/docs/recipes/routing.md/)
+
+## What It Does
+
+1. Top level component uses `firebaseConnect` function to set a listener for the `projects` path on firebase. When the listener updates it also goes and gets the object from the `users` path that matches the owner from each project. This will be used in the next step, but for now the data has been loaded into redux.
+  ```js
+  const populates = [
+    { child: 'owner', root: 'users' },
+  ]
+
+  @firebaseConnect([
+    { path: 'projects', populates },
+  ])
+  ```
+
+1. Next is the `@connect` function which allows us to grab from redux state and pass that data in as props to the component. In this case we are going to get projects with the owner parameter on each project replaced with the matching user:
+
+  ```js
+  @connect(
+    ({firebase}) => ({
+      projects: populatedDataToJS(firebase, 'projects', populates),
+    })
+  )
+  ```
+
+1. `isLoaded` can be used as usual to wait for data to be loaded. The projects list has the owner parameter "populated" from users.

examples/snippets/stateBasedQuery/App.js

@@ -1,76 +1,33 @@
 import react, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import {
-  firebaseConnect,
-  isLoaded,
-  isEmpty,
-  pathToJS,
-  dataToJS
-} from 'react-redux-firebase'
-
-import logo from './logo.svg'
-import TodoItem from './TodoItem'
-import './App.css'
+import { isLoaded, isEmpty, pathToJS } from 'react-redux-firebase'
+import TodosView from './Todos'
+import LoginView from './Todos'
 
 class App extends Component {
   static propTypes = {
-    todos: PropTypes.object
+    auth: PropTypes.object
   }
 
   render () {
-    const { todos } = this.props
+    const { auth } = this.props
+
+    // handle initial loading of auth
+    if (!isLoaded(auth)) {
+      return <div>Loading...</div>
+    }
 
-    const todosList = (!isLoaded(todos))
-                        ? 'Loading'
-                        : (isEmpty(todos))
-                          ? 'Todo list is empty'
-                          : Object.keys(todos).map((key) => (
-                            <TodoItem key={key} id={key} todo={todos[key]} />
-                          ))
-    return (
-      <div className='App'>
-        <div className='App-header'>
-          <h2>react-redux-firebase Auth Based Query Demo</h2>
-          <img src={logo} className='App-logo' alt='logo' />
-        </div>
-        <div className='App-todos'>
-          <h4>
-            Loaded From
-            <span className='App-Url'>
-              <a href='https://react-redux-firebase.firebaseio.com/'>
-                react-redux-firebase.firebaseio.com
-              </a>
-            </span>
-          </h4>
-          <h4>Todos List</h4>
-          {todosList}
-        </div>
-      </div>
-    )
+    if (isEmpty(auth)) {
+      return <LoginView />
+    }
+
+    return <TodosView auth={auth} />
   }
 }
 
-const authWrappedComponent = connect(
+export default connect(
   ({ firebase }) => ({
     auth: pathToJS(firebase, 'auth')
   })
 )(App)
-
-const fbWrappedComponent = firebaseConnect(
-  ({ auth }) => ([
-    `/todos#orderByChild=uid&equalTo=${auth ? auth.uid : ''}`
-    /* object notation equivalent
-    {
-      path: '/todos',
-      queryParams: ['orderByChild=uid', `equalTo=${auth ? auth.uid : ''}`]
-    }
-    */
-  ])
-)(authWrappedComponent)
-
-export default connect(
-  ({ firebase }) => ({
-    todos: dataToJS(firebase, 'todos')
-  })
-)(fbWrappedComponent)

examples/snippets/stateBasedQuery/README.md

@@ -2,13 +2,47 @@
 
 This example shows using data from redux state to be used in queries. A good example of this is querying based on the current user's UID.
 
-## Auth Wrapping
-By wrapping component in connect function, you bring `auth` from redux state into a prop name "auth":
-
-```js
-const authWrappedComponent = connect(
-  ({ firebase }) => ({
-    auth: pathToJS(firebase, 'auth')
-  })
-)(App)
-```
+**Note** Example does not use routing, which is what will commonly be used when creating a full application. For how to build with routing, please view [the routing recipes section of the docs.](/docs/recipes/routing.md/)
+
+## What It Does
+
+1. Top level component uses `connect` function to bring `auth` from redux state into a prop name "auth":
+  ```js
+  const authWrappedComponent = connect(
+    ({ firebase }) => ({
+      auth: pathToJS(firebase, 'auth')
+    })
+  )(App)
+  ```
+
+1. That component then uses `isLoaded` and `isEmpty` to show different views based on auth state (logged in or not):
+
+  ```js
+  render () {
+    const { auth } = this.props
+
+    // handle initial loading of auth
+    if (!isLoaded(auth)) {
+      return <div>Loading...</div>
+    }
+
+    // auth is empty (i.e. not logged in)
+    if (isEmpty(auth)) {
+      return <LoginView />
+    }
+
+    // auth passed down to TodosView
+    return <TodosView auth={auth} />
+  }
+  ```
+
+1. Todos then uses `auth.uid` as part of a query for todos:
+
+  ```js
+  const fbWrappedComponent = firebaseConnect(({ auth }) => ([ // auth comes from props
+    {
+      path: 'todos',
+      queryParams: ['orderByChild=uid', `equalTo=${auth}`]
+    }
+  ]))(authWrappedComponent)
+  ```

examples/snippets/stateBasedQuery/Todos.js

@@ -0,0 +1,51 @@
+import react, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import {
+  firebaseConnect,
+  isLoaded,
+  isEmpty,
+  pathToJS,
+  dataToJS
+} from 'react-redux-firebase'
+
+import logo from './logo.svg'
+import TodoItem from './TodoItem'
+
+class Todos extends Component {
+  static propTypes = {
+    auth: PropTypes.shape({
+      uid: PropTypes.string.isRequired
+    }),
+    todos: PropTypes.object
+  }
+
+  render () {
+    const { todos } = this.props
+
+    const todosList = (!isLoaded(todos))
+                        ? 'Loading'
+                        : (isEmpty(todos))
+                          ? 'Todo list is empty'
+                          : Object.keys(todos).map((key) => (
+                            <TodoItem key={key} id={key} todo={todos[key]} />
+                          ))
+    return (
+      <div className='Todos'>
+        {todosList}
+      </div>
+    )
+  }
+}
+
+const fbWrappedComponent = firebaseConnect(({ auth }) => ([ // auth comes from props
+  {
+    path: 'todos',
+    queryParams: ['orderByChild=uid', `equalTo=${auth}`]
+  }
+]))(authWrappedComponent)
+
+export default connect(
+  ({ firebase }) => ({
+    todos: dataToJS(firebase, 'todos')
+  })
+)(fbWrappedComponent)

examples/snippets/webpack2/index.html

@@ -1,5 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head></head>
-  <body><script src="./dist/app.bundle.js"></script></body>
+  <body>
+    <div id="app"></div>
+    <script src="./dist/app.bundle.js"></script>
+  </body>
 </html>

examples/snippets/webpack2/package.json

@@ -1,19 +1,18 @@
 {
-  "name": "babel6-webpack2-react-tree-shaking",
+  "name": "react-redux-firebase-webpack2-example",
   "version": "0.0.0",
   "dependencies": {
+    "react": "15.4.1",
+    "react-dom": "15.4.1",
+    "react-redux": "^5.0.5",
     "react-redux-firebase": "^1.2.5"
   },
   "devDependencies": {
     "babel-core": "6.18.2",
     "babel-loader": "6.2.8",
     "babel-preset-es2015": "6.18.0",
     "babel-preset-react": "6.16.0",
-    "babili": "0.0.9",
-    "babili-webpack-plugin": "0.0.7",
     "http-server": "0.9.0",
-    "react": "15.4.1",
-    "react-dom": "15.4.1",
     "webpack": "^2.2.1"
   },
   "scripts": {

examples/snippets/webpack2/src/app.js

@@ -1,13 +1,25 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux'
+import createStore from './store'
 import { firebaseConnect } from 'react-redux-firebase';
 
-const App = React.createClass({
+const store = createStore()
+
+class Page extends Component {
   render() {
     return (
       <div>Hello World</div>
     );
   }
-});
+}
+
+const ConnectedPage = firebaseConnect()(Page)
+
+const App = () => (
+  <Provider store={store}>
+    <ConnectedPage />
+  </Provider>
+);
 
 ReactDOM.render(<App/>, document.querySelector('#app'));