From 0ea87767afc00669090e99f8645b6a2fb2fc5ea5 Mon Sep 17 00:00:00 2001
From: Adam Butterworth <abutterworth@edx.org>
Date: Tue, 4 Jun 2019 13:02:30 -0600
Subject: [PATCH] fix: async states for tpa disconnect is per provider not
 shared (#89)

---
 src/account-settings/ThirdPartyAuth.jsx |  8 +++----
 src/account-settings/actions.js         | 12 +++++------
 src/account-settings/reducers.js        | 28 +++++++++++++++++++------
 src/account-settings/sagas.js           |  9 ++++----
 4 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/account-settings/ThirdPartyAuth.jsx b/src/account-settings/ThirdPartyAuth.jsx
index 6d51e35..f67c274 100644
--- a/src/account-settings/ThirdPartyAuth.jsx
+++ b/src/account-settings/ThirdPartyAuth.jsx
@@ -11,8 +11,8 @@ import { thirdPartyAuthSelector } from './selectors';
 class ThirdPartyAuth extends React.Component {
   onClickDisconnect = (e) => {
     e.preventDefault();
-    if (this.props.disconnectingState === 'pending') return;
     const providerId = e.currentTarget.getAttribute('data-provider-id');
+    if (this.props.disconnectingState[providerId] === 'pending') return;
     const disconnectUrl = e.currentTarget.getAttribute('data-disconnect-url');
     this.props.disconnectAuth(disconnectUrl, providerId);
   }
@@ -60,7 +60,7 @@ class ThirdPartyAuth extends React.Component {
 
         <StatefulButton
           className="btn-link"
-          state={this.props.disconnectingState}
+          state={this.props.disconnectingState[id]}
           labels={{
             default: (
               <FormattedMessage
@@ -124,14 +124,14 @@ ThirdPartyAuth.propTypes = {
     connected: PropTypes.bool,
     id: PropTypes.string,
   })),
-  disconnectingState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
+  disconnectingState: PropTypes.objectOf(PropTypes.oneOf([null, 'pending', 'complete', 'error'])),
   disconnectErrors: PropTypes.objectOf(PropTypes.bool),
   disconnectAuth: PropTypes.func.isRequired,
 };
 
 ThirdPartyAuth.defaultProps = {
   providers: undefined,
-  disconnectingState: null,
+  disconnectingState: {},
   disconnectErrors: {},
 };
 
diff --git a/src/account-settings/actions.js b/src/account-settings/actions.js
index 7729361..aee07f8 100644
--- a/src/account-settings/actions.js
+++ b/src/account-settings/actions.js
@@ -179,16 +179,16 @@ export const fetchTimeZonesSuccess = timeZones => ({
 export const disconnectAuth = (url, providerId) => ({
   type: DISCONNECT_AUTH.BASE, payload: { url, providerId },
 });
-export const disconnectAuthBegin = () => ({
-  type: DISCONNECT_AUTH.BEGIN,
+export const disconnectAuthBegin = providerId => ({
+  type: DISCONNECT_AUTH.BEGIN, payload: { providerId },
 });
-export const disconnectAuthSuccess = thirdPartyAuthProviders => ({
+export const disconnectAuthSuccess = (providerId, thirdPartyAuthProviders) => ({
   type: DISCONNECT_AUTH.SUCCESS,
-  payload: { thirdPartyAuthProviders },
+  payload: { providerId, thirdPartyAuthProviders },
 });
 export const disconnectAuthFailure = providerId => ({
   type: DISCONNECT_AUTH.FAILURE, payload: { providerId },
 });
-export const disconnectAuthReset = () => ({
-  type: DISCONNECT_AUTH.RESET,
+export const disconnectAuthReset = providerId => ({
+  type: DISCONNECT_AUTH.RESET, payload: { providerId },
 });
diff --git a/src/account-settings/reducers.js b/src/account-settings/reducers.js
index c8ca1b4..17af9fa 100644
--- a/src/account-settings/reducers.js
+++ b/src/account-settings/reducers.js
@@ -26,7 +26,7 @@ export const defaultState = {
   resetPasswordState: null,
   timeZones: [],
   countryTimeZones: [],
-  disconnectingState: null,
+  disconnectingState: {},
   disconnectErrors: {},
   previousSiteLanguage: null,
 };
@@ -203,27 +203,43 @@ const accountSettingsReducer = (state = defaultState, action) => {
     case DISCONNECT_AUTH.BEGIN:
       return {
         ...state,
-        disconnectingState: 'pending',
+        disconnectingState: {
+          ...state.disconnectingState,
+          [action.payload.providerId]: 'pending',
+        },
       };
     case DISCONNECT_AUTH.SUCCESS:
       return {
         ...state,
-        disconnectingState: 'complete',
+        disconnectingState: {
+          ...state.disconnectingState,
+          [action.payload.providerId]: 'complete',
+        },
         authProviders: action.payload.thirdPartyAuthProviders,
       };
     case DISCONNECT_AUTH.FAILURE:
       return {
         ...state,
-        disconnectingState: 'error',
+        disconnectingState: {
+          ...state.disconnectingState,
+          [action.payload.providerId]: 'error',
+        },
         disconnectErrors: {
+          ...state.disconnectErrors,
           [action.payload.providerId]: true,
         },
       };
     case DISCONNECT_AUTH.RESET:
       return {
         ...state,
-        disconnectingState: null,
-        disconnectErrors: {},
+        disconnectingState: {
+          ...state.disconnectingState,
+          [action.payload.providerId]: null,
+        },
+        disconnectErrors: {
+          ...state.disconnectErrors,
+          [action.payload.providerId]: null,
+        },
       };
 
     default:
diff --git a/src/account-settings/sagas.js b/src/account-settings/sagas.js
index 3f8ceba..be1b0ee 100644
--- a/src/account-settings/sagas.js
+++ b/src/account-settings/sagas.js
@@ -139,15 +139,16 @@ export function* handleFetchTimeZones(action) {
 }
 
 export function* handleDisconnectAuth(action) {
+  const { providerId } = action.payload;
   try {
-    yield put(disconnectAuthReset());
-    yield put(disconnectAuthBegin());
+    yield put(disconnectAuthReset(providerId));
+    yield put(disconnectAuthBegin(providerId));
     yield call(ApiService.postDisconnectAuth, action.payload.url);
     const thirdPartyAuthProviders = yield call(ApiService.getThirdPartyAuthProviders);
-    yield put(disconnectAuthSuccess(thirdPartyAuthProviders));
+    yield put(disconnectAuthSuccess(providerId, thirdPartyAuthProviders));
   } catch (e) {
     logAPIErrorResponse(e);
-    yield put(disconnectAuthFailure(action.payload.providerId));
+    yield put(disconnectAuthFailure(providerId));
   }
 }