fix(examples): update firestore example to use react-redux-firebase

examples/basic/package.json

@@ -13,7 +13,8 @@
     "lodash": "^4.17.15",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
-    "react-redux": "^5.0.7",
+    "react-redux": "^7.1.3",
+    "react-redux-firebase": "^3.0.6",
     "recompose": "^0.30.0",
     "redux": "^4.0.0",
     "redux-firestore": "*"

examples/basic/src/NewTodo.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { get } from 'lodash';
-import { withFirestore } from './utils';
+import { useFirestore } from 'react-redux-firebase'
 
 const styles = {
   container: {
@@ -10,8 +10,9 @@ const styles = {
   }
 };
 
-function NewTodo({ firestore }) {
+function NewTodo() {
   const [inputValue, onInputChange] = useState(null)
+  const firestore = useFirestore()
 
   function onNewClick() {
     return firestore.add('todos', {
@@ -30,4 +31,4 @@ function NewTodo({ firestore }) {
   )
 }
 
-export default withFirestore(NewTodo)
+export default NewTodo

examples/basic/src/Todo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types'
-import { withFirestore } from './utils';
+import { useSelector } from 'react-redux';
+import { useFirestore } from 'react-redux-firebase'
 
 const styles = {
   container: {
@@ -18,10 +19,16 @@ const styles = {
   }
 }
 
-function Todo({ todo, firestore }) {
+function Todo({ id }) {
+  const todo = useSelector(state => state.firestore.data.todos[id])
+  const firestore = useFirestore()
+
   function onDoneClick() {
-    return firestore.update(`todos/${todo.id}`, { done: !todo.done })
+    return firestore.firestore()
+      .doc(`todos/${todo.id}`)
+      .update({ done: !todo.done })
   }
+
   return (
     <div style={styles.container}>
       <input
@@ -50,4 +57,4 @@ Todo.propTypes = {
   })
 }
 
-export default withFirestore(Todo)
+export default Todo

examples/basic/src/Todos.js

@@ -1,18 +1,18 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types'
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { withFirestore } from './utils';
+import { useSelector } from 'react-redux';
 import Todo from './Todo';
 import NewTodo from './NewTodo';
+import { useFirestore } from 'react-redux-firebase'
 
-const listenerSettings = {
-  collection: 'todos',
-  orderBy: ['createdAt', 'asc'],
-  limit: 10
-}
+function Todos() {
+  const todoIds = useSelector(state => state.firestore.ordered.todos)
+  const firestore = useFirestore()
+  const listenerSettings = {
+    collection: 'todos',
+    orderBy: ['createdAt', 'asc'],
+    limit: 10
+  }
 
-function Todos({ todos, firestore }) {
   useEffect(() => {
     firestore.setListener(listenerSettings)
     return function cleanup() {
@@ -24,39 +24,20 @@ function Todos({ todos, firestore }) {
     <div>
       <NewTodo />
       {
-        todos === undefined
+        todoIds === undefined
         ? <span>Loading</span>
-        : !todos.length
+        : !todoIds.length
           ? <span>No todos found</span>
           :
-            todos.map((todo, i) => (
+            todoIds.map((todoId, i) => (
               <Todo
-                key={`${todo.id}-${i}`}
-                todo={todo}
+                key={`${todoId}-${i}`}
+                id={todoId}
               />
             ))
       }
     </div>
   )
 }
 
-Todos.propTypes = {
-  todos: PropTypes.array,
-  firestore: PropTypes.shape({
-    setListener: PropTypes.func.isRequired,
-    unsetListener: PropTypes.func.isRequired
-  })
-}
-
-// Create HOC that loads data and adds it as todos prop
-const enhance = compose(
-  // add redux store (from react context) as a prop
-  withFirestore,
-  // Connect todos from redux state to props.todos
-  connect(({ firestore }) => ({ // state.firestore
-    todos: firestore.ordered.todos, // document data in array
-    // todos: firestore.data.todos, // document data by id
-  }))
-)
-
-export default enhance(Todos)
+export default Todos

examples/basic/src/config.js

@@ -6,3 +6,9 @@ export const fbConfig = {
   messagingSenderId: '823357791673',
   projectId: 'redux-firebasev3',
 }
+
+export const rfConfig = {
+  userProfile: 'users', // root that user profiles are written to
+  useFirestoreForProfile: true, // Save profile to Firestore instead of Real Time Database
+  useFirestoreForStorageMeta: true // Metadata associated with storage file uploads goes to Firestore
+}

examples/basic/src/createStore.js

@@ -1,20 +1,9 @@
 import { createStore, compose } from 'redux'
-import { reduxFirestore } from 'redux-firestore'
-import firebase from 'firebase/app'
-import 'firebase/database'
-import 'firebase/auth'
-import 'firebase/firestore'
-import { fbConfig } from './config'
 import rootReducer from './reducer'
 
 export default function configureStore(initialState, history) {
   const enhancers = []
 
-  firebase.initializeApp(fbConfig)
-
-  // Provide timestamp settings to silence warning about deprecation
-  firebase.firestore().settings({ timestampsInSnapshots: true })
-
   // Dev tools store enhancer
   const devToolsExtension = window.devToolsExtension;
   if (typeof devToolsExtension === 'function') {
@@ -23,7 +12,6 @@ export default function configureStore(initialState, history) {
 
   const createStoreWithMiddleware = compose(
     // Add redux firestore store enhancer
-    reduxFirestore(firebase),
     ...enhancers
   )(createStore)
 

examples/basic/src/index.js

@@ -1,9 +1,18 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
+import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
+import { createFirestoreInstance } from 'redux-firestore';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import 'firebase/firestore';
 import createStore from './createStore';
 import Todos from './Todos';
 import registerServiceWorker from './registerServiceWorker';
+import * as config from './config';
+
+// Initialize Firebase instance
+firebase.initializeApp(config.fbConfig)
 
 const styles = {
   fontFamily: 'sans-serif',
@@ -15,12 +24,18 @@ const store = createStore()
 function App() {
   return (
     <Provider store={store}>
-      <div style={styles}>
-        <h2>Start editing to see some magic happen {'\u2728'}</h2>
-        <Todos />
-      </div>
+      <ReactReduxFirebaseProvider
+        firebase={firebase}
+        config={config.rfConfig}
+        dispatch={store.dispatch}
+        createFirestoreInstance={createFirestoreInstance}>
+          <div style={styles}>
+          <h2>Start editing to see some magic happen {'\u2728'}</h2>
+          <Todos />
+        </div>
+      </ReactReduxFirebaseProvider>
     </Provider>
-  );
+  )
 }
 
 render(<App />, document.getElementById('root'));

examples/basic/yarn.lock

@@ -917,10 +917,10 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.1.2":
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
-  integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
+"@babel/runtime@^7.5.5":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
+  integrity sha512-uCnC2JEVAu8AKB5do1WRIsvrdJ0flYx/A/9f/6chdacnEZ7LmavjdsDXr5ksYBegxtuTPR5Va9/+13QF/kFkCA==
   dependencies:
     regenerator-runtime "^0.13.2"
 
@@ -8427,7 +8427,7 @@ prompts@^0.1.9:
     kleur "^2.0.1"
     sisteransi "^0.1.1"
 
-prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8682,33 +8682,41 @@ react-error-overlay@^5.1.4:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
   integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
 
-react-is@^16.6.0:
-  version "16.11.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
-  integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw==
-
 react-is@^16.7.0, react-is@^16.8.1:
   version "16.10.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.1.tgz#0612786bf19df406502d935494f0450b40b8294f"
   integrity sha512-BXUMf9sIOPXXZWqr7+c5SeOKJykyVr2u0UDzEf4LNGc6taGkQe1A9DFD07umCIXz45RLr9oAAwZbAJ0Pkknfaw==
 
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.2:
+react-is@^16.9.0:
+  version "16.12.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
+  integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
+
+react-lifecycles-compat@^3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-redux@^5.0.7:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.2.tgz#b19cf9e21d694422727bf798e934a916c4080f57"
-  integrity sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==
+react-redux-firebase@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/react-redux-firebase/-/react-redux-firebase-3.0.6.tgz#b55e613383ca6d1163729b08dc0006320917aaed"
+  integrity sha512-xZ6/GrffzuxppAUYmDE/UCMcYVpEJdm8L+us8XIgMMMZwZHOWUSsN2V+LAdmI+YnLyoVCp1XyyyflPHYZy9gcA==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.15"
+    prop-types "^15.7.2"
+
+react-redux@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"
+  integrity sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
     hoist-non-react-statics "^3.3.0"
     invariant "^2.2.4"
-    loose-envify "^1.1.0"
-    prop-types "^15.6.1"
-    react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.9.0"
 
 [email protected]:
   version "2.1.3"