From ed2137f34262041dcd0eee7d680fe4d43e0c150c Mon Sep 17 00:00:00 2001
From: ayeshoali <ayeshoali@gmail.com>
Date: Thu, 6 Jul 2023 13:50:03 +0500
Subject: [PATCH] refactor: loader added and resolves minor nits

---
 src/Notifications/NotificationSections.jsx | 28 +++++++++++++---------
 src/Notifications/data/slice.js            | 12 +++-------
 src/Notifications/data/thunks.js           |  9 ++++---
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/Notifications/NotificationSections.jsx b/src/Notifications/NotificationSections.jsx
index 2352db5848..4944a1f632 100644
--- a/src/Notifications/NotificationSections.jsx
+++ b/src/Notifications/NotificationSections.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { Button } from '@edx/paragon';
+import { Button, Spinner } from '@edx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import isEmpty from 'lodash/isEmpty';
@@ -18,7 +18,7 @@ const NotificationSections = () => {
   const selectedAppName = useSelector(selectSelectedAppName());
   const notificationRequestStatus = useSelector(selectNotificationStatus());
   const notifications = useSelector(selectNotificationsByIds(selectedAppName));
-  const { nextPage } = useSelector(selectPaginationData());
+  const { hasMorePages } = useSelector(selectPaginationData());
   const { today = [], earlier = [] } = useMemo(
     () => splitNotificationsByTime(notifications),
     [notifications],
@@ -73,15 +73,21 @@ const NotificationSections = () => {
     <div className="mt-4 px-4" data-testid="notification-tray-section">
       {renderNotificationSection('today', today)}
       {renderNotificationSection('earlier', earlier)}
-      {nextPage && notificationRequestStatus === RequestStatus.SUCCESSFUL && (
-        <Button
-          variant="primary"
-          className="w-100 bg-primary-500"
-          onClick={updatePagination}
-          data-testid="load-more-notifications"
-        >
-          {intl.formatMessage(messages.loadMoreNotifications)}
-        </Button>
+      {hasMorePages && notificationRequestStatus === RequestStatus.IN_PROGRESS ? (
+        <div className="d-flex justify-content-center p-4">
+          <Spinner animation="border" variant="primary" size="lg" />
+        </div>
+      ) : (
+        hasMorePages && notificationRequestStatus === RequestStatus.SUCCESSFUL && (
+          <Button
+            variant="primary"
+            className="w-100 bg-primary-500"
+            onClick={updatePagination}
+            data-testid="load-more-notifications"
+          >
+            {intl.formatMessage(messages.loadMoreNotifications)}
+          </Button>
+          )
       )}
     </div>
   );
diff --git a/src/Notifications/data/slice.js b/src/Notifications/data/slice.js
index c2255bd747..6ee4178231 100644
--- a/src/Notifications/data/slice.js
+++ b/src/Notifications/data/slice.js
@@ -17,11 +17,7 @@ const initialState = {
   notifications: {},
   tabsCount: {},
   showNotificationsTray: false,
-  pagination: {
-    totalPages: 1,
-    currentPage: 1,
-    nextPage: null,
-  },
+  pagination: {},
 };
 const slice = createSlice({
   name: 'notifications',
@@ -38,7 +34,7 @@ const slice = createSlice({
     },
     fetchNotificationSuccess: (state, { payload }) => {
       const {
-        newNotificationIds, notificationsKeyValuePair, totalPages, currentPage, nextPage,
+        newNotificationIds, notificationsKeyValuePair, pagination,
       } = payload;
       const existingNotificationIds = state.apps[state.appName];
       state.apps[state.appName] = Array.from(new Set([...existingNotificationIds, ...newNotificationIds]));
@@ -46,9 +42,7 @@ const slice = createSlice({
       state.tabsCount.count -= state.tabsCount[state.appName];
       state.tabsCount[state.appName] = 0;
       state.notificationStatus = RequestStatus.SUCCESSFUL;
-      state.pagination.totalPages = totalPages;
-      state.pagination.currentPage = currentPage;
-      state.pagination.nextPage = nextPage;
+      state.pagination = pagination;
     },
     fetchNotificationsCountDenied: (state) => {
       state.notificationStatus = RequestStatus.DENIED;
diff --git a/src/Notifications/data/thunks.js b/src/Notifications/data/thunks.js
index b016a859b3..7688ae2225 100644
--- a/src/Notifications/data/thunks.js
+++ b/src/Notifications/data/thunks.js
@@ -49,9 +49,12 @@ export const fetchNotificationList = ({ appName, page }) => (
       dispatch(fetchNotificationRequest({ appName }));
       const data = await getNotificationsList(appName, page);
       const normalisedData = normalizeNotifications((camelCaseObject(data.results)));
-      dispatch(fetchNotificationSuccess({
-        ...normalisedData, totalPages: data.num_pages, currentPage: data.current_page, nextPage: data.next,
-      }));
+      const pagination = {
+        numPages: data.num_pages,
+        currentPage: data.current_page,
+        hasMorePages: !!data.next,
+      };
+      dispatch(fetchNotificationSuccess({ ...normalisedData, pagination }));
     } catch (error) {
       if (getHttpErrorStatus(error) === 403) {
         dispatch(fetchNotificationDenied(appName));