fix(oauth): oauth_states query is now done before the WaitingForOAuth page renders (#322)

* fix(oauth): query the oauth_states before waiting for oauth page opens

* docs: remove outdated comments

* refactor(memberState): let the waiting component get the memberState directly

* test(reducer): add tests to cover recent changes

* refactor(actions): use existing action creator

Author: codingLogan

src/redux/actions/Connect.js

@@ -79,9 +79,9 @@ export const startOauth = (member, institution) => ({
   payload: { member, institution },
 })
 
-export const startOauthSuccess = (member, oauthWindowURI) => ({
+export const startOauthSuccess = (member, oauthWindowURI, memberState = null) => ({
   type: ActionTypes.START_OAUTH_SUCCESS,
-  payload: { member, oauthWindowURI },
+  payload: { member, oauthWindowURI, memberState },
 })
 
 export const jobComplete = (member, job) => ({

src/redux/actions/__tests__/Connect-test.js

@@ -76,7 +76,7 @@ describe('Connect Dispatcher', () => {
       })
       expect(actions.startOauthSuccess({ guid: 'MBR-1' }, 'something.com')).toEqual({
         type: ActionTypes.START_OAUTH_SUCCESS,
-        payload: { member: { guid: 'MBR-1' }, oauthWindowURI: 'something.com' },
+        payload: { member: { guid: 'MBR-1' }, oauthWindowURI: 'something.com', memberState: null },
       })
     })
   })

src/redux/reducers/Connect.js

@@ -31,6 +31,7 @@ export const defaultState = {
   isConnectMounted: false,
   isOauthLoading: false, // whether or not the oauth process is starting
   oauthURL: null, // the URL to the oauth provider
+  memberState: null, // pending oauth state for the active oauth member
   oauthErrorReason: null, // the reason there was an oauth error
   // whether or not there was an error *after* the user authenticated with
   // the provider, this means mx messed up after successful auth.
@@ -339,12 +340,14 @@ const startOauth = (state, action) => ({
       : STEPS.ENTER_CREDENTIALS,
   ),
   currentMemberGuid: action.payload.member.guid,
+  memberState: defaultState.memberState,
   selectedInstitution: action.payload.institution,
 })
 const startOauthSuccess = (state, action) => ({
   ...state,
   currentMemberGuid: action.payload.member.guid,
   isOauthLoading: false,
+  memberState: action.payload.memberState,
   members: upsertMember(state, { payload: action.payload.member }),
   oauthURL: action.payload.oauthWindowURI,
 })
@@ -359,12 +362,14 @@ const oauthError = (state, action) => ({
   ...state,
   currentMemberGuid: action.payload.memberGuid,
   location: pushLocation(state.location, STEPS.OAUTH_ERROR),
+  memberState: defaultState.memberState,
   oauthURL: defaultState.oauthURL,
   oauthErrorReason: action.payload.errorReason,
 })
 const retryOAuth = (state) => ({
   ...state,
   location: popLocation(state),
+  memberState: defaultState.memberState,
   oauthURL: defaultState.oauthURL,
   oauthErrorReason: defaultState.oauthErrorReason,
 })

src/redux/reducers/__tests__/Connect-test.js

@@ -10,6 +10,7 @@ import {
   loadConnectError,
   loadConnectSuccess,
   retryOAuth,
+  startOauth,
   startOauthSuccess,
   stepToDeleteMemberSuccess,
   stepToMicrodeposits,
@@ -669,14 +670,30 @@ describe('Connect redux store', () => {
   })
 
   describe('oauth actions', () => {
+    it('should clear stale memberState with START_OAUTH', () => {
+      const institution = { guid: 'INS-1', credentials }
+      const beforeState = {
+        ...defaultState,
+        memberState: { guid: 'OAS-STALE' },
+      }
+
+      const afterState = reducer(beforeState, startOauth({ guid: 'MBR-1' }, institution))
+
+      expect(afterState.currentMemberGuid).toEqual('MBR-1')
+      expect(afterState.selectedInstitution).toEqual(institution)
+      expect(afterState.memberState).toEqual(defaultState.memberState)
+    })
+
     it('should finish the loader with START_OAUTH_SUCCESS', () => {
+      const memberState = { guid: 'OAS-1' }
       const afterState = reducer(
         { ...defaultState, isOauthLoading: true },
-        startOauthSuccess({ guid: 'MBR-1' }, 'something.com'),
+        startOauthSuccess({ guid: 'MBR-1' }, 'something.com', memberState),
       )
 
       expect(afterState.isOauthLoading).toBe(false)
       expect(afterState.oauthURL).toBe('something.com')
+      expect(afterState.memberState).toEqual(memberState)
     })
 
     it('should set some oauth error state when OAUTH_COMPLETE_ERROR happens', () => {
@@ -694,6 +711,7 @@ describe('Connect redux store', () => {
       expect(afterState.location[afterState.location.length - 1].step).toEqual(STEPS.OAUTH_ERROR)
       expect(afterState.oauthURL).toEqual(null)
       expect(afterState.oauthErrorReason).toEqual(OAUTH_ERROR_REASONS.CANCELLED)
+      expect(afterState.memberState).toEqual(defaultState.memberState)
     })
   })
 
@@ -940,6 +958,7 @@ describe('Connect redux store', () => {
       const beforeState = {
         ...defaultState,
         oauthURL: 'something.com',
+        memberState: { guid: 'OAS-123' },
         location: [
           { step: STEPS.SEARCH },
           { step: STEPS.ENTER_CREDENTIALS },
@@ -953,6 +972,7 @@ describe('Connect redux store', () => {
         STEPS.ENTER_CREDENTIALS,
       )
       expect(afterState.oauthURL).toEqual(defaultState.oauthURL)
+      expect(afterState.memberState).toEqual(defaultState.memberState)
     })
 
     it('should clear the OAuth error and reason if we are in the oauth error step', () => {

src/views/oauth/OAuthStep.js

@@ -26,6 +26,7 @@ import { scrollToTop } from 'src/utilities/ScrollToTop'
 
 import { DisclosureInterstitial } from 'src/views/disclosure/Interstitial'
 import { AnalyticEvents } from 'src/const/Analytics'
+import { OauthState } from 'src/const/consts'
 import useAnalyticsEvent from 'src/hooks/useAnalyticsEvent'
 import { PostMessageContext } from 'src/ConnectWidget'
 
@@ -86,13 +87,10 @@ export const OAuthStep = React.forwardRef((props, navigationRef) => {
    * Called when we succesfully generate an oauth window uri for the exsting
    * member, or use the uri from a brand new member.
    */
-  function onStartOAuthSuccess(member, oauthWindowURI) {
+  function onStartOAuthSuccess(member, oauthWindowURI, memberState) {
     setIsStartingOauth(false)
     setOAuthStartError(null)
-    dispatch({
-      type: connectActions.ActionTypes.START_OAUTH_SUCCESS,
-      payload: { member, oauthWindowURI },
-    })
+    dispatch(connectActions.startOauthSuccess(member, oauthWindowURI, memberState))
   }
 
   /**
@@ -120,6 +118,14 @@ export const OAuthStep = React.forwardRef((props, navigationRef) => {
   useEffect(() => {
     if (!isStartingOauth) return () => {}
 
+    const loadPendingOAuthState = (memberGuid) =>
+      defer(() =>
+        api.loadOAuthStates({
+          outbound_member_guid: memberGuid,
+          auth_status: OauthState.AuthStatus.PENDING,
+        }),
+      ).pipe(map((states) => states?.[0]))
+
     let member$
 
     /**
@@ -152,14 +158,25 @@ export const OAuthStep = React.forwardRef((props, navigationRef) => {
           config,
         ),
       )
-        .pipe(map((resp) => resp.member))
+        .pipe(
+          map((resp) => resp.member),
+          mergeMap((newMember) =>
+            loadPendingOAuthState(newMember.guid).pipe(
+              map((newMemberState) => ({
+                member: newMember,
+                oauthWindowURI: newMember.oauth_window_uri,
+                memberState: newMemberState,
+              })),
+            ),
+          ),
+        )
         .subscribe(
-          (member) => {
+          ({ member, oauthWindowURI, memberState }) => {
             sendAnalyticsEvent(AnalyticEvents.OAUTH_PENDING_MEMBER_CREATED, {
               institution_guid: institution.guid,
               institution_name: institution.name,
             })
-            onStartOAuthSuccess(member, member.oauth_window_uri)
+            onStartOAuthSuccess(member, oauthWindowURI, memberState)
           },
           (err) => onStartOAuthFail(err),
         )
@@ -171,12 +188,25 @@ export const OAuthStep = React.forwardRef((props, navigationRef) => {
       .pipe(
         mergeMap((existingMember) =>
           defer(() => api.getOAuthWindowURI(existingMember.guid, config)).pipe(
-            map(({ oauth_window_uri }) => [existingMember, oauth_window_uri]),
+            map(({ oauth_window_uri }) => ({
+              member: existingMember,
+              oauthWindowURI: oauth_window_uri,
+            })),
+          ),
+        ),
+        mergeMap(({ member, oauthWindowURI }) =>
+          loadPendingOAuthState(member.guid).pipe(
+            map((newMemberState) => ({
+              member,
+              oauthWindowURI,
+              memberState: newMemberState,
+            })),
           ),
         ),
       )
       .subscribe(
-        ([member, oauthWindowURI]) => onStartOAuthSuccess(member, oauthWindowURI),
+        ({ member, oauthWindowURI, memberState }) =>
+          onStartOAuthSuccess(member, oauthWindowURI, memberState),
         (err) => onStartOAuthFail(err),
       )
 

src/views/oauth/WaitingForOAuth.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import { of, defer } from 'rxjs'
 import { map, mergeMap, first, filter, catchError } from 'rxjs/operators'
 
@@ -32,6 +33,7 @@ export const WaitingForOAuth = ({
     institution_name: institution.name,
   })
 
+  const memberState = useSelector((state) => state.connect.memberState)
   const sendAnalyticsEvent = useAnalyticsEvent()
   const [disableOauthButtons, setDisableOauthButtons] = useState(true)
   const tokens = useTokens()
@@ -42,32 +44,8 @@ export const WaitingForOAuth = ({
   const clientLocale = document.querySelector('html')?.getAttribute('lang') || 'en'
 
   useEffect(() => {
-    /**
-     * This gets the most recent PENDING oauth state for the member and polls that
-     * state until it goes from PENDING to ERRORED or SUCCESS.
-     *
-     * NOTE: the pause and retreival of the most recent oauth state is a little
-     * weird. Ideally we would know which oauth state to poll for ahead of time,
-     * but we don't since it is created when the user visits the oauth url.
-     *
-     * Once that is refactored in this issue:
-     *  https://gitlab.mx.com/mx/connectivity/connect/connect-issues/-/issues/1836
-     *
-     * We could potentially have the member create and oauth uri endpoints return
-     * the oauth state created and know which oauth state to retreive ahead of time.
-     */
-    const oauthStateCompleted$ = of(outboundMember).pipe(
-      mergeMap(() =>
-        defer(() =>
-          api.loadOAuthStates({
-            outbound_member_guid: outboundMember.guid,
-            auth_status: OauthState.AuthStatus.PENDING,
-          }),
-        ).pipe(
-          map((states) => states?.[0]),
-          catchError(() => of(null)),
-        ),
-      ),
+    // This polls the member state until it goes from PENDING to ERRORED or SUCCESS.
+    const oauthStateCompleted$ = of(memberState).pipe(
       filter((latestState) => !!latestState),
       mergeMap((latestState) => pollOauthState(latestState.guid, api)),
       mergeMap((pollingState) => {

src/views/oauth/__tests__/WaitingForOAuth-test.tsx

@@ -17,8 +17,14 @@ describe('WaitingForOAuth view', () => {
       outboundMember: { guid: 'MBR-123' },
     }
 
+    const preloadedState = {
+      connect: {
+        memberState: { ...OAUTH_STATE.oauth_state, guid: 'OAS-123' },
+      },
+    }
+
     it('should disable the buttons when the component loads', () => {
-      render(<WaitingForOAuth {...defaultProps} />)
+      render(<WaitingForOAuth {...defaultProps} />, { preloadedState })
       const tryAgainButton = screen.getByRole('button', { name: 'Try again' })
       expect(
         screen.getByText(
@@ -32,7 +38,7 @@ describe('WaitingForOAuth view', () => {
     })
 
     it('should enable the tryAgain button after 2 seconds and call onOAuthRetry when clicked ', async () => {
-      const { user } = render(<WaitingForOAuth {...defaultProps} />)
+      const { user } = render(<WaitingForOAuth {...defaultProps} />, { preloadedState })
       const tryAgainButton = await screen.findByRole('button', { name: 'Try again' })
       await waitFor(
         async () => {
@@ -45,7 +51,7 @@ describe('WaitingForOAuth view', () => {
     })
 
     it('should call onOAuthSuccess if polling an oauth state was successful', async () => {
-      render(<WaitingForOAuth {...defaultProps} />)
+      render(<WaitingForOAuth {...defaultProps} />, { preloadedState })
       await waitFor(
         async () => {
           expect(defaultProps.onOAuthSuccess).toHaveBeenCalledTimes(1)
@@ -61,6 +67,7 @@ describe('WaitingForOAuth view', () => {
         <ApiProvider apiValue={{ ...apiValue, loadOAuthState }}>
           <WaitingForOAuth {...defaultProps} />
         </ApiProvider>,
+        { preloadedState },
       )
       await waitFor(
         async () => {
@@ -85,6 +92,7 @@ describe('WaitingForOAuth view', () => {
         <ApiProvider apiValue={{ ...apiValue, loadOAuthState }}>
           <WaitingForOAuth {...defaultProps} />
         </ApiProvider>,
+        { preloadedState },
       )
 
       await waitFor(