v0.4.1

* fix(orderedReducer): completely remove doc on delete instead of setting it to `null`
* fix(examples): update basic example to `react` `^16.3.0` by making a simple `withFirestore` util
* feat(core): add typescript definition for firestoreReducer - #78

Author: prescottprue

examples/basic/package-lock.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "firebase": "^4.5.0",
+    "firebase": "^4.12.0",
     "lodash": "^4.17.5",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
     "react-redux": "^5.0.6",
     "react-scripts": "1.0.14",
     "recompose": "^0.25.1",

examples/basic/package.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types'
-import { compose, flattenProp, withHandlers } from 'recompose'
-import { withStore } from './utils';
+import { compose, flattenProp, withHandlers, pure } from 'recompose'
+import { withFirestore } from './utils';
 
 const styles = {
   container: {
@@ -28,7 +28,7 @@ const Todo = ({
 }) => (
   <div style={styles.container}>
     <input
-      value={done}
+      checked={done}
       onChange={onDoneClick}
       disabled={disabled}
       type="checkbox"
@@ -46,21 +46,24 @@ Todo.propTypes = {
   done: PropTypes.bool, // from enhancer (flattenProp)
   disabled: PropTypes.bool, // from enhancer (flattenProp)
   onDoneClick: PropTypes.func.isRequired, // from enhancer (withHandlers)
-  store: PropTypes.shape({
-    firestore: PropTypes.object
+  firestore: PropTypes.shape({
+    update: PropTypes.func.isRequired
   })
 }
 
 const enhance = compose(
   // Add props.firestore
-  withStore,
-  // Flatten todo (creates props.text, props.owner, props.isDone )
+  withFirestore,
+  // Flatten todo prop (creates id, text, owner, done and disabled props)
   flattenProp('todo'),
-  // Handler functions as props
+  // Handlers as props
   withHandlers({
-    onDoneClick: props => () =>
-      props.store.firestore.update(`todos/${props.todo.id}`, { done: !props.done })
-  })
+    onDoneClick: props => () => {
+      return props.firestore.update(`todos/${props.id}`, { done: !props.done })
+    }
+  }),
+  // Prevent unnessesary re-renders by doing shallow comparison of props
+  pure
 )
 
 export default enhance(Todo)

examples/basic/src/Todo.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { compose } from 'redux';
 import { withHandlers, lifecycle } from 'recompose'
 import { connect } from 'react-redux';
-import { withStore } from './utils';
+import { withFirestore } from './utils';
 import Todo from './Todo';
 import NewTodo from './NewTodo';
 
@@ -16,7 +16,7 @@ const Todos = ({ todos, onNewSubmit, onDoneClick }) => (
       : !todos.length
         ? <span>No todos found</span>
         :
-          todos.filter(todo => !!todo).map((todo, i) => (
+          todos.map((todo, i) => (
             <Todo
               key={`${todo.id}-${i}`}
               todo={todo}
@@ -37,19 +37,19 @@ Todos.propTypes = {
 // Create HOC that loads data and adds it as todos prop
 const enhance = compose(
   // add redux store (from react context) as a prop
-  withStore,
+  withFirestore,
   // Handler functions as props
   withHandlers({
-    loadData: props => err => props.store.firestore.setListener({
+    loadData: props => err => props.firestore.setListener({
       collection: 'todos',
       orderBy: ['createdAt', 'desc'],
       limit: 10
     }),
     onNewSubmit: props => newTodo =>
-      props.store.firestore.add('todos', {
+      props.firestore.add('todos', {
         ...newTodo,
         owner: 'Anonymous',
-        createdAt: props.store.firestore.FieldValue.serverTimestamp()
+        createdAt: props.firestore.FieldValue.serverTimestamp()
       }),
   }),
   // Run functionality on component lifecycle
@@ -59,7 +59,7 @@ const enhance = compose(
       this.props.loadData()
     },
     componentWillUnmount() {
-      this.props.store.firestore.unsetListener({
+      this.props.firestore.unsetListener({
         collection: 'todos',
         orderBy: ['createdAt', 'desc'],
         limit: 10

examples/basic/src/Todos.js

@@ -1,8 +1,26 @@
+import React, { Component } from 'react';
 import PropTypes from 'prop-types'
-import { compose, withContext, getContext } from 'recompose'
 
 // Create HOC that gets firestore from react context and passes it as a prop
-export const withStore = compose(
-  withContext({ store: PropTypes.object }, () => {}),
-  getContext({ store: PropTypes.object })
-)
+// NOTE: Modified version of withFirestore for a simple example. For a full
+// application, use react-redux-firebase's withFirestore: https://goo.gl/4pxmPv
+export const withFirestore = (WrappedComponent) => {
+  class WithFirestore extends Component {
+    static contextTypes = {
+      store: PropTypes.object.isRequired
+    }
+
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          dispatch={this.context.store.dispatch}
+          firestore={this.context.store.firestore}
+        />
+      )
+    }
+  }
+  // Note, for full statics support, use hoist-non-react-statics as done
+  // in react-redux-firebase's withFirestore: https://goo.gl/4pxmPv
+  return WithFirestore
+}

examples/basic/src/utils.js

@@ -92,6 +92,10 @@ export function reduxFirestore(firebaseInstance: object, otherConfig: object): a
  */
 export function getFirestore(firebaseInstance: object, otherConfig: object): any;
 
+/**
+ * A redux store reducer for Firestore state
+ */
+export function firestoreReducer(state: object, action: object): any;
 
 /**
  * A redux store reducer for Firestore state

index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "redux-firestore",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Redux bindings for Firestore.",
   "main": "lib/index.js",
   "module": "es/index.js",

package-lock.json

@@ -1,4 +1,4 @@
-import { size, get, unionBy } from 'lodash';
+import { size, get, unionBy, reject } from 'lodash';
 import { merge as mergeObjects } from 'lodash/fp';
 import { actionTypes } from '../constants';
 import {
@@ -49,8 +49,8 @@ function modifyDoc(collectionState, action) {
  * @param  {Object} action - The action that was dispatched
  * @return {Array} State with document modified
  */
-function removeDoc(collectionState, action) {
-  return updateItemInArray(collectionState, action.meta.doc, () => null);
+function removeDoc(array, action) {
+  return reject(array, { id: action.meta.doc }); // returns a new array
 }
 
 /**