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

pages/accountLists/[accountListId]/tasks/Tasks.test.tsx

@@ -195,4 +195,24 @@ describe('tasks page', () => {
       expect(getByText('All Tasks')).toHaveClass('MuiButton-contained'),
     );
   });
+
+  it('should remove task', async () => {
+    const { getByText, getByTestId } = render(
+      <MocksProviders>
+        <Tasks />
+      </MocksProviders>,
+    );
+    await waitFor(() => expect(getByText('Test Person')).toBeInTheDocument());
+    userEvent.click(getByTestId('task-checkbox-1'));
+    expect(getByText('Showing 17')).toBeInTheDocument();
+    userEvent.click(getByTestId('DeleteIconButton-1'));
+    // This is needed for some reason
+    userEvent.click(getByTestId('DeleteIconButton-1'));
+    userEvent.click(getByText('Yes'));
+    await waitFor(() => {
+      expect(mockEnqueue).toHaveBeenCalledWith(`Task deleted successfully`, {
+        variant: 'success',
+      });
+    });
+  });
 });

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

@@ -236,6 +236,7 @@ const TasksPage: React.FC = () => {
     deselectAll,
     toggleSelectAll,
     toggleSelectionById,
+    deselectIds,
   } = useMassSelection(
     data?.tasks?.totalCount ?? 0,
     allTaskIds,
@@ -344,6 +345,7 @@ const TasksPage: React.FC = () => {
                     toggleStarredFilter={setStarredFilter}
                     headerCheckboxState={selectionType}
                     massDeselectAll={deselectAll}
+                    showShowingCount
                     selectedIds={ids}
                     buttonGroup={
                       <Hidden xsDown>
@@ -415,6 +417,7 @@ const TasksPage: React.FC = () => {
                             onTaskCheckToggle={toggleSelectionById}
                             isChecked={isRowChecked(task.id)}
                             useTopMargin={index === 0}
+                            removeSelectedIds={deselectIds}
                           />
                         </Box>
                       )}

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

@@ -13,20 +13,25 @@ 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();
 
   const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
 
   return (
     <>
-      <DeleteButton onClick={() => setRemoveDialogOpen(true)}>
+      <DeleteButton
+        onClick={() => setRemoveDialogOpen(true)}
+        data-testid={`DeleteIconButton-${taskId}`}
+      >
         <DeletedItemIcon />
       </DeleteButton>
       <DeleteConfirmation
@@ -36,6 +41,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,10 +111,6 @@ const router = {
   push,
 };
 
-beforeEach(() => {
-  (useAccountListId as jest.Mock).mockReturnValue(router);
-});
-
 const ButtonGroup: React.FC = () => {
   return (
     <>
@@ -473,3 +468,29 @@ describe('ListHeader', () => {
     expect(queryByText('Actions')).not.toBeInTheDocument();
   });
 });
+
+describe('Counts', () => {
+  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'));
+    expect(queryByText('Showing 50')).toBeInTheDocument();
+  });
+});

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();
 
@@ -166,6 +168,7 @@ export const TaskRow: React.FC<TaskRowProps> = ({
             <Box padding="checkbox">
               <Checkbox
                 checked={isChecked}
+                data-testid={`task-checkbox-${taskId}`}
                 color="secondary"
                 onClick={(event) => event.stopPropagation()}
                 onChange={() => onTaskCheckToggle(taskId)}
@@ -269,6 +272,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.test.ts

@@ -159,4 +159,26 @@ describe('useMassSelection', () => {
       expect(result.current.ids).toEqual(['1', '2', '3', '7', '8', '9', '10']);
     });
   });
+
+  describe('deselectIds()', () => {
+    it('should deselect ids', () => {
+      const { result, rerender } = renderHook(() =>
+        useMassSelection(
+          defaultTotalCount,
+          defaultIdsList,
+          defaultActiveFilters,
+          defaultWildcardSearch,
+          defaultStarredFilter,
+        ),
+      );
+
+      result.current.toggleSelectAll();
+      rerender();
+      expect(result.current.ids).toEqual(defaultIdsList);
+
+      result.current.deselectIds(['7', '8', '9']);
+      rerender();
+      expect(result.current.ids).toEqual(['1', '2', '3', '4', '5', '6', '10']);
+    });
+  });
 });

src/hooks/useMassSelection.ts

@@ -20,6 +20,7 @@ export const useMassSelection = (
   toggleSelectionById: (id: string) => void;
   selectMultipleIds: (ids: string[]) => void;
   deselectMultipleIds: (ids: string[]) => void;
+  deselectIds: (idsToRemove: string[]) => void;
 } => {
   const [selectionType, setSelectionType] = useState(
     ListHeaderCheckBoxState.Unchecked,
@@ -93,6 +94,10 @@ export const useMassSelection = (
     }
   };
 
+  const deselectIds = (idsToRemove: string[]) => {
+    setIds(ids.filter((id) => !idsToRemove.includes(id)));
+  };
+
   useEffect(() => {
     switch (selectionType) {
       case ListHeaderCheckBoxState.Checked:
@@ -121,5 +126,6 @@ export const useMassSelection = (
     toggleSelectionById,
     selectMultipleIds,
     deselectMultipleIds,
+    deselectIds,
   };
 };