refactor: loader added and resolves minor nits

openedx · Jul 6, 2023 · 81f339a · 81f339a
1 parent 39adc34
commit 81f339a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git 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
@@ -17,11 +17,7 @@ const initialState = {
   notifications: {},
   tabsCount: {},
   showNotificationsTray: false,
-  pagination: {
-    totalPages: 1,
-    currentPage: 1,
-    nextPage: null,
-  },
+  pagination: {},
 };
 const slice = createSlice({
   name: 'notifications',
@@ -38,17 +34,15 @@ 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]));
       state.notifications = { ...state.notifications, ...notificationsKeyValuePair };
       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
@@ -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));