From 5224326c605f458b46e6ff465f637adfc41ac834 Mon Sep 17 00:00:00 2001 From: Scott Prue Date: Tue, 1 Jan 2019 16:07:15 -0800 Subject: [PATCH] v3.0.0-alpha.4 (#597) * fix(typings): add context providers to typings - #564 * fix(storage): support only firestore when calling upload and writing to db - @dirathea * fix(core): add auth initialization to providers to match v2 store enhancer - #388 --- .babelrc | 4 ++- docs/api/firebaseInstance.md | 5 +++ docs/api/firestoreConnect.md | 12 +++----- docs/api/withFirebase.md | 40 ++++++++++++++---------- docs/api/withFirestore.md | 51 ++++++++++++++++++------------- index.d.ts | 44 +++++++++++++++++--------- package-lock.json | 6 ++-- package.json | 2 +- src/ReactReduxFirebaseProvider.js | 14 ++++++++- src/ReduxFirestoreProvider.js | 18 ++++++++++- src/actions/storage.js | 2 +- src/createFirebaseInstance.js | 19 ++++++++++-- src/utils/actions.js | 16 +++++----- 13 files changed, 155 insertions(+), 78 deletions(-) diff --git a/.babelrc b/.babelrc index 4cbe08585..4fb3fd664 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,8 @@ { "presets": [ - ["minify", { "keepFnName": true }], + ["minify", { + "mangle": false + }], "@babel/preset-react", ["@babel/env", { "targets": { diff --git a/docs/api/firebaseInstance.md b/docs/api/firebaseInstance.md index a8a1eacf1..d4ba8ff3f 100644 --- a/docs/api/firebaseInstance.md +++ b/docs/api/firebaseInstance.md @@ -28,6 +28,7 @@ - [reloadAuth](#reloadauth) - [linkWithCredential](#linkwithcredential) - [signInWithPhoneNumber](#signinwithphonenumber) +- [initializeAuth](#initializeauth) - [ref](#ref) - [database](#database) - [storage](#storage) @@ -456,6 +457,10 @@ authenticates and does profile handling. Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** +## initializeAuth + +Initialize auth to work with build in profile support + ## ref Firebase ref function diff --git a/docs/api/firestoreConnect.md b/docs/api/firestoreConnect.md index 83104eab4..d128e3390 100644 --- a/docs/api/firestoreConnect.md +++ b/docs/api/firestoreConnect.md @@ -23,7 +23,7 @@ needing to access a firebase instance created under a different store key. _Basic_ ```javascript -// this.props.firebase set on App component as firebase object with helpers +// props.firebase set on App component as firebase object with helpers import { createFirestoreConnect } from 'react-redux-firebase' // create firebase connect that uses another redux store const firestoreConnect = createFirestoreConnect('anotherStore') @@ -53,7 +53,7 @@ attempting to use. **Note** Populate is not yet supported. _Basic_ ```javascript -// this.props.firebase set on App component as firebase object with helpers +// props.firebase set on App component as firebase object with helpers import { firestoreConnect } from 'react-redux-firebase' export default firestoreConnect()(SomeComponent) ``` @@ -64,13 +64,11 @@ _Basic_ import { connect } from 'react-redux' import { firestoreConnect } from 'react-redux-firebase' -// pass todos list from redux as this.props.todosList +// pass todos list from redux as props.todosList export default compose( - firestoreConnect(['todos']), // sync todos collection from Firestore into redux + firestoreConnect(() => ['todos']), // sync todos collection from Firestore into redux connect((state) => ({ - todosList: state.firestore.data.todos, - profile: state.firestore.profile, // pass profile data as this.props.profile - auth: state.firestore.auth // pass auth data as this.props.auth + todosList: state.firestore.data.todos }) )(SomeComponent) ``` diff --git a/docs/api/withFirebase.md b/docs/api/withFirebase.md index f96b86088..ef77fc487 100644 --- a/docs/api/withFirebase.md +++ b/docs/api/withFirebase.md @@ -23,7 +23,7 @@ needing to access a firebase instance created under a different store key. _Basic_ ```javascript -// this.props.firebase set on App component as firebase object with helpers +// props.firebase set on App component as firebase object with helpers import { createWithFirebase } from 'react-redux-firebase' // create withFirebase that uses another redux store @@ -55,12 +55,15 @@ _Basic_ ```javascript import { withFirebase } from 'react-redux-firebase' -const AddData = ({ firebase: { push } }) => -
- -
+function AddData({ firebase: { push } }) { + return ( +
+ +
+ ) +} export default withFirebase(AddData) ``` @@ -72,15 +75,18 @@ import { compose } from 'redux' // can also come from recompose import { withHandlers } from 'recompose' import { withFirebase } from 'react-redux-firebase' -const AddTodo = ({ addTodo }) => -
- -
- -export default compose( - withFirebase(AddTodo), +function AddTodo({ addTodo }) { + return ( +
+ +
+ ) +} + +const enhance = compose( + withFirebase, withHandlers({ addTodo: props => () => props.firestore.add( @@ -89,6 +95,8 @@ export default compose( ) }) ) + +export default enhance(AddTodo) ``` Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** Which accepts a component to wrap and returns the diff --git a/docs/api/withFirestore.md b/docs/api/withFirestore.md index ac933230e..04494879f 100644 --- a/docs/api/withFirestore.md +++ b/docs/api/withFirestore.md @@ -16,7 +16,7 @@ needing to access a firebase instance created under a different store key. **Parameters** - `storeKey` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Name of redux store which contains - Firebase state (`state.firebase`) (optional, default `'store'`) + Firestore state (`state.firestore`) (optional, default `'store'`) **Examples** @@ -50,14 +50,18 @@ from `store.firestore`, which is attached to store by the store enhancer _Basic_ ```javascript +import React from 'react' import { withFirestore } from 'react-redux-firebase' -const AddTodo = ({ firestore: { add } }) => -
- -
+function AddData({ firebase: { add } }) { + return ( +
+ +
+ ) +} export default withFirestore(AddTodo) ``` @@ -65,27 +69,32 @@ export default withFirestore(AddTodo) _Within HOC Composition_ ```javascript +import React from 'react' import { compose } from 'redux' // can also come from recompose import { withHandlers } from 'recompose' import { withFirestore } from 'react-redux-firebase' -const AddTodo = ({ addTodo }) => -
- -
- -export default compose( - withFirestore(AddTodo), +function AddTodo({ addTodo }) { + return ( +
+ +
+ ) +} + +const enhance = compose( + withFirestore, withHandlers({ - addTodo: props => () => - props.firestore.add( - { collection: 'todos' }, - { done: false, text: 'Sample' } - ) + addTodo: props => () => { + const newTodo = { done: false, text: 'Sample' } + return props.firestore.add({ collection: 'todos' }, newTodo) + } }) ) + +export default enhance(AddTodo) ``` Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** Which accepts a component to wrap and returns the diff --git a/index.d.ts b/index.d.ts index 480c4cb42..b2966f22c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -180,32 +180,50 @@ export function populate( notSetValue?: any ): any -export function reactReduxFirebase(instance: object, otherConfig: any): any +/** + * React Context provider for Firebase instance (with methods wrapped in dispatch). Needed to use HOCs + * like firebaseConnect and withFirebase. + */ +export function ReactReduxFirebaseProvider(props: ReactReduxFirebaseProviderProps): any; /** * Props passed to ReactReduFirebaseContext component */ -export interface ReactReduxFirebaseContextProps { - firebase: object, - config: object, - dispatch: (action) => void - createFirestoreInstance?: (firebase: object, config: object, dispatch: (action) => void) => object +export interface ReactReduxFirebaseProviderProps { + value: T; + firebase: object; + config: object; + dispatch: (action: object) => void; + children?: React.ReactNode; + initalizeAuth?: boolean; + createFirestoreInstance?: (firebase: object, config: object, dispatch: (action: object) => void) => object; } /** - * React Context provider for Firebase instance. Needed to use HOCs like firebaseConnect and withFirebase + * React Context for Firebase instance. */ -export namespace ReactReduxFirebaseContext { +export namespace ReduxFirestoreContext { const prototype: {} } /** - * React Context provider for Firebase instance. Needed to use HOCs like firebaseConnect and withFirebase + * Props passed to ReactReduFirebaseContext component */ -export namespace ReduxFirestoreContext { - const prototype: {} +export interface ReduxFirestoreProviderProps { + firebase: object; + config: object; + dispatch: (action: object) => void; + createFirestoreInstance: (firebase: object, config: object, dispatch: (action: object) => void) => object; + children?: React.ReactNode; + initalizeAuth?: boolean; } +/** + * React Context provider for Firestore instance (with methods wrapped in dispatch). Needed to use HOCs + * like firestoreConnect and withFirestore. + */ +export function ReduxFirestoreProvider(props: ReduxFirestoreProviderProps): any; + /** * React Higher Order Component that passes firebase as a prop (comes from context.store.firebase) */ @@ -267,10 +285,6 @@ export namespace fixPath { const prototype: {} } -export namespace getFirebase { - const prototype: {} -} - export namespace getVal { const prototype: {} } diff --git a/package-lock.json b/package-lock.json index 48ef008c6..545458ca1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-redux-firebase", - "version": "3.0.0-alpha.3", + "version": "3.0.0-alpha.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -6968,7 +6968,7 @@ "content-type": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", - "integrity": "sha1-4TjMdeBAxyexlm/l5fjJruJW/js=", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", "dev": true }, "continuable-cache": { @@ -20824,7 +20824,7 @@ "setprototypeof": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", - "integrity": "sha1-0L2FU2iHtv58DYGMuWLZ2RxU5lY=", + "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==", "dev": true }, "sha.js": { diff --git a/package.json b/package.json index 1bde7eae7..9ba5eb7bd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-redux-firebase", - "version": "3.0.0-alpha.3", + "version": "3.0.0-alpha.4", "description": "Redux integration for Firebase. Comes with a Higher Order Components for use with React.", "main": "lib/index.js", "module": "es/index.js", diff --git a/src/ReactReduxFirebaseProvider.js b/src/ReactReduxFirebaseProvider.js index 386eea34d..dfe56de72 100644 --- a/src/ReactReduxFirebaseProvider.js +++ b/src/ReactReduxFirebaseProvider.js @@ -10,6 +10,7 @@ function ReactReduxFirebaseProvider(props = {}) { config, dispatch, firebase, + initializeAuth, createFirestoreInstance } = props const extendedFirebaseInstance = createFirebaseInstance( @@ -17,10 +18,16 @@ function ReactReduxFirebaseProvider(props = {}) { config, dispatch ) + // Initialize auth if not disabled + if (initializeAuth) { + extendedFirebaseInstance.initializeAuth() + } if (createFirestoreInstance) { return ( - {children} + + {children} + ) } @@ -31,11 +38,16 @@ function ReactReduxFirebaseProvider(props = {}) { ) } +ReactReduxFirebaseProvider.defaultProps = { + initalizeAuth: true +} + ReactReduxFirebaseProvider.propTypes = { children: PropTypes.node, config: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, firebase: PropTypes.object.isRequired, + initializeAuth: PropTypes.bool, createFirestoreInstance: PropTypes.func } diff --git a/src/ReduxFirestoreProvider.js b/src/ReduxFirestoreProvider.js index 1408a069b..30e9ce352 100644 --- a/src/ReduxFirestoreProvider.js +++ b/src/ReduxFirestoreProvider.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import ReduxFirestoreContext from './ReduxFirestoreContext' +import createFirebaseInstance from './createFirebaseInstance' function ReduxFirestoreProvider(props = {}) { const { @@ -8,13 +9,23 @@ function ReduxFirestoreProvider(props = {}) { config, dispatch, firebase, - createFirestoreInstance + createFirestoreInstance, + initializeAuth } = props + const extendedFirebaseInstance = createFirebaseInstance( + firebase, + config, + dispatch + ) const extendedFirestoreInstance = createFirestoreInstance( firebase, config, dispatch ) + // Initialize auth if not disabled + if (initializeAuth) { + extendedFirebaseInstance.initializeAuth() + } return ( {children} @@ -22,11 +33,16 @@ function ReduxFirestoreProvider(props = {}) { ) } +ReduxFirestoreProvider.defaultProps = { + initializeAuth: true +} + ReduxFirestoreProvider.propTypes = { children: PropTypes.node, config: PropTypes.object.isRequired, dispatch: PropTypes.func.isRequired, createFirestoreInstance: PropTypes.func.isRequired, + initializeAuth: PropTypes.bool, firebase: PropTypes.object.isRequired } diff --git a/src/actions/storage.js b/src/actions/storage.js index daa4220d5..8decb931b 100644 --- a/src/actions/storage.js +++ b/src/actions/storage.js @@ -64,7 +64,7 @@ export function uploadFile(dispatch, firebase, config) { return uploadPromise() .then(uploadTaskSnapshot => { - if (!dbPath || !firebase.database) { + if (!dbPath || (!firebase.database && !firebase.firestore)) { dispatch({ type: FILE_UPLOAD_COMPLETE, meta: { ...config, filename }, diff --git a/src/createFirebaseInstance.js b/src/createFirebaseInstance.js index cef4238a6..abdc64bd9 100644 --- a/src/createFirebaseInstance.js +++ b/src/createFirebaseInstance.js @@ -464,9 +464,22 @@ export default function createFirebaseInstance(firebase, configs, dispatch) { * @param {firebase.auth.ConfirmationResult} credential - The auth credential * @return {Promise} */ - const actionCreators = mapWithFirebaseAndDispatch(firebase, dispatch, { - signInWithPhoneNumber: authActions.signInWithPhoneNumber - }) + /** + * @name initializeAuth + * @description Initialize auth to work with build in profile support + */ + const actionCreators = mapWithFirebaseAndDispatch( + firebase, + dispatch, + // Actions with arg order (firebase, dispatch) + { + signInWithPhoneNumber: authActions.signInWithPhoneNumber + }, + // Actions with arg order (dispatch, firebase) + { + initializeAuth: authActions.init + } + ) /** * @name ref diff --git a/src/utils/actions.js b/src/utils/actions.js index 3105b6363..36adaad04 100644 --- a/src/utils/actions.js +++ b/src/utils/actions.js @@ -61,26 +61,26 @@ function createWithFirebaseAndDispatch(firebase, dispatch, dispatchFirst) { * @param {Object} firebase - Internal firebase instance * @param {Function} dispatch - Redux's dispatch function * @param {Object} actions - Action functions to map with firebase and dispatch + * @param {Object} reverseActions - Action functions to map with dispatch and firebase (i.e. reverse arg order) * @return {Object} Actions mapped with firebase and dispatch */ export function mapWithFirebaseAndDispatch( firebase, dispatch, actions, - aliases = [] + reverseActions ) { const withFirebaseAndDispatch = createWithFirebaseAndDispatch( firebase, dispatch ) + const withDispatchAndFirebase = createWithFirebaseAndDispatch( + firebase, + dispatch, + true + ) return { ...mapValues(actions, withFirebaseAndDispatch), - ...aliases.reduce( - (acc, { action, name }) => ({ - ...acc, - [name]: withFirebaseAndDispatch(action) - }), - {} - ) + ...mapValues(reverseActions, withDispatchAndFirebase) } }