From 86939a2559dab846d52d432899484f83761ec275 Mon Sep 17 00:00:00 2001
From: SundasNoreen <sundas.noreen@arbisoft.com>
Date: Fri, 26 May 2023 15:23:02 +0500
Subject: [PATCH] refactor: added notification icon in learning header

---
 example/index.js                              |  7 +-
 src/DesktopHeader.jsx                         |  2 -
 src/Notifications/NotificationRowItem.jsx     |  5 +-
 src/Notifications/data/api.js                 | 66 +++++++++++++++++++
 .../AuthenticatedUserDropdown.jsx             |  4 +-
 src/learning-header/LearningHeader.jsx        | 46 +++++++------
 6 files changed, 100 insertions(+), 30 deletions(-)

diff --git a/example/index.js b/example/index.js
index 5a93ed0..deba37a 100644
--- a/example/index.js
+++ b/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,
diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
index a645afe..8bd142f 100644
--- a/src/DesktopHeader.jsx
+++ b/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>
diff --git a/src/Notifications/NotificationRowItem.jsx b/src/Notifications/NotificationRowItem.jsx
index 6541bd8..263ab8e 100644
--- a/src/Notifications/NotificationRowItem.jsx
+++ b/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>
diff --git a/src/Notifications/data/api.js b/src/Notifications/data/api.js
index 64b812c..6f078c1 100644
--- a/src/Notifications/data/api.js
+++ b/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);
diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx
index ea6f213..e48155f 100644
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/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" />
diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
index bf266fb..7224d4d 100644
--- a/src/learning-header/LearningHeader.jsx
+++ b/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>
   );
 };