Merge pull request #913 from openedx/sundass/INF-1086

fix: removed extra loader while updating preferences
openedx · Oct 19, 2023 · ca3bc91 · ca3bc91
2 parents 9cccf09 + ced2927
commit ca3bc91
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/src/notification-preferences/NotificationPreferenceRow.jsx b/src/notification-preferences/NotificationPreferenceRow.jsx
@@ -11,7 +11,7 @@ import {
   selectPreference,
   selectPreferenceNonEditableChannels,
   selectSelectedCourseId,
-  selectNotificationPreferencesStatus,
+  selectUpdatePreferencesStatus,
 } from './data/selectors';
 import NOTIFICATION_CHANNELS from './data/constants';
 import { updatePreferenceToggle } from './data/thunks';
@@ -23,7 +23,7 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
   const courseId = useSelector(selectSelectedCourseId());
   const preference = useSelector(selectPreference(appId, preferenceName));
   const nonEditable = useSelector(selectPreferenceNonEditableChannels(appId, preferenceName));
-  const preferencesStatus = useSelector(selectNotificationPreferencesStatus());
+  const updatePreferencesStatus = useSelector(selectUpdatePreferencesStatus());
 
   const onToggle = useCallback((event) => {
     const {
@@ -77,7 +77,7 @@ const NotificationPreferenceRow = ({ appId, preferenceName }) => {
               name={channel}
               value={preference[channel]}
               onChange={onToggle}
-              disabled={nonEditable.includes(channel) || preferencesStatus === LOADING_STATUS}
+              disabled={nonEditable.includes(channel) || updatePreferencesStatus === LOADING_STATUS}
             />
           </div>
         ))}

diff --git a/src/notification-preferences/data/reducers.js b/src/notification-preferences/data/reducers.js
@@ -15,6 +15,7 @@ export const defaultState = {
   },
   preferences: {
     status: IDLE_STATUS,
+    updatePreferenceStatus: IDLE_STATUS,
     selectedCourse: null,
     preferences: [],
     apps: [],
@@ -70,6 +71,7 @@ const notificationPreferencesReducer = (state = defaultState, action = {}) => {
         preferences: {
           ...state.preferences,
           status: SUCCESS_STATUS,
+          updatePreferenceStatus: SUCCESS_STATUS,
           ...action.payload,
         },
       };
@@ -79,6 +81,7 @@ const notificationPreferencesReducer = (state = defaultState, action = {}) => {
         preferences: {
           ...state.preferences,
           status: FAILURE_STATUS,
+          updatePreferenceStatus: FAILURE_STATUS,
           preferences: [],
           apps: [],
           nonEditable: {},
@@ -102,7 +105,7 @@ const notificationPreferencesReducer = (state = defaultState, action = {}) => {
               ? { ...preference, [notificationChannel]: value }
               : preference
           )),
-          status: LOADING_STATUS,
+          updatePreferenceStatus: LOADING_STATUS,
         },
       };
     case Actions.UPDATE_APP_PREFERENCE:

diff --git a/src/notification-preferences/data/reducers.test.js b/src/notification-preferences/data/reducers.test.js
@@ -5,6 +5,7 @@ import {
   FAILURE_STATUS,
   LOADING_STATUS,
   SUCCESS_STATUS,
+  IDLE_STATUS,
 } from '../../constants';
 
 describe('notification-preferences reducer', () => {
@@ -80,15 +81,16 @@ describe('notification-preferences reducer', () => {
     );
     expect(result.preferences).toEqual({
       status: SUCCESS_STATUS,
+      updatePreferenceStatus: SUCCESS_STATUS,
       selectedCourse: null,
       ...preferenceData,
     });
   });
 
   test.each([
-    { action: Actions.FETCHING_PREFERENCES, status: LOADING_STATUS },
-    { action: Actions.FAILED_PREFERENCES, status: FAILURE_STATUS },
-  ])('preferences are empty when api call is %s', ({ action, status }) => {
+    { action: Actions.FETCHING_PREFERENCES, status: LOADING_STATUS, updatePreferenceStatus: IDLE_STATUS },
+    { action: Actions.FAILED_PREFERENCES, status: FAILURE_STATUS, updatePreferenceStatus: FAILURE_STATUS },
+  ])('preferences are empty when api call is %s', ({ action, status, updatePreferenceStatus }) => {
     const result = reducer(
       state,
       { type: action },
@@ -99,6 +101,7 @@ describe('notification-preferences reducer', () => {
       preferences: [],
       apps: [],
       nonEditable: {},
+      updatePreferenceStatus,
     });
   });
 

diff --git a/src/notification-preferences/data/selectors.js b/src/notification-preferences/data/selectors.js
@@ -2,6 +2,10 @@ export const selectNotificationPreferencesStatus = () => state => (
   state.notificationPreferences.preferences.status
 );
 
+export const selectUpdatePreferencesStatus = () => state => (
+  state.notificationPreferences.preferences.updatePreferenceStatus
+);
+
 export const selectPreferences = () => state => (
   state.notificationPreferences.preferences?.preferences
 );