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

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

@@ -195,4 +195,27 @@ 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());
+    expect(getByTestId('task-checkbox-1')).toBeInTheDocument();
+    userEvent.click(getByTestId('task-checkbox-1'));
+    expect(getByText('Showing 17')).toBeInTheDocument();
+    expect(getByTestId('DeleteIconButton-1')).toBeInTheDocument();
+    userEvent.click(getByTestId('DeleteIconButton-1'));
+    // This is needed for some reason
+    userEvent.click(getByTestId('DeleteIconButton-1'));
+    expect(getByText('Confirm')).toBeInTheDocument();
+    userEvent.click(getByText('Yes'));
+    await waitFor(() => {
+      expect(mockEnqueue).toHaveBeenCalledWith(`Task deleted successfully`, {
+        variant: 'success',
+      });
+    });
+  });
 });

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

@@ -103,7 +103,6 @@ const TasksPage: React.FC = () => {
 
   const [contactDetailsOpen, setContactDetailsOpen] = useState(false);
   const [contactDetailsId, setContactDetailsId] = useState<string>();
-  const [idsToRemove, setIdsToRemove] = useState<string[]>([]);
 
   const { contactId, searchTerm } = query;
 
@@ -237,13 +236,13 @@ const TasksPage: React.FC = () => {
     deselectAll,
     toggleSelectAll,
     toggleSelectionById,
+    deselectIds,
   } = useMassSelection(
     data?.tasks?.totalCount ?? 0,
     allTaskIds,
     activeFilters,
     searchTerm as string,
     starredFilter,
-    idsToRemove,
   );
   //#endregion
 
@@ -418,7 +417,7 @@ const TasksPage: React.FC = () => {
                             onTaskCheckToggle={toggleSelectionById}
                             isChecked={isRowChecked(task.id)}
                             useTopMargin={index === 0}
-                            removeSelectedIds={(id) => setIdsToRemove([id])}
+                            removeSelectedIds={deselectIds}
                           />
                         </Box>
                       )}

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

@@ -13,7 +13,7 @@ interface DeleteTaskIconButtonProps {
   accountListId: string;
   taskId: string;
   onDeleteConfirm?: () => void;
-  removeSelectedIds?: (id: string) => void;
+  removeSelectedIds?: (id: string[]) => void;
 }
 
 export const DeleteTaskIconButton: React.FC<DeleteTaskIconButtonProps> = ({
@@ -28,7 +28,10 @@ export const DeleteTaskIconButton: React.FC<DeleteTaskIconButtonProps> = ({
 
   return (
     <>
-      <DeleteButton onClick={() => setRemoveDialogOpen(true)}>
+      <DeleteButton
+        onClick={() => setRemoveDialogOpen(true)}
+        data-testid={`DeleteIconButton-${taskId}`}
+      >
         <DeletedItemIcon />
       </DeleteButton>
       <DeleteConfirmation

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

@@ -111,10 +111,6 @@ const router = {
   push,
 };
 
-// beforeEach(() => {
-//   (useAccountListId as jest.Mock).mockReturnValue(router);
-// });
-
 const ButtonGroup: React.FC = () => {
   return (
     <>
@@ -225,33 +221,6 @@ 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 () => {
@@ -499,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,7 +66,7 @@ interface TaskRowProps {
   onContactSelected: (taskId: string) => void;
   onTaskCheckToggle: (taskId: string) => void;
   useTopMargin?: boolean;
-  removeSelectedIds?: (id: string) => void;
+  removeSelectedIds?: (id: string[]) => void;
 }
 
 export const TaskRow: React.FC<TaskRowProps> = ({
@@ -168,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)}

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

@@ -29,7 +29,7 @@ interface DeleteConfirmationProps {
   accountListId?: string;
   taskId?: string;
   onClose?: () => void;
-  removeSelectedIds?: (id: string) => void;
+  removeSelectedIds?: (id: string[]) => void;
 }
 
 export const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
@@ -69,7 +69,7 @@ export const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
       onClickDecline(false);
       onClose && onClose();
       onClickConfirm && onClickConfirm();
-      removeSelectedIds && removeSelectedIds(taskId);
+      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

@@ -11,7 +11,6 @@ export const useMassSelection = (
   activeFilters?: ContactFilterSetInput | ReportContactFilterSetInput,
   wildcardSearch?: string,
   starredFilter?: ContactFilterSetInput,
-  idsToRemove?: string[],
 ): {
   ids: string[];
   selectionType: ListHeaderCheckBoxState;
@@ -21,18 +20,13 @@ 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,
   );
   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:
@@ -100,6 +94,10 @@ export const useMassSelection = (
     }
   };
 
+  const deselectIds = (idsToRemove: string[]) => {
+    setIds(ids.filter((id) => !idsToRemove.includes(id)));
+  };
+
   useEffect(() => {
     switch (selectionType) {
       case ListHeaderCheckBoxState.Checked:
@@ -128,5 +126,6 @@ export const useMassSelection = (
     toggleSelectionById,
     selectMultipleIds,
     deselectMultipleIds,
+    deselectIds,
   };
 };