v2.0.0-beta.19 (prescottprue#356)

* feat(firestoreConnect): support `componentWillReceiveProps` in `firestoreConnect` (props/query params change) - prescottprue#354 - @danleavitt0
* feat(docs): actions docs updated with `recompose` examples (for more simple functional components)
* fix(docs): profile docs updated with new wording (clarifies usage)
* fix(build): `codecov` npm script updated to fix warning

Author: prescottprue

docs/recipes/actions.md

@@ -1,19 +1,20 @@
 # Actions
-react-redux-firebase comes with built in async action creators for all parts of Firebase including storage, auth, Real Time Database, and Firestore (firestore requires extra setup).
 
-For more on what [an async action creator is](http://redux.js.org/docs/advanced/AsyncActions.html#async-action-creators), please visit the [section on it in the redux-docs](http://redux.js.org/docs/advanced/AsyncActions.html#async-action-creators)
+react-redux-firebase comes with built in async action creators for all parts of Firebase including storage, auth, Real Time Database, and Firestore (firestore requires extra setup). These action creators dispatch actions which are then handled by the reducers. The examples below show using action creators as promises, but it is also possible to use redux state.
+
+For more on what [an async action creator is](http://redux.js.org/docs/advanced/AsyncActions.html#async-action-creators), please visit the [section on it in the redux-docs](http://redux.js.org/docs/advanced/AsyncActions.html#async-action-creators).
 
 ## Components
 Firebase actions can be accessed within a component by using either the [`withFirebase`](/docs/api/withFirebase) wrapper or the [`firebaseConnect` wrapper](/docs/api/firebaseConnect) like so:
 
-#### Pure Component
+#### Functional Component
 ```js
 import React from 'react'
 import PropTypes from 'prop-types'
 import { firebaseConnect, withFirebase } from 'react-redux-firebase'
 
-const SimpleComponent = () => (
-  <button onClick={() => this.props.firebase.push('todos', { some: 'data' })}>
+const SimpleComponent = (props) => (
+  <button onClick={() => props.firebase.push('todos', { some: 'data' })}>
     Test Push
   </button>
 )
@@ -29,9 +30,41 @@ export default withFirebase(SimpleComponent)
 // export default firebaseConnect()(SimpleComponent)
 ```
 
-#### Stateful Component
+When using functional components, [recompose](https://github.com/acdlite/recompose/blob/master/docs/API.md) is a nice utility (think of it like lodash for Functional React Components):
+
+```js
+import React from 'react'
+import PropTypes from 'prop-types'
+import { compose } from 'recompose'
+import { withFirebase } from 'react-redux-firebase'
+
+const SimpleComponent = ({ createTodo }) => (
+  <button onClick={createTodo}>
+    Test Push
+  </button>
+)
+
+SimpleComponent.propTypes = {
+  firebase: PropTypes.shape({
+    push: PropTypes.func.isRequired
+  })
+}
+
+export default compose(
+  withFirebase,
+  withHandlers({
+    createTodo: props => event => {
+      return props.firebase.push('todos', { some: 'data' })
+    }
+  })
+)(SimpleComponent)
+// firebaseConnect can also be used (helpful for creating listeners at the same time)
+// export default firebaseConnect()(SimpleComponent)
+```
+
+#### Stateful Components
 
-**Wrapping A Component**
+**Wrapping A Class Component**
 
 ```js
 import React, { Component } from 'react'
@@ -59,9 +92,12 @@ class SimpleComponent extends Component {
 
   render() {
     return (
-      <button onClick={this.testPush}>
-        Test Push
-      </button>
+      <div>
+        <span>Was sent: {this.state.wasSent}</span>
+        <button onClick={this.testPush}>
+          Test Push
+        </button>
+      </div>
     )
   }
 }
@@ -71,20 +107,19 @@ class SimpleComponent extends Component {
 
 Or if you are using decorators, you can accomplish the same thing with
 ```js
-@firebaseConnect()
+@firebaseConnect() // @withFirebase can also be used
 export default class SimpleComponent extends Component {
   // same component code from above
 }
 ```
 
-**Context Types**
+**Directly From Context**
 
 `react-redux` passes store through `context` using `<Provider>`, so you can grab `store.firebase`:
 
 ```js
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { firebaseConnect } from 'react-redux-firebase'
 
 export default class SimpleComponent extends Component {
   static contextTypes = {
@@ -105,14 +140,71 @@ export default class SimpleComponent extends Component {
 
   render() {
     return (
-      <button onClick={this.testPush}>
-        Test Push
-      </button>
+      <div>
+        <span>Was sent: {this.state.wasSent}</span>
+        <button onClick={this.testPush}>
+          Test Push
+        </button>
+      </div>
     )
   }
 }
 ```
 
+**Functional Stateful**
+
+```js
+import React from 'react'
+import PropTypes from 'prop-types'
+import { compose, withStateHandlers, withHandlers } from 'recompose'
+import { withFirebase } from 'react-redux-firebase'
+
+const SimpleComponent = ({ createTodo, wasSent }) => (
+  <div>
+    <span>Was sent: {wasSent}</span>
+    <button onClick={createTodo}>
+      Test Push
+    </button>
+  </div>
+)
+
+SimpleComponent.propTypes = {
+  firebase: PropTypes.shape({
+    push: PropTypes.func.isRequired
+  }),
+  createTodo: PropTypes.func, // from enhancer (withHandlers)
+  wasSent: PropTypes.bool, // from enhancer (withStateHandlers)
+}
+
+const enhance = compose(
+  withFirebase,
+  withStateHandlers(
+    ({ initialWasSent = false }) => ({
+      wasSent: initialWasSent,
+    }),
+    {
+      toggleSent: ({ wasSent }) => () => ({
+        wasSent: !wasSent
+      })
+    }
+  }),
+  withHandlers({
+    createTodo: ({ wasSent, toggleSent }) => event => {
+      return props.firebase
+        .push('todos', { some: 'data' })
+        .then(() => {
+          toggleSent()
+        })
+    }
+  })
+)
+
+// Export enhanced component
+export default enhance(SimpleComponent)
+// firebaseConnect can also be used (helpful for creating listeners at the same time)
+// export default firebaseConnect()(SimpleComponent)
+```
+
 Fun Fact: This is actually what happens internally with both `withFirebase` and `firebaseConnect`.
 
 ## Advanced Actions

docs/recipes/profile.md

@@ -5,31 +5,32 @@ Profile object is used to store data associated with a user. Using profile is in
 ## Basic
 It is common to store the list of user profiles under a collection called "users" or "profiles". For this example we will use "users".
 
-Include the `userProfile` parameter in config when setting up store middleware:
+Include the `userProfile` parameter in config when setting up store enhancer:
 
 ```js
 const config = {
   userProfile: 'users', // where profiles are stored in database
 }
+// During store creation
 reactReduxFirebase(fbConfig, config)
 ```
 
-Then later wrap a component with connect:
+Then later `connect` (from [react-redux](https://github.com/reactjs/react-redux/blob/master/docs/api.md)) to redux state with:
 
 ```js
 import { connect } from 'react-redux'
 
 // grab profile from redux with connect
 connect(
-  (state) => ({
-    profile: state.firebase.profile // profile passed as props.profile
-  })
+  (state) => {
+    return {
+      profile: state.firebase.profile // profile passed as props.profile
+    }
+  }
 )(SomeComponent) // pass component to be wrapped
 
 // or with some shorthand:
-connect(({ firebase: { profile } }) => ({
-  profile  // profile passed as props.profile
-}))(SomeComponent) // pass component to be wrapped
+connect(({ firebase: { profile } }) => ({ profile }))(SomeComponent)
 ```
 
 ## Update Profile
@@ -67,10 +68,10 @@ UpdateProfilePage.propTypes = {
 }
 
 export default compose(
-  withFirebase, // firebaseConnect() can also be used
+  withFirebase, // add props.firebase (firebaseConnect() can also be used)
   connect(
     ({ firebase: { profile } }) => ({
-      profile,
+      profile
     })
   )
 )(UpdateProfilePage)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-firebase",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.19",
   "description": "Redux integration for Firebase. Comes with a Higher Order Components for use with React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -13,7 +13,7 @@
     "lint:fix": "npm run lint -- --fix",
     "test": "mocha -R spec ./tests/setup.js ./tests/** --recursive --require babel-register",
     "test:cov": "istanbul cover ./node_modules/mocha/bin/_mocha -- ./tests/** --recursive --report lcov --require babel-register",
-    "codecov": "cat coverage/*/lcov.info | codecov",
+    "codecov": "cat coverage/lcov.info | codecov",
     "build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
     "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
     "build:umd": "cross-env BABEL_ENV=commonjs NODE_ENV=development webpack src/index.js dist/react-redux-firebase.js",
@@ -32,7 +32,7 @@
     "docs:upload": "node bin/api-docs-upload"
   },
   "license": "MIT",
-  "homepage": "https://github.com/prescottprue/react-redux-firebase#readme",
+  "homepage": "http://react-redux-firebase.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/prescottprue/react-redux-firebase.git"
@@ -64,9 +64,6 @@
   "peerDependencies": {
     "react": "^0.14.6 || ^15.0.0-0 || ^16.0.0-0"
   },
-  "optionalDependencies": {
-    "redux-firestore": "latest"
-  },
   "devDependencies": {
     "babel-cli": "^6.24.0",
     "babel-core": "^6.24.0",

package.json

@@ -105,8 +105,7 @@ describe('firestoreConnect', () => {
   })
 
   describe('sets displayName static as ', () => {
-    describe('FirestoreConnect(${WrappedComponentName}) for', () => {
-      // eslint-disable-line no-template-curly-in-string
+    describe('FirestoreConnect(${WrappedComponentName}) for', () => { // eslint-disable-line no-template-curly-in-string
       it('standard components', () => {
         class TestContainer extends Component {
           render () {