Merge save states of profile and preferences

src/containers/UserProfile/index.jsx

@@ -30,8 +30,8 @@ const mapStateToProps = (state) => {
     socialLinks: state.profilePage.profile.socialLinks,
     bio: state.profilePage.profile.bio,
     certificates: null,
-    accountPrivacy: state.preferences.accountPrivacy,
-    visibility: state.preferences.visibility || {},
+    accountPrivacy: state.profilePage.preferences.accountPrivacy,
+    visibility: state.profilePage.preferences.visibility || {},
   };
 };
 

src/data/reducers/PreferencesReducer.js

@@ -1,68 +0,0 @@
-import defaultsDeep from 'lodash.defaultsdeep';
-
-import {
-  FETCH_PREFERENCES,
-  SAVE_PREFERENCES,
-} from '../../actions/preferences';
-
-
-const initialState = {
-  fetchPreferencesState: null,
-  savePreferencesState: null,
-};
-
-
-const profile = (state = initialState, action) => {
-  switch (action.type) {
-    case FETCH_PREFERENCES.BEGIN:
-      return {
-        ...state,
-        fetchPreferencesState: 'pending',
-      };
-    case FETCH_PREFERENCES.SUCCESS:
-      return {
-        ...state,
-        fetchPreferencesState: 'complete',
-        ...action.preferences,
-      };
-    case FETCH_PREFERENCES.FAILURE:
-      return {
-        ...state,
-        fetchPreferencesState: 'error',
-      };
-    case FETCH_PREFERENCES.RESET:
-      return {
-        ...state,
-        fetchPreferencesState: null,
-        error: null,
-      };
-
-    case SAVE_PREFERENCES.BEGIN:
-      return {
-        ...state,
-        savePreferencesState: 'pending',
-      };
-    case SAVE_PREFERENCES.SUCCESS:
-      // defaults deep used because our preferences/state object is multi-dimensional
-      return {
-        ...defaultsDeep({}, action.preferences, state),
-        savePreferencesState: 'complete',
-      };
-    case SAVE_PREFERENCES.FAILURE:
-      return {
-        ...state,
-        savePreferencesState: 'error',
-      };
-    case SAVE_PREFERENCES.RESET:
-      return {
-        ...state,
-        savePreferencesState: null,
-        error: null,
-      };
-
-    default:
-      return state;
-  }
-};
-
-export default profile;

src/data/reducers/ProfilePageReducer.js

@@ -1,3 +1,5 @@
+import defaultsDeep from 'lodash.defaultsdeep';
+
 import {
   SAVE_PROFILE,
   SAVE_PROFILE_PHOTO,
@@ -7,12 +9,31 @@ import {
   FETCH_PROFILE,
 } from '../../actions/profile';
 
+import {
+  FETCH_PREFERENCES,
+  SAVE_PREFERENCES,
+} from '../../actions/preferences';
+
 const initialState = {
   error: null,
   saveState: null,
   savePhotoState: null,
+  savePreferencesState: null,
+  saveProfileState: null,
   currentlyEditingField: null,
   profile: {},
+  preferences: {},
+};
+
+// This function returns state based on priority:
+// if any are pending > the state is pending
+// then, if any are errors > the state is error
+// then, if any are complete > the state is complete
+// else null
+const mergeSaveStates = (statesToMerge) => {
+  const statePriority = ['pending', 'error', 'complete', null];
+  statesToMerge.sort((a, b) => statePriority.indexOf(a) - statePriority.indexOf(b));
+  return statesToMerge[0];
 };
 
 const profilePage = (state = initialState, action) => {
@@ -32,33 +53,72 @@ const profilePage = (state = initialState, action) => {
       }
       return state;
 
+    case FETCH_PREFERENCES.SUCCESS:
+      return {
+        ...state,
+        preferences: action.preferences,
+      };
+
+    case SAVE_PREFERENCES.BEGIN:
+      return {
+        ...state,
+        savePreferencesState: 'pending',
+        saveState: mergeSaveStates(['pending', state.saveProfileState]),
+      };
+    case SAVE_PREFERENCES.SUCCESS:
+      // defaults deep used because our preferences/state object is multi-dimensional
+      return {
+        ...state,
+        preferences: defaultsDeep({}, action.preferences, state.preferences),
+        savePreferencesState: 'complete',
+        saveState: mergeSaveStates(['complete', state.saveProfileState]),
+      };
+    case SAVE_PREFERENCES.FAILURE:
+      return {
+        ...state,
+        savePreferencesState: 'error',
+        saveState: mergeSaveStates(['error', state.saveProfileState]),
+      };
+    case SAVE_PREFERENCES.RESET:
+      return {
+        ...state,
+        savePreferencesState: null,
+        saveState: mergeSaveStates([null, state.saveProfileState]),
+        error: null,
+      };
+
     case FETCH_PROFILE.SUCCESS:
       return {
+        ...state,
         profile: action.payload.profile,
       };
 
     case SAVE_PROFILE.BEGIN:
       return {
         ...state,
-        saveState: 'pending',
+        saveProfileState: 'pending',
+        saveState: mergeSaveStates(['pending', state.savePreferencesState]),
         error: null,
       };
     case SAVE_PROFILE.SUCCESS:
       return {
         ...state,
-        saveState: 'complete',
+        saveProfileState: 'complete',
+        saveState: mergeSaveStates(['complete', state.savePreferencesState]),
         error: null,
       };
     case SAVE_PROFILE.FAILURE:
       return {
         ...state,
-        saveState: 'error',
+        saveProfileState: 'error',
+        saveState: mergeSaveStates(['error', state.savePreferencesState]),
         error: action.payload.error,
       };
     case SAVE_PROFILE.RESET:
       return {
         ...state,
-        saveState: null,
+        saveProfileState: null,
+        saveState: mergeSaveStates([null, state.savePreferencesState]),
         error: null,
       };
 

src/data/reducers/RootReducer.js

@@ -1,7 +1,6 @@
 import { combineReducers } from 'redux';
 import { userAccount } from '@edx/frontend-auth';
 import profilePage from './ProfilePageReducer';
-import preferences from './PreferencesReducer';
 
 const identityReducer = (state) => {
   const newState = { ...state };
@@ -14,7 +13,6 @@ const rootReducer = combineReducers({
   authentication: identityReducer,
   userAccount,
   profilePage,
-  preferences,
 });
 
 export default rootReducer;