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));