fix: async states for tpa disconnect is per provider not shared (#89)

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: {},
 };
 

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 },
 });

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:

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));
   }
 }