New react context API working with firebaseConnect in simple example - …

…#581

examples/complete/simple/package.json

@@ -6,7 +6,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-redux": "^5.1.0",
+    "react-redux": "^6.0.0",
     "react-redux-firebase": "^2.2.1",
     "react-scripts": "2.1.1",
     "recompose": "^0.30.0",

examples/complete/simple/src/App.js

@@ -14,14 +14,11 @@ const initialState = window.__INITIAL_STATE__ // set initial state here
 const store = configureStore(initialState)
 // Initialize Firebase instance
 firebase.initializeApp(fbConfig)
-console.log('initial firebase:', firebase)
 
 export default () => (
   <Provider store={store}>
-    <div> 
-      <ReactReduxFirebaseProvider firebase={firebase} config={fbConfig} dispatch={store.dispatch}>
-        <Home />
-      </ReactReduxFirebaseProvider>
-    </div>
+    <ReactReduxFirebaseProvider firebase={firebase} config={fbConfig} dispatch={store.dispatch}>
+      <Home />
+    </ReactReduxFirebaseProvider>
   </Provider>
 )

examples/complete/simple/src/Home.js

@@ -11,7 +11,6 @@ import logo from './logo.svg'
 import TodoItem from './TodoItem'
 import './App.css'
 import NewTodo from './NewTodo';
-import { ReactReduxFirebaseConsumer } from 'react-redux-firebase';
 
 const Home = ({ firebase, todos }) => (
   <div className='App'>
@@ -20,7 +19,6 @@ const Home = ({ firebase, todos }) => (
       <img src={logo} className='App-logo' alt='logo' />
     </div>
     <div className='App-todos'>
-        {console.log('firebase', firebase)}
       <h4>
         Loaded From
         <span className='App-Url'>
@@ -35,11 +33,11 @@ const Home = ({ firebase, todos }) => (
           ? 'Loading'
           : isEmpty(todos)
             ? 'Todo list is empty'
-            : todos.reverse().map((todo, ind) => (
+            : todos.reverse().map(({ value: todo, key }, ind) => (
               <TodoItem
-                key={`${todo.key}-${ind}`}
-                id={todo.key}
-                todo={todo.value}
+                key={`${key}-${ind}`}
+                id={key}
+                {...todo}
               />
             ))
       }

examples/complete/simple/src/NewTodo.js

@@ -2,11 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { compose } from 'redux'
 import { withStateHandlers, withHandlers } from 'recompose'
-import { withFirebase } from 'react-redux-firebase'
+import { withFirebase, firebaseConnect } from 'react-redux-firebase'
 import './App.css'
 
 const enhance = compose(
-  withFirebase, // firestoreConnect() can also be used
+  firebaseConnect(),
+  // withFirebase, // firestoreConnect() can also be used
   withStateHandlers(
     ({ initialVal = '' }) => ({
       inputVal: initialVal

examples/complete/simple/src/TodoItem.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { compose } from 'redux'
-import { withHandlers, branch, renderNothing } from 'recompose'
-import { withFirebase } from 'react-redux-firebase'
+import { withHandlers } from 'recompose'
+import { firebaseConnect } from 'react-redux-firebase'
 
 import './Todo.css'
 
@@ -11,33 +11,35 @@ import './Todo.css'
 // 2. Adds props.firebase (used in handlers)
 // 3. Adds toggleDone and deleteTodo handlers (which use props.firebase)
 const enhance = compose(
-  // Render nothing if todo is not defined
-  branch(({ todo }) => !todo, renderNothing),
   // Add props.firebase
-  withFirebase,
+  firebaseConnect(),
   // Handlers as props
   withHandlers({
-    toggleDone: ({ firebase, todo, id }) => () =>
-      firebase.update(`todos/${id}`, { done: !todo.done }),
+    toggleDone: ({ firebase, done, id }) => () =>
+      firebase.update(`todos/${id}`, { done: !done }),
     deleteTodo: ({ firebase, todo, id }) => () =>
       firebase.remove(`todos/${id}`)
   })
 )
 
-const TodoItem = ({ deleteTodo, toggleDone, todo }) => (
-  <li className="Todo">
-    <input
-      className="Todo-Input"
-      type="checkbox"
-      checked={todo.done}
-      onChange={toggleDone}
-    />
-    {todo.text || todo.name}
-    <button className="Todo-Button" onClick={deleteTodo}>
-      Delete
-    </button>
-  </li>
-)
+const TodoItem = (props) => {
+  const { deleteTodo, toggleDone, text, name, done } = props
+  console.log('props', props)
+  return (
+    <li className="Todo">
+      <input
+        className="Todo-Input"
+        type="checkbox"
+        checked={done}
+        onChange={toggleDone}
+      />
+      {text || name}
+      <button className="Todo-Button" onClick={deleteTodo}>
+        Delete
+      </button>
+    </li>
+  )
+}
 
 TodoItem.propTypes = {
   todo: PropTypes.shape({

package.json

@@ -63,8 +63,7 @@
     "prop-types": "^15.6.2"
   },
   "peerDependencies": {
-    "react": "^0.14.6 || ^15.0.0-0 || ^16.0.0-0",
-    "react-redux": "^6.0.0"
+    "react": "^0.14.6 || ^15.0.0-0 || ^16.0.0-0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

src/ReactReduxFirebaseProvider.js

@@ -12,7 +12,7 @@ const ReactReduxFirebaseProvider = (props = {}) => {
   )
   return (
     <ReactReduxFirebaseContext.Provider value={extendedFirebaseInstance}>
-      {React.cloneElement(children, { dispatch })}
+      {children}
     </ReactReduxFirebaseContext.Provider>
   )
 }

src/createFirebaseInstance.js

@@ -518,5 +518,5 @@ export default function createFirebaseInstance(firebase, configs, dispatch) {
     ...actionCreators
   }
 
-  return Object.assign(firebase, helpers, { helpers })
+  return Object.assign(firebase, helpers, { helpers, dispatch })
 }

src/firebaseConnect.js

@@ -81,12 +81,7 @@ export const createFirebaseConnect = (storeKey = 'store') => (
     }
 
     render() {
-      return (
-        <WrappedComponent
-          firebase={this.props.firebase}
-          dispatch={this.props.dispatch}
-        />
-      )
+      return <WrappedComponent {...this.props} />
     }
   }
 
@@ -97,9 +92,15 @@ export const createFirebaseConnect = (storeKey = 'store') => (
 
   const HoistedComp = hoistStatics(FirebaseConnectWrapped, WrappedComponent)
 
-  const FirebaseConnect = ({ dispatch }) => (
+  const FirebaseConnect = ({ dispatch, ...other }) => (
     <ReactReduxFirebaseConsumer>
-      {firebase => <HoistedComp firebase={firebase} dispatch={dispatch} />}
+      {firebase => (
+        <HoistedComp
+          firebase={firebase}
+          dispatch={firebase.dispatch}
+          {...other}
+        />
+      )}
     </ReactReduxFirebaseConsumer>
   )