Merge pull request #340 from openedx/sundas/INF-820

feat: added notification UI

Author: sundasnoreen12

example/index.js

@@ -4,7 +4,8 @@ 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 Header from '@edx/frontend-component-header';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import './index.scss';
 

package-lock.json

@@ -50,7 +50,6 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-redux": "7.2.9",
-    "react-router-dom": "5.3.4",
     "react-test-renderer": "16.14.0",
     "redux": "4.2.1",
     "redux-saga": "1.2.3"
@@ -62,9 +61,15 @@
     "@fortawesome/free-regular-svg-icons": "6.3.0",
     "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@reduxjs/toolkit": "1.9.5",
     "babel-polyfill": "6.26.0",
+    "classnames": "2.3.2",
+    "lodash": "4.17.21",
+    "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-transition-group": "4.4.5"
+    "react-transition-group": "4.4.5",
+    "timeago.js": "4.0.2",
+    "react-router-dom": "5.3.4"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^4.0.0",

package.json

@@ -2,24 +2,38 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
-import { AppContext } from '@edx/frontend-platform/react';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import { Context as ResponsiveContext } from 'react-responsive';
+import { initializeMockApp } from '@edx/frontend-platform';
+import store from './store';
 
 import Header from './index';
 
 const HeaderComponent = ({ width, contextValue }) => (
   <ResponsiveContext.Provider value={width}>
     <IntlProvider locale="en" messages={{}}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Header />
-      </AppContext.Provider>
+      <AppProvider store={store}>
+        <AppContext.Provider
+          value={contextValue}
+        >
+          <Header />
+        </AppContext.Provider>
+      </AppProvider>
     </IntlProvider>
   </ResponsiveContext.Provider>
 );
 
 describe('<Header />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: '123abc',
+        username: 'testuser',
+        administrator: false,
+        roles: [],
+      },
+    });
+  });
   it('renders correctly for anonymous desktop', () => {
     const contextValue = {
       authenticatedUser: null,

src/Header.test.jsx

@@ -0,0 +1,71 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Icon } from '@edx/paragon';
+import { Link } from 'react-router-dom';
+import * as timeago from 'timeago.js';
+import { getIconByType } from './utils';
+import { markNotificationsAsRead } from './data/thunks';
+import messages from './messages';
+import timeLocale from '../common/time-locale';
+
+const NotificationRowItem = ({
+  id, type, contentUrl, content, courseName, createdAt, lastRead,
+}) => {
+  timeago.register('time-locale', timeLocale);
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const handleMarkAsRead = useCallback(() => {
+    dispatch(markNotificationsAsRead(id));
+  }, [dispatch, id]);
+
+  const { icon: iconComponent, class: iconClass } = getIconByType(type);
+
+  return (
+    <Link
+      target="_blank"
+      className="d-flex mb-2 align-items-center text-decoration-none"
+      to={contentUrl}
+      onClick={handleMarkAsRead}
+    >
+      <Icon src={iconComponent} className={`${iconClass} mr-4 notification-icon`} />
+      <div className="d-flex w-100">
+        <div className="d-flex align-items-center w-100">
+          <div className="py-10px w-100 px-0 cursor-pointer">
+            <span
+              className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden content"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: content }}
+            />
+            <div className="py-0 d-flex">
+              <span className="font-size-12 text-gray-500 line-height-20">
+                <span>{courseName}</span>
+                <span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>
+                <span>{timeago.format(createdAt, 'time-locale')}</span>
+              </span>
+            </div>
+          </div>
+          {!lastRead && (
+            <div className="d-flex py-1.5 px-1.5 ml-2 cursor-pointer">
+              <span className="bg-brand-500 rounded unread" />
+            </div>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+NotificationRowItem.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  contentUrl: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired,
+  courseName: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  lastRead: PropTypes.string.isRequired,
+};
+
+export default React.memo(NotificationRowItem);