feat: added add more notification button functionality

package-lock.json

@@ -17,6 +17,8 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@reduxjs/toolkit": "^1.9.5",
         "babel-polyfill": "6.26.0",
+        "lodash": "^4.17.21",
+        "react-redux": "7.2.9",
         "react-responsive": "8.2.0",
         "react-transition-group": "4.4.5",
         "timeago.js": "^4.0.2"
@@ -18854,8 +18856,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",

package.json

@@ -64,10 +64,11 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@reduxjs/toolkit": "^1.9.5",
     "babel-polyfill": "6.26.0",
+    "lodash": "^4.17.21",
+    "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5",
-    "timeago.js": "^4.0.2",
-    "react-redux": "7.2.9"
+    "timeago.js": "^4.0.2"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^4.0.0",

src/Notifications/NotificationSections.jsx

@@ -1,41 +1,61 @@
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
+import { Button } from '@edx/paragon';
+import PropTypes from 'prop-types';
 import { messages } from './messages';
 import NotificationRowItem from './NotificationRowItem';
 import { getNotifications } from './data/selectors';
 
-const NotificationSections = () => {
+const NotificationSections = ({ handleLoadMoreNotification, loadMoreCount }) => {
   const intl = useIntl();
   const notifications = useSelector(getNotifications());
+  const { TODAY, EARLIER, totalCount } = notifications || {};
 
   return (
     notifications && (
     <div className="pt-4">
       <div className="d-flex pb-2 notification-section">
         <span className="w-100 px-0 text-gray-500">
-          {notifications && notifications.TODAY && intl.formatMessage(messages.notificationTodayHeading)}
+          {TODAY && TODAY.length > 0 && intl.formatMessage(messages.notificationTodayHeading)}
         </span>
+        {totalCount > 0 && (
         <span className="w-100 px-0 text-right text-info-500">
           {intl.formatMessage(messages.notificationMarkAsRead)}
         </span>
+        )}
       </div>
       <div>
-        {notifications && notifications.TODAY && notifications?.TODAY.map(
+        {TODAY && TODAY.map(
           (notification) => <NotificationRowItem notification={notification} />,
         )}
         <div className="d-flex pb-2 notification-section">
           <span className="w-100 px-0 text-gray-500">
-            {notifications && notifications.EARLIER && intl.formatMessage(messages.notificationEarlierHeading)}
+            {EARLIER && EARLIER.length > 0
+            && intl.formatMessage(messages.notificationEarlierHeading)}
           </span>
         </div>
-        {notifications && notifications.EARLIER && notifications?.EARLIER.map(
+        {EARLIER && EARLIER.map(
           (notification) => <NotificationRowItem notification={notification} />,
         )}
+        {loadMoreCount < totalCount && (
+        <Button
+          variant="primary"
+          className="mb-2 mb-sm-0 w-100 bg-primary-500"
+          onClick={() => handleLoadMoreNotification(loadMoreCount + 10)}
+        >
+          {intl.formatMessage(messages.loadMoreNotifications)}
+        </Button>
+        )}
       </div>
     </div>
     )
   );
 };
 
+NotificationSections.propTypes = {
+  handleLoadMoreNotification: PropTypes.func.isRequired,
+  loadMoreCount: PropTypes.number.isRequired,
+};
+
 export default React.memo(NotificationSections);

src/Notifications/NotificationTabs.jsx

@@ -11,20 +11,22 @@ import { notificationTabsOptions } from '../constants';
 const NotificationTabs = () => {
   const notificationUnseenCounts = useSelector(getNotificationTotalUnseenCounts());
   const [activeTab, setActiveTab] = useState(notificationTabsOptions[0].key);
+  const [loadMoreCount, setLoadMoreCount] = useState(10);
+
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(fetchNotificationList({ notificationType: activeTab || 'reminders' }));
-  }, [dispatch, activeTab]);
-
-  useEffect(() => {
-    setActiveTab(activeTab || 'reminders');
-  }, [activeTab]);
+    dispatch(fetchNotificationList({ notificationType: activeTab || 'reminders', notificationCount: loadMoreCount }));
+  }, [dispatch, activeTab, loadMoreCount]);
 
   const handleActiveTab = useCallback((tab) => {
     setActiveTab(tab);
   }, []);
 
+  const handleLoadMoreNotification = useCallback((count) => {
+    setLoadMoreCount(count);
+  }, []);
+
   const tabArray = useMemo(() => notificationTabsOptions.map((option) => (
     <Tab
       eventKey={option.key}
@@ -32,9 +34,9 @@ const NotificationTabs = () => {
       notification={notificationUnseenCounts[option.title]}
       tabClassName="notification-tab"
     >
-      <NotificationSections />
+      <NotificationSections handleLoadMoreNotification={handleLoadMoreNotification} loadMoreCount={loadMoreCount} />
     </Tab>
-  )), [notificationUnseenCounts]);
+  )), [notificationUnseenCounts, handleLoadMoreNotification, loadMoreCount]);
 
   return (
     activeTab && (

src/Notifications/data/api.js

@@ -1,15 +1,8 @@
-/* eslint-disable import/prefer-default-export */
-// import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform';
 
 export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
 
-export async function getNotifications(notificationType) {
-  // const url = `${getApiBaseUrl()}/api/discussion/v1/notifications/`;
-
-  // const { data } = await getAuthenticatedHttpClient()
-  //   .get(url);
-
+export async function getNotifications(notificationType, notificationCount) {
   const data = {
     discussions: {
       TODAY: [
@@ -185,7 +178,23 @@ export async function getNotifications(notificationType) {
       ],
     },
   };
-  return data[notificationType];
+  const notifications = data[notificationType];
+  const { TODAY = [], EARLIER = [] } = notifications || [];
+  let todayNotifications = TODAY;
+  let earlierNotifications = [];
+  let totalCount = 0;
+
+  if (TODAY && EARLIER) {
+    if (TODAY.length > notificationCount) {
+      todayNotifications = TODAY.slice(0, notificationCount);
+    } else {
+      todayNotifications = TODAY;
+      earlierNotifications = EARLIER.slice(0, notificationCount - TODAY.length);
+    }
+    totalCount = TODAY.length + EARLIER.length;
+  }
+
+  return { TODAY: todayNotifications, EARLIER: earlierNotifications, totalCount };
 }
 
 export async function getNotificationCounts() {

src/Notifications/data/thunks.js

@@ -11,11 +11,11 @@ import {
   getNotificationCounts,
 } from './api';
 
-export const fetchNotificationList = ({ notificationType }) => (
+export const fetchNotificationList = ({ notificationType, notificationCount }) => (
   async (dispatch) => {
     try {
       dispatch(fetchNotificationRequest({ notificationType }));
-      const data = await getNotifications(notificationType);
+      const data = await getNotifications(notificationType, notificationCount);
       dispatch(fetchNotificationSuccess(data));
     } catch (errors) {
       dispatch(fetchNotificationFailure({ notificationType }));

src/Notifications/messages.js

@@ -9,7 +9,7 @@ export const messages = defineMessages({
   },
   notificationTodayHeading: {
     id: 'notification.today.heading',
-    defaultMessage: 'Today',
+    defaultMessage: 'Last 24 hours',
     description: 'Today Notifications',
   },
   notificationEarlierHeading: {
@@ -97,4 +97,9 @@ export const messages = defineMessages({
     defaultMessage: '•',
     description: 'Fullstop shown to users to indicate who edited a post.',
   },
+  loadMoreNotifications: {
+    id: 'notification.load.more.notifications',
+    defaultMessage: 'Load more notifications',
+    description: 'Load more button to load more notifications',
+  },
 });

src/index.scss

@@ -141,7 +141,8 @@ $white: #fff;
       background: #EAE6E5;
     }
     .bell-icon{
-      margin-left: -3px !important;
+      margin-left: -4px !important;
+      margin-top: -1px;
       &:focus{
         box-shadow: none !important
       }
@@ -155,7 +156,7 @@ $white: #fff;
     width: 23px;
     height: 16px;
     margin-top: 3px;
-    margin-left: 20px;
+    margin-left: 18px;
     .count{
       font-size: 9px;
       line-height: 20px;
@@ -166,7 +167,6 @@ $white: #fff;
     }
   }
 }
-
 .notification-tray-container{
   width: 549px;
   height: 100vh;