Merge pull request #355 from openedx/sundas/INF-903

feat: binded show notification tray status with the backend api

src/Notifications/data/__factories__/notifications.factory.js

@@ -8,7 +8,7 @@ Factory.define('notificationsCount')
     grades: 10,
     authoring: 5,
   })
-  .attr('showNotificationTray', true);
+  .attr('showNotificationsTray', true);
 
 Factory.define('notification')
   .sequence('id')

src/Notifications/data/redux.test.js

@@ -62,7 +62,7 @@ describe('Notification Redux', () => {
     expect(notifications.apps).toEqual({});
     expect(notifications.notifications).toEqual({});
     expect(notifications.tabsCount).toEqual({});
-    expect(notifications.showNotificationTray).toEqual(false);
+    expect(notifications.showNotificationsTray).toEqual(false);
     expect(notifications.pagination.count).toEqual(10);
     expect(notifications.pagination.numPages).toEqual(1);
     expect(notifications.pagination.currentPage).toEqual(1);

src/Notifications/data/selectors.js

@@ -8,7 +8,7 @@ export const selectNotificationTabs = () => state => state.notifications.appsId;
 
 export const selectSelectedAppNotificationIds = (appName) => state => state.notifications.apps[appName] ?? [];
 
-export const selectShowNotificationTray = () => state => state.notifications.showNotificationTray;
+export const selectShowNotificationTray = () => state => state.notifications.showNotificationsTray;
 
 export const selectNotifications = () => state => state.notifications.notifications;
 

src/Notifications/data/slice.js

@@ -16,7 +16,7 @@ const initialState = {
   apps: {},
   notifications: {},
   tabsCount: {},
-  showNotificationTray: false,
+  showNotificationsTray: false,
   pagination: {
     count: 10,
     numPages: 1,
@@ -62,12 +62,12 @@ const slice = createSlice({
     },
     fetchNotificationsCountSuccess: (state, { payload }) => {
       const {
-        countByAppName, appIds, apps, count, showNotificationTray,
+        countByAppName, appIds, apps, count, showNotificationsTray,
       } = payload;
       state.tabsCount = { count, ...countByAppName };
       state.appsId = appIds;
       state.apps = apps;
-      state.showNotificationTray = showNotificationTray;
+      state.showNotificationsTray = showNotificationsTray;
       state.notificationStatus = RequestStatus.LOADED;
     },
     markNotificationsAsSeenRequest: (state) => {

src/Notifications/data/thunks.js

@@ -27,11 +27,11 @@ import {
 } from './api';
 import { getHttpErrorStatus } from '../utils';
 
-const normalizeNotificationCounts = ({ countByAppName, count, showNotificationTray }) => {
+const normalizeNotificationCounts = ({ countByAppName, count, showNotificationsTray }) => {
   const appIds = Object.keys(countByAppName);
   const apps = appIds.reduce((acc, appId) => { acc[appId] = []; return acc; }, {});
   return {
-    countByAppName, appIds, apps, count, showNotificationTray,
+    countByAppName, appIds, apps, count, showNotificationsTray,
   };
 };
 
@@ -66,12 +66,7 @@ export const fetchAppsNotificationCount = () => (
       dispatch(fetchNotificationsCountRequest());
       const data = await getNotificationCounts();
       const normalisedData = normalizeNotificationCounts((camelCaseObject(data)));
-      dispatch(fetchNotificationsCountSuccess({
-        ...normalisedData,
-        countByAppName: data.countByAppName,
-        count: data.count,
-        showNotificationTray: data.showNotificationTray,
-      }));
+      dispatch(fetchNotificationsCountSuccess({ ...normalisedData }));
     } catch (error) {
       if (getHttpErrorStatus(error) === 403) {
         dispatch(fetchNotificationsCountDenied());

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -15,7 +15,7 @@ import { RequestStatus } from '../Notifications/data/slice';
 import messages from './messages';
 
 const AuthenticatedUserDropdown = ({ intl, username }) => {
-  const showNotificationTray = useSelector(selectShowNotificationTray());
+  const showNotificationsTray = useSelector(selectShowNotificationTray());
   const notificationStatus = useSelector(selectNotificationStatus());
   const dispatch = useDispatch();
 
@@ -35,7 +35,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
   return (
     <>
       <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      {showNotificationTray && <Notifications />}
+      {showNotificationsTray && <Notifications />}
       <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />