refactor: added notification icon in learning header

example/index.js

@@ -4,15 +4,14 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
 import { AppContext, AppProvider } from '@edx/frontend-platform/react';
-import Header from '@edx/frontend-component-header';
-import store from '../src/store';
-
+// import Header from '@edx/frontend-component-header';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import './index.scss';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
-    <AppProvider store={store}>
+    <AppProvider>
       {/* We can fake out authentication by including another provider here with the data we want */}
       <AppContext.Provider value={{
         authenticatedUser: null,

src/DesktopHeader.jsx

@@ -13,7 +13,6 @@ import messages from './Header.messages';
 
 // Assets
 import { CaretIcon } from './Icons';
-import Notifications from './Notifications/Notifications';
 
 class DesktopHeader extends React.Component {
   constructor(props) { // eslint-disable-line no-useless-constructor
@@ -150,7 +149,6 @@ class DesktopHeader extends React.Component {
               aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
               className="nav secondary-menu-container align-items-center ml-auto"
             >
-              {loggedIn && <Notifications />}
               {loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}
             </nav>
           </div>

src/Notifications/NotificationRowItem.jsx

@@ -30,7 +30,6 @@ const NotificationRowItem = ({ notification }) => {
       commentLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
       edited: { icon: EditOutline, class: 'text-primary-500' },
     };
-
     return iconMap[type] || null;
   };
 
@@ -38,7 +37,7 @@ const NotificationRowItem = ({ notification }) => {
     const contentMessage = {
       post: messages.notificationPostedContent,
       help: messages.notificationHelpedContent,
-      respond: authenticatedUser.username !== notification.author
+      respond: (authenticatedUser && authenticatedUser.username) !== notification.author
         ? messages.notificationResponseOnOtherPostLabel : null,
       comment: notification.targetUser
         ? messages.notificationCommentedOnLabel : messages.notificationCommentedOnYourPostLabel,
@@ -72,7 +71,7 @@ const NotificationRowItem = ({ notification }) => {
             <>
               {notification?.targetUser}
               <span className="text-gray-500">
-                {authenticatedUser.username !== notification.author
+                {(authenticatedUser && authenticatedUser.username) !== notification.author
                   ? intl.formatMessage(messages.notificationResponseOnOtherPostLabel)
                   : intl.formatMessage(messages.notificationResponseOnYourPostLabel)}
               </span>

src/Notifications/data/api.js

@@ -132,6 +132,72 @@ export async function getNotifications(notificationType, notificationCount) {
       time: '1684253736371',
       author: 'testuser',
     },
+    {
+      type: 'answer',
+      respondingUser: 'SCM_Lead',
+      notificationContent: 'Quiz in section 3 - Please explain the F-Significance value',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1685096268835',
+      author: 'testuser',
+    },
+    {
+      type: 'endorsed',
+      respondingUser: '',
+      notificationContent: 'Quiz in section 3 - Please explain the F-Significance value',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1685096268835',
+      author: 'testuser',
+    },
+    {
+      type: 'reported',
+      respondingUser: 'MITx Learner’s',
+      notificationContent: '“Here are the exam answers. Question 1 - CSA stands for Compliance Safety Ac...”',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1685096268835',
+      author: '',
+    },
+    {
+      type: 'postLiked',
+      respondingUser: 'SCM_Lead',
+      notificationContent: 'Retaking the course',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1685096268835',
+      author: '',
+    },
+    {
+      type: 'commentLiked',
+      respondingUser: 'MITx_Expert ',
+      notificationContent: 'Final exam answers',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1685096268835',
+      author: '',
+    },
+    {
+      type: 'edited',
+      respondingUser: 'MITx_Expert ',
+      notificationContent: 'Question 1',
+      targetUser: '',
+      courseName: 'Supply Chain Analytics',
+      URL: '',
+      status: 'unread',
+      time: '1685096268835',
+      author: '',
+    },
   ];
 
   const { today, earlier } = parseNotificationList(notificationData);

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -7,6 +7,7 @@ import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@edx/paragon';
+import Notifications from '../Notifications/Notifications';
 
 import messages from './messages';
 
@@ -19,7 +20,8 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
   return (
     <>
-      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <Notifications />
       <Dropdown className="user-dropdown">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />

src/learning-header/LearningHeader.jsx

@@ -1,12 +1,13 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';
+import store from '../store';
 
 const LinkedLogo = ({
   href,
@@ -38,26 +39,31 @@ const LearningHeader = ({
       alt={getConfig().SITE_NAME}
     />
   );
+  const value = useMemo(() => ({ authenticatedUser }), [authenticatedUser]);
 
   return (
-    <header className="learning-header">
-      <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
-      <div className="container-xl py-2 d-flex align-items-center">
-        {headerLogo}
-        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
-          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
-        </div>
-        {showUserDropdown && authenticatedUser && (
-          <AuthenticatedUserDropdown
-            username={authenticatedUser.username}
-          />
-        )}
-        {showUserDropdown && !authenticatedUser && (
-          <AnonymousUserMenu />
-        )}
-      </div>
-    </header>
+    <AppProvider store={store}>
+      <AppContext.Provider value={value}>
+        <header className="learning-header">
+          <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+          <div className="container-xl py-2 d-flex align-items-center">
+            {headerLogo}
+            <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
+              <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+              <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+            </div>
+            {showUserDropdown && authenticatedUser && (
+            <AuthenticatedUserDropdown
+              username={authenticatedUser.username}
+            />
+            )}
+            {showUserDropdown && !authenticatedUser && (
+            <AnonymousUserMenu />
+            )}
+          </div>
+        </header>
+      </AppContext.Provider>
+    </AppProvider>
   );
 };