From 5cd89e9864c296200a8a900d95a839cdee791936 Mon Sep 17 00:00:00 2001 From: Scott Prue Date: Mon, 29 Apr 2019 18:32:16 -0500 Subject: [PATCH] fix(docs): remove remaining instances of getFirebase from docs - #635 --- SUMMARY.md | 1 - docs/FAQ.md | 1 - docs/README.md | 1 - docs/api/README.md | 1 - docs/api/firebaseInstance.md | 12 ++++++ docs/api/get-firebase.md | 42 ------------------- docs/auth.md | 2 +- docs/integrations/react-chrome-redux.md | 27 +----------- docs/integrations/react-native.md | 2 +- docs/integrations/redux-form.md | 29 ++++++------- docs/integrations/redux-observable.md | 17 ++++---- docs/integrations/redux-saga.md | 13 +++--- docs/integrations/thunks.md | 16 +++---- docs/recipes/auth.md | 4 +- docs/recipes/ssr.md | 2 +- docs/storage.md | 6 +-- .../material/src/store/createStore.js | 4 +- .../react-native-firebase/src/createStore.js | 23 ++++------ index.d.ts | 6 --- 19 files changed, 68 insertions(+), 141 deletions(-) delete mode 100644 docs/api/get-firebase.md diff --git a/SUMMARY.md b/SUMMARY.md index 1ef9a8e6c..53dbf44a4 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -43,7 +43,6 @@ * [dataReducer](/docs/api/reducers.md#datareducer) * [orderedReducer](/docs/api/reducers.md#orderedreducer) * [props.firebase](/docs/api/props-firebase.md) - * [getFirebase](/docs/api/get-firebase.md) * [firebaseInstance](/docs/api/firebaseInstance.md) * [helpers](/docs/api/helpers.md) * Migration Guides diff --git a/docs/FAQ.md b/docs/FAQ.md index 5ebcaed18..7b9bb2ffe 100644 --- a/docs/FAQ.md +++ b/docs/FAQ.md @@ -7,7 +7,6 @@ * `react-native` support ([web/js](http://react-redux-firebase.com/docs/recipes/react-native.html) or native modules through [`react-native-firebase`](http://docs.react-redux-firebase.com/history/v2.0.0/docs/recipes/react-native.html#native-modules)) * tons of [integrations](#integrations) * [`profileFactory`](http://react-redux-firebase.com/docs/config) - change format of profile stored on Firebase - * [`getFirebase`](http://react-redux-firebase.com/docs/thunks) - access to firebase instance that fires actions when methods are called * [access to firebase's `storage`](http://react-redux-firebase.com/docs/storage) and `messaging` services * `uniqueSet` method helper for only setting if location doesn't already exist * Object or String notation for paths (`[{ path: '/todos' }]` equivalent to `['/todos']`) diff --git a/docs/README.md b/docs/README.md index 72da1dc07..42c8c72ba 100644 --- a/docs/README.md +++ b/docs/README.md @@ -44,7 +44,6 @@ * [dataReducer](/docs/api/reducers.md#datareducer) * [orderedReducer](/docs/api/reducers.md#orderedreducer) * [props.firebase](/docs/api/props-firebase.md) - * [getFirebase](/docs/api/get-firebase.md) * [firebaseInstance](/docs/api/firebaseInstance.md) * [helpers](/docs/api/helpers.md) * [FAQ](/docs/FAQ.md) diff --git a/docs/api/README.md b/docs/api/README.md index b9133107d..8aca061a5 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -11,7 +11,6 @@ Just like [redux](http://redux.js.org/docs/api/index.html), the react-redux-fire * [withFirestore](/docs/api/withFirestore.md) * [reducer](/docs/api/reducer.md) (also exported as `firebaseReducer`) * [reactReduxFirebase](/docs/api/enhancer.md) -* [getFirebase](/docs/api/get-firebase.md) * [constants](/docs/api/constants.md) * [actionTypes](/docs/api/constants.md) * [helpers](/docs/api/helpers.md) diff --git a/docs/api/firebaseInstance.md b/docs/api/firebaseInstance.md index d4ba8ff3f..de2f29718 100644 --- a/docs/api/firebaseInstance.md +++ b/docs/api/firebaseInstance.md @@ -17,6 +17,7 @@ - [unWatchEvent](#unwatchevent) - [promiseEvents](#promiseevents) - [login](#login) +- [handleRedirectResult](#handleredirectresult) - [logout](#logout) - [createUser](#createuser) - [resetPassword](#resetpassword) @@ -331,6 +332,17 @@ Logs user into Firebase. For examples, visit the Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** Containing user's auth data +## handleRedirectResult + +Logs user into Firebase using external. For examples, visit the +[auth section](/docs/recipes/auth.md) + +**Parameters** + +- `authData` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Auth data from Firebase's getRedirectResult + +Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** Containing user's profile + ## logout Logs user out of Firebase and empties firebase state from diff --git a/docs/api/get-firebase.md b/docs/api/get-firebase.md deleted file mode 100644 index f28ca4c52..000000000 --- a/docs/api/get-firebase.md +++ /dev/null @@ -1,42 +0,0 @@ -# getFirebase - -Expose Firebase instance created internally, which is the same as [props.firebase](/docs/api/props-firebase.md). Useful for -integrations into external libraries such as redux-thunk and redux-observable. - -The methods which are available are documented in [firebaseInstance](/docs/api/firebaseInstance.md) - -**Examples** - -_redux-thunk integration_ - -```javascript -import { applyMiddleware, compose, createStore } from 'redux'; -import thunk from 'redux-thunk'; -import { reactReduxFirebase } from 'react-redux-firebase'; -import makeRootReducer from './reducers'; -import { getFirebase } from 'react-redux-firebase'; - -const fbConfig = {} // your firebase config - -const store = createStore( - makeRootReducer(), - initialState, - compose( - applyMiddleware([ - // Pass getFirebase function as extra argument - thunk.withExtraArgument(getFirebase) - ]), - reactReduxFirebase(fbConfig) - ) -); -// then later -export const addTodo = (newTodo) => - (dispatch, getState, getFirebase) => { - const firebase = getFirebase() - firebase - .push('todos', newTodo) - .then(() => { - dispatch({ type: 'SOME_ACTION' }) - }) -}; -``` diff --git a/docs/auth.md b/docs/auth.md index 77ab7ac69..b31664239 100644 --- a/docs/auth.md +++ b/docs/auth.md @@ -16,7 +16,7 @@ const enhance = connect( enhance(SomeComponent) ``` -If you need access to methods that are not available at the top level, you can access Firebase's Full Auth API using `props.firebase.auth()` or `getFirebase().auth()`. +If you need access to methods that are not available at the top level, you can access Firebase's Full Auth API using `props.firebase.auth()` #### NOTE All examples below assume you have passed `firebase` from `context` to props. Wrapping your component with with the `withFirebase` or `firebaseConnect` Higher Order Components will make `props.firebase` available within your component: diff --git a/docs/integrations/react-chrome-redux.md b/docs/integrations/react-chrome-redux.md index 3442ce2b0..9be6a7080 100644 --- a/docs/integrations/react-chrome-redux.md +++ b/docs/integrations/react-chrome-redux.md @@ -27,13 +27,13 @@ const store = new Store({ // Do not call firebaseConnect here export default connect(null, { login })(LoginForm); ``` -Then, create your alias in the background script, import `react-redux-firebase` as well as `redux-thunk` to wait for Firebase's reply before updating the state (see reply in [ issue #84 on react-chrome-redux](https://github.com/tshaddix/react-chrome-redux/issues/84)). +Then, create your alias in the background script, import `react-redux-firebase` as well as `redux-thunk` to wait for Firebase's reply before updating the state (see reply in [issue #84 on react-chrome-redux](https://github.com/tshaddix/react-chrome-redux/issues/84)). ```js // in event (background script) // ... import thunk from 'redux-thunk' -import { reactReduxFirebase, getFirebase } from 'react-redux-firebase' +import { reactReduxFirebase } from 'react-redux-firebase' // ... // Add redux Firebase to compose const createStoreWithFirebase = compose( @@ -49,27 +49,4 @@ const store = createStoreWithFirebase( wrapStore(store, { portName: 'example' }); -// ... -const aliases = { - USER_LOGGING_IN: (payload) => { - return (dispatch) => { - getFirebase().login({ - email: payload.data.email, - password: payload.data.password - }) - .then(() => { - dispatch({ - type: constants.USER_LOGGED_IN, - payload: "ok" - }) - }) - .catch(() => { - dispatch({ - type: constants.USER_LOGGED_OUT, - payload: "logout" - }) - }) - } - } -}; ``` diff --git a/docs/integrations/react-native.md b/docs/integrations/react-native.md index 277812b1d..b8b05b761 100644 --- a/docs/integrations/react-native.md +++ b/docs/integrations/react-native.md @@ -28,7 +28,7 @@ Passing in an instance also allows for libraries with similar APIs (such as [`re ```js import { compose, createStore } from 'redux'; import RNFirebase from 'react-native-firebase'; - import { getFirebase, reactReduxFirebase } from 'react-redux-firebase'; + import { reactReduxFirebase } from 'react-redux-firebase'; import thunk from 'redux-thunk'; import makeRootReducer from './reducers'; diff --git a/docs/integrations/redux-form.md b/docs/integrations/redux-form.md index 238c13a04..8c6377308 100644 --- a/docs/integrations/redux-form.md +++ b/docs/integrations/redux-form.md @@ -9,6 +9,8 @@ Examples below assume that you have setup `redux-observable` middleware so that Debounce writing of info that is typed to a ref on Firebase (useful for syncing changes typed into redux-form inputs). ```javascript +import firebase from 'firebase/app' +import 'firebase/database' import { actionTypes } from 'redux-form'; import { Observable } from 'rxjs'; import 'rxjs/add/operator/switchMap'; @@ -22,10 +24,10 @@ const blur = action$ => action$.ofType(actionTypes.BLUR); // Combine form input streams const formInput = actionStreams$ => Observable.merge(...actionStreams$); -const firebaseSet$ = (getFirebase, path, payload) => - Observable.fromPromise(getFirebase().ref(path).set(payload)); +const firebaseSet$ = (path, payload) => + Observable.fromPromise(firebase.database().ref(path).set(payload)); -export const reduxFormFieldChangeEpic = (action$, { getState, dispatch }, getFirebase) => +export const reduxFormFieldChangeEpic = (action$, { getState, dispatch }) => // create a stream of formInput actions, listen to change and blur events formInput([change(action$), blur(action$)]) .do(({ meta }) => { // create a side-effect for dispatching action before update @@ -39,7 +41,7 @@ export const reduxFormFieldChangeEpic = (action$, { getState, dispatch }, getFir const path = 'some/path' // make call to update firebase - return firebaseSet$(getFirebase, path, payload) + return firebaseSet$(path, payload) // map each promise to an action that indicates the update complete .mapTo(({ type: 'FORM_FIELD_UPDATED', @@ -53,6 +55,8 @@ export const reduxFormFieldChangeEpic = (action$, { getState, dispatch }, getFir Writing of info that is changed in a redux-form array to firebase. ```js +import firebase from 'firebase/app' +import 'firebase/database' import { actionTypes } from 'redux-form'; import { get } from 'lodash'; import { Observable } from 'rxjs'; @@ -65,12 +69,13 @@ const arrayPush = action$ => action$.ofType(actionTypes.ARRAY_PUSH); // Combine form array action streams const formArrayAction = actionStream$ => Observable.merge(...actionStream$); -const firebaseSet$ = (getFirebase, path, payload) => - Observable.fromPromise(getFirebase().ref(path).set(payload)); +export function firebaseSet$(path, payload) { + return Observable.fromPromise(firebase.database().ref(path).set(payload)); +} -export const reduxFormArrayEpic = (action$, { getState }, getFirebase) => +export function reduxFormArrayEpic(action$, { getState }) { // create a stream of formArray actions, listen to add and remove events - formArrayAction([arrayRemove(action$), arrayPush(action$)]) + return formArrayAction([arrayRemove(action$), arrayPush(action$)]) // map arrayActions to an Observable which is merged in the output Observable of promises .mergeMap((action) => { const { form } = getState(); @@ -79,16 +84,12 @@ export const reduxFormArrayEpic = (action$, { getState }, getFirebase) => const path = 'some/path' // make call to update firebase - return firebaseSet$(getFirebase, path, payload) + return firebaseSet$(path, payload) // the action indicating the action was completed .mapTo(({ type: 'FORM_ARRAY_CHANGE', payload: meta, })); }); - -export default { - reduxFormFieldChangeEpic, - reduxFormArrayEpic, -}; +} ``` diff --git a/docs/integrations/redux-observable.md b/docs/integrations/redux-observable.md index 4d6f761ad..333d61f6b 100644 --- a/docs/integrations/redux-observable.md +++ b/docs/integrations/redux-observable.md @@ -1,21 +1,22 @@ # redux-observable -If you are using `redux-observable`, make sure to set up your redux-observable middleware so that firebase is available within your epics. Here is an example `combineEpics` function that adds `getFirebase` as third argument along with an epic that uses it: +If you are using `redux-observable`, make sure to set up your redux-observable middleware so that firebase is available within your epics. Here is an example `combineEpics` function: ## Setup -Examples below assume that you have setup `redux-observable` middleware so that firebase is available within your epics. Here is an example `combineEpics` function that adds `getFirebase` as the third argument along with an epic that uses it: +Examples below assume that you have setup `redux-observable` middleware so that firebase is available within your epics. ```javascript -import { getFirebase } from 'react-redux-firebase' +import firebase from 'firebase/app' +import 'firebase/database' import { combineEpics } from 'redux-observable' const rootEpic = (...args) => - combineEpics(somethingEpic, epic2)(...args, getFirebase) + combineEpics(somethingEpic, epic2)(...args) // then later in your epics -const somethingEpic = (action$, store, getFirebase) => +const somethingEpic = (action$, store) => action$.ofType(SOMETHING) .map(() => - getFirebase().push('somePath/onFirebase', { some: 'data' }) + firebase.database().ref('somePath/onFirebase').push({ some: 'data' }) ) ``` @@ -31,12 +32,12 @@ Debounce is writing to a ref on Firebase such as `/notifications` (useful so tha ```js const SEND_NOTIFICATION = 'SEND_NOTIFICATION'; -export const notificationEpic = (action$, { getState, dispatch }, { getFirebase }) => +export const notificationEpic = (action$, { getState, dispatch }) => action$.ofType(SEND_NOTIFICATION) // stream of notification actions .debounceTime(2000) // debounce SEND_NOTIFICATION actions by 2 seconds .do((action) => { // push the notification object to the notifications ref - return getFirebase().push('/notifications', action.payload) + return firebase.database().ref('notifications').push(action.payload) }) .mapTo({ type: 'EMAIL_NOTIFICATION_CREATED' }); ``` diff --git a/docs/integrations/redux-saga.md b/docs/integrations/redux-saga.md index fb0759e16..2a02eca2c 100644 --- a/docs/integrations/redux-saga.md +++ b/docs/integrations/redux-saga.md @@ -1,16 +1,15 @@ # Redux Saga Recipes -In order to use `react-redux-firebase` instance within sagas, pass it as the second argument of the run function `sagaMiddleware.run(helloSaga, getFirebase)`. - ### Example ```javascript import { applyMiddleware, compose, createStore } from 'redux' import { browserHistory } from 'react-router' -import { reactReduxFirebase, getFirebase } from 'react-redux-firebase' +import { reactReduxFirebase } from 'react-redux-firebase' import makeRootReducer from './reducers' import createSagaMiddleware from 'redux-saga' import firebase from 'firebase/app'; +import 'firebase/database'; const firebaseConfig = {} // firebase configuration including databaseURL const reduxFirebase = { @@ -20,9 +19,9 @@ const reduxFirebase = { firebase.initializeApp(firebaseConfig); -function* helloSaga(getFirebase) { +function* helloSaga() { try { - yield getFirebase().push('/some/path', { nice: 'work!' }) + yield firebase.ref('/some/path').push({ nice: 'work!' }) } catch(err) { console.log('Error in saga!:', err) } @@ -46,6 +45,6 @@ export default (initialState = {}, history) => { return store } -// when calling saga, pass getFirebase -sagaMiddleware.run(helloSaga, getFirebase) +// when calling saga +sagaMiddleware.run(helloSaga) ``` diff --git a/docs/integrations/thunks.md b/docs/integrations/thunks.md index c2f614f22..9083a6e5c 100644 --- a/docs/integrations/thunks.md +++ b/docs/integrations/thunks.md @@ -7,7 +7,7 @@ In order to get the most out of writing your thunks, make sure to set up your th ```javascript import { applyMiddleware, compose, createStore } from 'redux'; import thunk from 'redux-thunk'; -import { reactReduxFirebase, getFirebase } from 'react-redux-firebase'; +import { reactReduxFirebase } from 'react-redux-firebase'; import makeRootReducer from './reducers'; const fbConfig = {} // your firebase config @@ -16,9 +16,7 @@ const store = createStore( makeRootReducer(), initialState, compose( - applyMiddleware( - thunk.withExtraArgument(getFirebase) // Pass getFirebase function as extra argument - ), + applyMiddleware(thunk), reactReduxFirebase(fbConfig, { userProfile: 'users', enableLogging: false }) ) ); @@ -27,8 +25,6 @@ const store = createStore( ## Example Thunk -After following the setup above, `getFirebase` function becomes available within your thunks as the third argument: - ```javascript const sendNotification = (payload) => ({ type: NOTIFICATION, @@ -36,10 +32,10 @@ const sendNotification = (payload) => ({ }) export const addTodo = (newTodo) => - (dispatch, getState, getFirebase) => { - const firebase = getFirebase() - firebase - .push('todos', newTodo) + (dispatch, getState) => { + return firebase + .ref('todos') + .push(newTodo) .then(() => { dispatch(sendNotification('Todo Added')) }) diff --git a/docs/recipes/auth.md b/docs/recipes/auth.md index 090ceb16e..0de4d7595 100644 --- a/docs/recipes/auth.md +++ b/docs/recipes/auth.md @@ -120,7 +120,7 @@ export default compose( ```js import firebase from 'firebase' import { compose, createStore, applyMiddleware } from 'redux' -import { getFirebase, reactReduxFirebase } from 'react-redux-firebase' +import { reactReduxFirebase } from 'react-redux-firebase' // Firebase config const fbConfig = { @@ -146,7 +146,7 @@ const createStore = (initialState = {}) => { initialState, compose( reactReduxFirebase(firebase, rrfConfig), - applyMiddleware(thunk.withExtraArgument(getFirebase)) + applyMiddleware(thunk) ) ) diff --git a/docs/recipes/ssr.md b/docs/recipes/ssr.md index caad1a705..103710b67 100644 --- a/docs/recipes/ssr.md +++ b/docs/recipes/ssr.md @@ -9,7 +9,7 @@ Preloading data is a common step to in serverside rendering. How it is done diff After creating your store: ```js -store.firebase // getFirebase can also be used +store.firebase .promiseEvents([ { path: 'todos' }, { path: 'users' } diff --git a/docs/storage.md b/docs/storage.md index 86497a190..41fafc17c 100644 --- a/docs/storage.md +++ b/docs/storage.md @@ -8,7 +8,7 @@ For Examples of how to use these methods, please visit the [recipes section](/do Upload an array of files to a location on Firebase storage. This includes the option to also write meta data for the object to Firebase database. -Available on `props.firebase` if using `firebaseConnect` HOC or using `getFirebase`. +Available on `props.firebase` if using `firebaseConnect` HOC. #### Parameters - `path` [**String**][string-url] - Path within Firebase Storage at which to upload File. @@ -24,7 +24,7 @@ Available on `props.firebase` if using `firebaseConnect` HOC or using `getFireba Upload a single file to a location. -Available on `props.firebase` if using `firebaseConnect` HOC or using `getFirebase`. +Available on `props.firebase` if using `firebaseConnect` HOC. #### Parameters - `path` [**String**][string-url] - Path within Firebase Storage at which to upload File. @@ -44,7 +44,7 @@ Available on `props.firebase` if using `firebaseConnect` HOC or using `getFireba Delete a file from Firebase storage with the option to remove metadata from real time database. -Available on `props.firebase` if using `firebaseConnect` HOC or using `getFirebase`. +Available on `props.firebase` if using `firebaseConnect` HOC. #### Parameters - `path` [**String**][string-url] - Path within Firebase Storage of File to delete. diff --git a/examples/complete/material/src/store/createStore.js b/examples/complete/material/src/store/createStore.js index b67d8141c..e01a68ad0 100755 --- a/examples/complete/material/src/store/createStore.js +++ b/examples/complete/material/src/store/createStore.js @@ -1,6 +1,6 @@ import { applyMiddleware, compose, createStore } from 'redux' import thunk from 'redux-thunk' -import { reactReduxFirebase, getFirebase } from 'react-redux-firebase' +import { reactReduxFirebase } from 'react-redux-firebase' import firebase from 'firebase/app' import 'firebase/database' import 'firebase/auth' @@ -46,7 +46,7 @@ export default (initialState = {}) => { // Middleware Configuration // ====================================================== const middleware = [ - thunk.withExtraArgument(getFirebase) + thunk // This is where you add other middleware like redux-observable ] diff --git a/examples/complete/react-native-firebase/src/createStore.js b/examples/complete/react-native-firebase/src/createStore.js index d6a7af7d4..adcc98ea4 100644 --- a/examples/complete/react-native-firebase/src/createStore.js +++ b/examples/complete/react-native-firebase/src/createStore.js @@ -1,32 +1,25 @@ -import { applyMiddleware, compose, createStore } from 'redux'; -import { getFirebase, reactReduxFirebase } from 'react-redux-firebase'; -import RNFirebase from 'react-native-firebase'; -import thunk from 'redux-thunk'; -import makeRootReducer from './reducers'; +import { compose, createStore } from 'redux' +import { reactReduxFirebase } from 'react-redux-firebase' +import RNFirebase from 'react-native-firebase' +import makeRootReducer from './reducers' const reactNativeFirebaseConfig = { debug: true -}; +} // for more config options, visit http://docs.react-redux-firebase.com/history/v2.0.0/docs/api/compose.html const reduxFirebaseConfig = { userProfile: 'users' // save users profiles to 'users' collection -}; +} export default (initialState = { firebase: {} }) => { // initialize firebase - const firebase = RNFirebase.initializeApp(reactNativeFirebaseConfig); - - const middleware = [ - // make getFirebase available in third argument of thunks - thunk.withExtraArgument({ getFirebase }), - ]; + const firebase = RNFirebase.initializeApp(reactNativeFirebaseConfig) const store = createStore( makeRootReducer(), initialState, // initial state compose( - reactReduxFirebase(firebase, reduxFirebaseConfig), // pass initialized react-native-firebase app instance - applyMiddleware(...middleware) + reactReduxFirebase(firebase, reduxFirebaseConfig) // pass initialized react-native-firebase app instance ) ) return store diff --git a/index.d.ts b/index.d.ts index 5dcbf6d0f..4a44e8b29 100644 --- a/index.d.ts +++ b/index.d.ts @@ -490,12 +490,6 @@ export function firestoreReducer(...args: any[]): FirestoreReducer.Reducer export function fixPath(path: string): string -/** - * Get Firebase instance - * http://docs.react-redux-firebase.com/history/v3.0.0/docs/api/get-firebase.html - */ -export function getFirebase(): AppTypes.FirebaseApp - export function getVal(firebase: object, path: string, notSetValue?: any): any export function isEmpty(...args: any[]): boolean