diff --git a/examples/basic/package.json b/examples/basic/package.json index cdb3ebd0..3e21e92d 100644 --- a/examples/basic/package.json +++ b/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": "*" diff --git a/examples/basic/src/NewTodo.js b/examples/basic/src/NewTodo.js index a8ed8307..7305d1d7 100755 --- a/examples/basic/src/NewTodo.js +++ b/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 diff --git a/examples/basic/src/Todo.js b/examples/basic/src/Todo.js index 074a9238..cf0417de 100755 --- a/examples/basic/src/Todo.js +++ b/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 (
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,15 +24,15 @@ function Todos({ todos, firestore }) {
{ - todos === undefined + todoIds === undefined ? Loading - : !todos.length + : !todoIds.length ? No todos found : - todos.map((todo, i) => ( + todoIds.map((todoId, i) => ( )) } @@ -40,23 +40,4 @@ function Todos({ todos, firestore }) { ) } -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 diff --git a/examples/basic/src/config.js b/examples/basic/src/config.js index 2074090e..5d064805 100644 --- a/examples/basic/src/config.js +++ b/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 +} diff --git a/examples/basic/src/createStore.js b/examples/basic/src/createStore.js index 09f1f0b9..1947a558 100755 --- a/examples/basic/src/createStore.js +++ b/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) diff --git a/examples/basic/src/index.js b/examples/basic/src/index.js index b27e4fca..cdc159ba 100644 --- a/examples/basic/src/index.js +++ b/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 ( -
-

Start editing to see some magic happen {'\u2728'}

- -
+ +
+

Start editing to see some magic happen {'\u2728'}

+ +
+ - ); + ) } render(, document.getElementById('root')); diff --git a/examples/basic/yarn.lock b/examples/basic/yarn.lock index ac36dfcc..f45ae3e6 100644 --- a/examples/basic/yarn.lock +++ b/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" react-scripts@2.1.3: version "2.1.3"