Handle deletion of all notifications in the last page (#5866)

hotosm · Jun 2, 2023 · 16f829b · 16f829b
1 parent 22df4e3
commit 16f829b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/frontend/src/components/notifications/actionButtons.js b/frontend/src/components/notifications/actionButtons.js
@@ -15,7 +15,10 @@ export const ActionButtons = ({
   unreadCountInSelected,
   isAllSelected,
   inboxQuery,
+  setInboxQuery,
   updateUnreadCount,
+  pageOfCards,
+  totalPages,
 }) => {
   const dispatch = useDispatch();
   const token = useSelector((state) => state.auth.token);
@@ -31,7 +34,21 @@ export const ActionButtons = ({
         });
     } else {
       pushToLocalJSONAPI(`/api/v2/notifications/delete-multiple/`, payload, token, 'DELETE')
-        .then(() => handleSuccess())
+        .then(() => {
+          // Decrement the page query if the user deleted all notifications in the last page
+          if (inboxQuery.page === totalPages && selected.length === pageOfCards.length) {
+            setInboxQuery(
+              {
+                ...inboxQuery,
+                page: inboxQuery.page - 1 || undefined,
+              },
+              'pushIn',
+            );
+            handleSuccess(false);
+            return;
+          }
+          handleSuccess();
+        })
         .catch((e) => {
           console.log(e.message);
         });
@@ -54,9 +71,9 @@ export const ActionButtons = ({
     }
   };
 
-  function handleSuccess() {
+  function handleSuccess(shouldRetry = true) {
     setSelected([]);
-    retryFn();
+    shouldRetry && retryFn();
     isAllSelected
       ? updateUnreadCount()
       : // The decrement count is readily available; deducting count from selected

diff --git a/frontend/src/components/notifications/notificationResults.js b/frontend/src/components/notifications/notificationResults.js
@@ -27,6 +27,7 @@ export const NotificationResults = ({
   liveUnreadCount,
   setPopoutFocus,
   inboxQuery,
+  setInboxQuery,
 }) => {
   const stateNotifications = notifications.userMessages;
 
@@ -82,7 +83,9 @@ export const NotificationResults = ({
             retryFn={retryFn}
             setPopoutFocus={setPopoutFocus}
             totalNotifications={notifications.pagination?.total}
+            totalPages={notifications.pagination?.pages}
             inboxQuery={inboxQuery}
+            setInboxQuery={setInboxQuery}
           />
         </ReactPlaceholder>
       </div>
@@ -103,7 +106,9 @@ const NotificationCards = ({
   retryFn,
   setPopoutFocus,
   totalNotifications,
+  totalPages,
   inboxQuery,
+  setInboxQuery,
 }) => {
   const dispatch = useDispatch();
   const token = useSelector((state) => state.auth.token);
@@ -159,7 +164,10 @@ const NotificationCards = ({
               unreadCountInSelected={unreadCountInSelected}
               isAllSelected={isAllSelected}
               inboxQuery={inboxQuery}
+              setInboxQuery={setInboxQuery}
               updateUnreadCount={updateUnreadCount}
+              pageOfCards={pageOfCards}
+              totalPages={totalPages}
             />
           </div>
           {selected.length === 10 && totalNotifications > 10 && !inboxQuery.project && (

diff --git a/frontend/src/components/notifications/tests/actionButtons.test.js b/frontend/src/components/notifications/tests/actionButtons.test.js
@@ -78,7 +78,6 @@ describe('Action Buttons', () => {
   });
 
   it('should decrement unread count in redux store if all notifications are not selected upon deleting notifications', async () => {
-    act(() => {});
     render(
       <ReduxIntlProviders>
         <ActionButtons
@@ -89,6 +88,7 @@ describe('Action Buttons', () => {
           setSelected={setSelectedMock}
           updateUnreadCount={updateUnreadCountMock}
           unreadCountInSelected={1}
+          pageOfCards={6}
         />
       </ReduxIntlProviders>,
     );

diff --git a/frontend/src/views/notifications.js b/frontend/src/views/notifications.js
@@ -96,6 +96,7 @@ export const NotificationsPage = () => {
           notifications={notifications}
           inboxQuery={inboxQuery}
           retryFn={refetch}
+          setInboxQuery={setInboxQuery}
         />
         <div className="flex justify-end mw8">
           <Paginator