fix: fixed naming and restructure issue

src/new-notifications/NotificationEmptySection.jsx

@@ -4,12 +4,12 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, IconButton } from '@openedx/paragon';
 import { NotificationsNone } from '@openedx/paragon/icons';
 
-import NotificationContext from './context';
+import NotificationPopoverContext from './context/notificationPopoverContext';
 import messages from './messages';
 
 const EmptyNotifications = () => {
  const intl = useIntl();
- const { popoverHeaderRef, notificationRef } = useContext(NotificationContext);
+ const { popoverHeaderRef, notificationRef } = useContext(NotificationPopoverContext);
 
  return (
  <div

src/new-notifications/NotificationRowItem.jsx

@@ -10,15 +10,15 @@ import messages from './messages';
 import timeLocale from '../common/time-locale';
 import { getIconByType } from './utils';
 import { useNotification } from './data/hook';
-import { HeaderContext } from '../common/context';
+import { notificationsContext } from './context/notificationsContext';
 
 const NotificationRowItem = ({
  id, type, contentUrl, content, courseName, createdAt, lastRead,
 }) => {
  timeago.register('time-locale', timeLocale);
  const intl = useIntl();
  const { markNotificationsAsRead } = useNotification();
- const { updateNotificationData } = useContext(HeaderContext);
+ const { updateNotificationData } = useContext(notificationsContext);
 
  const handleMarkAsRead = useCallback(async () => {
  if (!lastRead) {

src/new-notifications/NotificationSections.jsx

@@ -8,24 +8,24 @@ import { Button, Icon, Spinner } from '@openedx/paragon';
 import { AutoAwesome, CheckCircleLightOutline } from '@openedx/paragon/icons';
 
 import { RequestStatus } from './data/constants';
-import NotificationContext from './context';
+import NotificationPopoverContext from './context/notificationPopoverContext';
 import messages from './messages';
 import NotificationEmptySection from './NotificationEmptySection';
 import NotificationRowItem from './NotificationRowItem';
 import { splitNotificationsByTime } from './utils';
-import { HeaderContext } from '../common/context';
+import { notificationsContext } from './context/notificationsContext';
 import { useNotification } from './data/hook';
 
 const NotificationSections = () => {
  const intl = useIntl();
  const {
  appName, notificationListStatus, pagination,
  notificationExpiryDays, appsId, updateNotificationData,
- } = useContext(HeaderContext);
+ } = useContext(notificationsContext);
  const { getNotifications, markAllNotificationsAsRead, fetchNotificationList } = useNotification();
  const notificationList = getNotifications();
  const { hasMorePages, currentPage } = pagination || {};
- const { popoverHeaderRef, notificationRef } = useContext(NotificationContext);
+ const { popoverHeaderRef, notificationRef } = useContext(NotificationPopoverContext);
  const { today = [], earlier = [] } = useMemo(
  () => splitNotificationsByTime(notificationList),
  [notificationList],

src/new-notifications/NotificationTabs.jsx

@@ -4,14 +4,14 @@ import { Tab, Tabs } from '@openedx/paragon';
 
 import NotificationSections from './NotificationSections';
 import { useFeedbackWrapper } from './utils';
-import { HeaderContext } from '../common/context';
+import { notificationsContext } from './context/notificationsContext';
 import { useNotification } from './data/hook';
 
 const NotificationTabs = () => {
  useFeedbackWrapper();
  const {
  appName, handleActiveTab, tabsCount, appsId, updateNotificationData,
- } = useContext(HeaderContext);
+ } = useContext(notificationsContext);
  const { fetchNotificationList, markNotificationsAsSeen } = useNotification();
 
  useEffect(() => {

src/new-notifications/context/notificationPopoverContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const notificationPopoverContext = React.createContext({ popoverHeaderRef: null, notificationRef: null });
+
+export default notificationPopoverContext;

src/common/context.js → src/new-notifications/context/notificationsContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RequestStatus } from '../new-notifications/data/constants';
+import { RequestStatus } from '../data/constants';
 
 export const initialState = {
  notificationStatus: RequestStatus.IDLE,
@@ -14,4 +14,4 @@ export const initialState = {
  trayOpened: false,
 };
 
-export const HeaderContext = React.createContext(initialState);
+export const notificationsContext = React.createContext(initialState);

src/new-notifications/data/hook.js

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { camelCaseObject } from '@edx/frontend-platform';
 import { breakpoints, useWindowSize } from '@openedx/paragon';
 import { RequestStatus } from './constants';
-import { HeaderContext } from '../../common/context';
+import { notificationsContext } from '../context/notificationsContext';
 import {
  getNotificationsList, getNotificationCounts, markNotificationSeen, markAllNotificationRead, markNotificationRead,
 } from './api';
@@ -20,22 +20,17 @@ export function useIsOnLargeScreen() {
 export function useNotification() {
  const {
  appName, apps, tabsCount, notifications, updateNotificationData,
- } = useContext(HeaderContext);
+ } = useContext(notificationsContext);
 
- const normalizeNotificationCounts = ({
- countByAppName, count, showNotificationsTray, notificationExpiryDays, isNewNotificationViewEnabled,
- }) => {
+ const normalizeNotificationCounts = ({ countByAppName, ...countData }) => {
  const appIds = Object.keys(countByAppName);
  const notificationApps = appIds.reduce((acc, appId) => { acc[appId] = []; return acc; }, {});
 
  return {
- countByAppName,
+ ...countData,
  appIds,
  notificationApps,
- count,
- showNotificationsTray,
- notificationExpiryDays,
- isNewNotificationViewEnabled,
+ countByAppName,
  };
  };
 

src/new-notifications/index.jsx

@@ -17,10 +17,10 @@ import { RequestStatus } from './data/constants';
 
 import { useIsOnLargeScreen, useIsOnMediumScreen } from './data/hook';
 import NotificationTour from './tours/NotificationTour';
-import NotificationContext from './context';
+import NotificationPopoverContext from './context/notificationPopoverContext';
 import messages from './messages';
 import NotificationTabs from './NotificationTabs';
-import { HeaderContext } from '../common/context';
+import { notificationsContext } from './context/notificationsContext';
 
 import './notification.scss';
 
@@ -97,7 +97,7 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
  }
  }, []);
 
- const headerContextValue = useMemo(() => ({
+ const notificationContextValue = useMemo(() => ({
  enableNotificationTray,
  appName,
  handleActiveTab,
@@ -106,7 +106,7 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
  }));
 
  return (
- <HeaderContext.Provider value={headerContextValue}>
+ <notificationsContext.Provider value={notificationContextValue}>
  <OverlayTrigger
  trigger="click"
  key="bottom"
@@ -148,9 +148,9 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
  </Popover.Title>
  </div>
  <Popover.Content className="notification-content p-0">
- <NotificationContext.Provider value={notificationRefs}>
+ <NotificationPopoverContext.Provider value={notificationRefs}>
  <NotificationTabs />
- </NotificationContext.Provider>
+ </NotificationPopoverContext.Provider>
  </Popover.Content>
  {getConfig().NOTIFICATION_FEEDBACK_URL && (
  <Button
@@ -197,7 +197,7 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
  </div>
  </OverlayTrigger>
  <NotificationTour />
- </HeaderContext.Provider>
+ </notificationsContext.Provider>
  );
 };
 

src/new-notifications/tours/NotificationTour.jsx

@@ -3,12 +3,12 @@ import React, { useEffect, useContext } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { ProductTour } from '@openedx/paragon';
 import { useNotificationTour } from './data/hooks';
-import { HeaderContext } from '../../common/context';
+import { notificationsContext } from '../context/notificationsContext';
 
 const NotificationTour = () => {
  const { useTourConfiguration, fetchNotificationTours } = useNotificationTour();
  const config = useTourConfiguration();
- const { updateNotificationData } = useContext(HeaderContext);
+ const { updateNotificationData } = useContext(notificationsContext);
 
  useEffect(() => {
  const fetchTourData = async () => {

src/new-notifications/tours/data/hooks.js

@@ -5,14 +5,14 @@ import messages from '../messages';
 import tourCheckpoints from '../constants';
 import { getNotificationsTours, updateNotificationsTour } from './api';
 import { RequestStatus } from '../../data/constants';
-import { HeaderContext } from '../../../common/context';
+import { notificationsContext } from '../../context/notificationsContext';
 
 export function camelToConstant(string) {
  return string.replace(/[A-Z]/g, (match) => `_${match}`).toUpperCase();
 }
 
 export function useNotificationTour() {
- const { tours, updateNotificationData } = useContext(HeaderContext);
+ const { tours, updateNotificationData } = useContext(notificationsContext);
 
  function normaliseTourData(data) {
  return data.map(tour => ({ ...tour, enabled: true }));