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 = () => {
{renderNotificationSection('today', today)}
{renderNotificationSection('earlier', earlier)}
- {nextPage && notificationRequestStatus === RequestStatus.SUCCESSFUL && (
-
+ {hasMorePages && notificationRequestStatus === RequestStatus.IN_PROGRESS ? (
+
+
+
+ ) : (
+ hasMorePages && notificationRequestStatus === RequestStatus.SUCCESSFUL && (
+
+ )
)}
);
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));