MPDX-8237 - Shows tasks count, updates Tasks once deleted.

pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx

@@ -103,6 +103,7 @@
 
   const [contactDetailsOpen, setContactDetailsOpen] = useState(false);
   const [contactDetailsId, setContactDetailsId] = useState<string>();
+  const [idsToRemove, setIdsToRemove] = useState<string[]>([]);
 
   const { contactId, searchTerm } = query;
 
@@ -242,6 +243,7 @@
     activeFilters,
     searchTerm as string,
     starredFilter,
+    idsToRemove,
   );
   //#endregion
 
@@ -344,6 +346,7 @@
                     toggleStarredFilter={setStarredFilter}
                     headerCheckboxState={selectionType}
                     massDeselectAll={deselectAll}
+                    showShowingCount
                     selectedIds={ids}
                     buttonGroup={
                       <Hidden xsDown>
@@ -415,6 +418,7 @@
                             onTaskCheckToggle={toggleSelectionById}
                             isChecked={isRowChecked(task.id)}
                             useTopMargin={index === 0}
+                            removeSelectedIds={(id) => setIdsToRemove([id])}
                           />
                         </Box>
                       )}

src/components/Contacts/ContactDetails/ContactTasksTab/DeleteTaskIconButton/DeleteTaskIconButton.tsx

@@ -13,12 +13,14 @@ interface DeleteTaskIconButtonProps {
   accountListId: string;
   taskId: string;
   onDeleteConfirm?: () => void;
+  removeSelectedIds?: (id: string) => void;
 }
 
 export const DeleteTaskIconButton: React.FC<DeleteTaskIconButtonProps> = ({
   accountListId,
   taskId,
   onDeleteConfirm,
+  removeSelectedIds,
 }) => {
   const { t } = useTranslation();
 
@@ -36,6 +38,7 @@ export const DeleteTaskIconButton: React.FC<DeleteTaskIconButtonProps> = ({
         onClickDecline={setRemoveDialogOpen}
         accountListId={accountListId}
         taskId={taskId}
+        removeSelectedIds={removeSelectedIds}
       />
     </>
   );

src/components/Shared/Header/ListHeader.test.tsx

@@ -10,7 +10,6 @@ import {
   ContactFilterSetInput,
   TaskFilterSetInput,
 } from 'src/graphql/types.generated';
-import { useAccountListId } from 'src/hooks/useAccountListId';
 import i18n from 'src/lib/i18n';
 import theme from '../../../theme';
 import { TasksMassActionsDropdown } from '../MassActions/TasksMassActionsDropdown';
@@ -112,9 +111,9 @@ const router = {
   push,
 };
 
-beforeEach(() => {
-  (useAccountListId as jest.Mock).mockReturnValue(router);
-});
+// beforeEach(() => {
+//   (useAccountListId as jest.Mock).mockReturnValue(router);
+// });
 
 const ButtonGroup: React.FC = () => {
   return (
@@ -226,6 +225,33 @@ describe('ListHeader', () => {
 
       expect(getByPlaceholderText('Search Tasks')).toBeVisible();
     });
+    it('Should update count upon deletion', async () => {
+      const { queryByText, getByText } = render(
+        <Components
+          selectedIds={['a', 'b', 'c']}
+          page={PageEnum.Task}
+          totalItems={50}
+          showShowingCount={true}
+        />,
+      );
+      expect(queryByText('Showing 50')).toBeInTheDocument();
+      expect(queryByText('3 Selected')).toBeInTheDocument();
+      const actionsButton = getByText('Actions');
+      userEvent.click(actionsButton);
+      expect(getByText('Delete Tasks')).toBeInTheDocument();
+      userEvent.click(getByText('Delete Tasks'));
+      await waitFor(() => {
+        expect(
+          queryByText('Are you sure you wish to delete the 3 selected tasks?'),
+        ).toBeInTheDocument();
+      });
+
+      userEvent.click(getByText('Yes'));
+
+      await waitFor(() => {
+        expect(queryByText('Showing 50')).toBeInTheDocument();
+      });
+    });
   });
 
   it('checkbox is unchecked', async () => {

src/components/Task/TaskRow/TaskRow.tsx

@@ -66,6 +66,7 @@ interface TaskRowProps {
   onContactSelected: (taskId: string) => void;
   onTaskCheckToggle: (taskId: string) => void;
   useTopMargin?: boolean;
+  removeSelectedIds?: (id: string) => void;
 }
 
 export const TaskRow: React.FC<TaskRowProps> = ({
@@ -75,6 +76,7 @@ export const TaskRow: React.FC<TaskRowProps> = ({
   onContactSelected,
   onTaskCheckToggle,
   useTopMargin,
+  removeSelectedIds,
 }) => {
   const { t } = useTranslation();
 
@@ -269,6 +271,7 @@ export const TaskRow: React.FC<TaskRowProps> = ({
               <DeleteTaskIconButton
                 accountListId={accountListId}
                 taskId={taskId}
+                removeSelectedIds={removeSelectedIds}
               />
             </Box>
             <Box onClick={(e) => e.stopPropagation()}>

src/components/common/Modal/DeleteConfirmation/DeleteConfirmation.tsx

@@ -29,6 +29,7 @@ interface DeleteConfirmationProps {
   accountListId?: string;
   taskId?: string;
   onClose?: () => void;
+  removeSelectedIds?: (id: string) => void;
 }
 
 export const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
@@ -40,6 +41,7 @@ export const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
   accountListId,
   taskId,
   onClose,
+  removeSelectedIds,
 }) => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
@@ -56,12 +58,18 @@ export const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
           cache.evict({ id: `Task:${taskId}` });
           cache.gc();
         },
-        refetchQueries: ['ContactTasksTab', 'GetWeeklyActivity', 'GetThisWeek'],
+        refetchQueries: [
+          'ContactTasksTab',
+          'GetWeeklyActivity',
+          'GetThisWeek',
+          'Tasks',
+        ],
       });
       enqueueSnackbar(t('Task deleted successfully'), { variant: 'success' });
       onClickDecline(false);
       onClose && onClose();
       onClickConfirm && onClickConfirm();
+      removeSelectedIds && removeSelectedIds(taskId);
     }
   };
 

src/hooks/useMassSelection.ts

@@ -11,6 +11,7 @@ export const useMassSelection = (
   activeFilters?: ContactFilterSetInput | ReportContactFilterSetInput,
   wildcardSearch?: string,
   starredFilter?: ContactFilterSetInput,
+  idsToRemove?: string[],
 ): {
   ids: string[];
   selectionType: ListHeaderCheckBoxState;
@@ -26,6 +27,12 @@ export const useMassSelection = (
   );
   const [ids, setIds] = useState<string[]>([]);
 
+  useEffect(() => {
+    if (idsToRemove) {
+      setIds(ids.filter((id) => !idsToRemove.includes(id)));
+    }
+  }, [idsToRemove]);
+
   const toggleSelectionById = (id: string) => {
     switch (selectionType) {
       case ListHeaderCheckBoxState.Partial: