update roles recipe to reflect redux-auth-wrapper v2 changes

Author: markoelez

docs/recipes/roles.md

@@ -107,12 +107,16 @@ Having cloud function contain logic about which users get assigned certain roles
 const adminEmails = ['[email protected]'] // list of emails to automatically assign admin role to
 
 async function assignUserRole(user) {
-  const { uid, email, displayName } = user; // The email of the user.
+  const { uid, email, displayName } = user // The email of the user.
   const newRole = adminEmails.includes(email) ? 'admin' : 'user'
-  await admin.firestore().collection('users').doc(uid).set({ role: 'user' }, { merge: true })
+  await admin
+    .firestore()
+    .collection('users')
+    .doc(uid)
+    .set({ role: 'user' }, { merge: true })
 }
 
-exports.assignUserRole = functions.auth.user().onCreate(assignUserRole);
+exports.assignUserRole = functions.auth.user().onCreate(assignUserRole)
 ```
 
 More info is available about doing this in the [extend auth with functions section of the firebase docs](https://firebase.google.com/docs/auth/extend-with-functions).
@@ -123,6 +127,8 @@ Using redux-auth-wrapper you can create higher order components that will make i
 
 Here is an example of an HOC that checks to make sure the user is an admin:
 
+**redux-auth-wrapper v1**
+
 ```js
 import { get } from 'lodash';
 import { UserAuthWrapper } from 'redux-auth-wrapper';
@@ -151,6 +157,34 @@ export const UserIsAdmin = UserAuthWrapper({ // eslint-disable-line new-cap
 });
 ```
 
+**react-router v4 + redux-auth-wrapper v2**
+
+```js
+import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper'
+import { connectedRouterRedirect } from 'redux-auth-wrapper/history4/redirect'
+import createHistory from 'history/createBrowserHistory'
+import LoadingScreen from '../components/LoadingScreen' // change to your custom component
+
+const locationHelper = locationHelperBuilder({})
+const browserHistory = createHistory()
+
+export const UserIsAdmin = connectedRouterRedirect({
+  wrapperDisplayName: 'UserIsAuthenticated',
+  LoadingComponent: LoadingScreen,
+  allowRedirectBack: false,
+  redirectPath: (state, ownProps) =>
+    locationHelper.getRedirectQueryParam(ownProps) || '/',
+  authenticatingSelector: ({ firebase: { auth, profile, isInitializing } }) =>
+    !auth.isLoaded || !profile.isLoaded || isInitializing === true,
+  authenticatedSelector: ({ firebase: { profile } }) =>
+    profile.role.name === 'admin',
+  redirectAction: newLoc => dispatch => {
+    browserHistory.replace(newLoc)
+    dispatch({ type: UNAUTHED_REDIRECT })
+  }
+})
+```
+
 Here is an example of a UserHasPermission HOC that allows us to pass in a string permission (such as todos):
 
 _Tip: you can place the below HOC in `router.js` together with `UserIsNotAuthenticated` and `UserIsAuthenticated`._
@@ -188,30 +222,31 @@ export const UserHasPermission = permission => UserAuthWrapper({
 **react-router v4 + redux-auth-wrapper v2**
 
 ```javascript
-import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper';
-import { browserHistory } from 'react-router';
-import LoadingScreen from '../components/LoadingScreen'; // change it to your custom component
-
-const locationHelper = locationHelperBuilder({});
-
-export const UserHasPermission = permission => UserAuthWrapper({
-  wrapperDisplayName: 'UserHasPermission',
-  AuthenticatingComponent: LoadingScreen,
-  allowRedirectBack: false,
-  redirectPath: (state, ownProps) =>
-    locationHelper.getRedirectQueryParam(ownProps) || '/login',
-  authenticatingSelector: ({ firebase: { auth, isInitializing } }) =>
-    !auth.isLoaded || !profile.isLoaded || isInitializing === true,
-  authenticatedSelector: ({ firebase: { auth } }) =>
-    auth.isLoaded && !auth.isEmpty,
-  redirectAction: newLoc => (dispatch) => {
-    browserHistory.replace(newLoc); // or routerActions.replace
-    dispatch({ type: UNAUTHED_REDIRECT });
-  }
-});
+import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper'
+import { browserHistory } from 'react-router'
+import LoadingScreen from '../components/LoadingScreen' // change it to your custom component
+import { connectedRouterRedirect } from 'redux-auth-wrapper/history4/redirect'
+
+const locationHelper = locationHelperBuilder({})
+
+export const UserHasPermission = permission =>
+  connectedRouterRedirect({
+    wrapperDisplayName: 'UserHasPermission',
+    AuthenticatingComponent: LoadingScreen,
+    allowRedirectBack: false,
+    redirectPath: (state, ownProps) =>
+      locationHelper.getRedirectQueryParam(ownProps) || '/login',
+    authenticatingSelector: ({ firebase: { auth, isInitializing } }) =>
+      !auth.isLoaded || !profile.isLoaded || isInitializing === true,
+    authenticatedSelector: ({ firebase: { auth } }) =>
+      auth.isLoaded && !auth.isEmpty,
+    redirectAction: newLoc => dispatch => {
+      browserHistory.replace(newLoc) // or routerActions.replace
+      dispatch({ type: UNAUTHED_REDIRECT })
+    }
+  })
 ```
 
-
 ## Checking for roles on pages/components
 
 The Higher Order Component above can then be applied like so: