1. List Filters - Moving queries to context

src/components/Tool/Appeal/AppealsContext/AppealsContext.tsx

@@ -16,6 +16,7 @@ import { useAccountListId } from 'src/hooks/useAccountListId';
 import { useMassSelection } from 'src/hooks/useMassSelection';
 import { sanitizeFilters } from 'src/lib/sanitizeFilters';
 import { useContactsQuery } from './contacts.generated';
+import { useContactsCountQuery } from './contactsCount.generated';
 
 export enum AppealStatusEnum {
   Excluded = 'excluded',
@@ -30,6 +31,19 @@ export enum TableViewModeEnum {
   Flows = 'flows',
 }
 
+export const shouldSkipContactCount = (
+  filterPanelOpen: boolean,
+  viewMode: TableViewModeEnum,
+) => {
+  if (viewMode === TableViewModeEnum.Flows) {
+    return true;
+  } else if (viewMode === TableViewModeEnum.List && !filterPanelOpen) {
+    return false;
+  } else {
+    return false;
+  }
+};
+
 export interface AppealsType
   extends Omit<
     ContactsType,
@@ -47,6 +61,11 @@ export interface AppealsType
   contactsQueryResult: ReturnType<typeof useContactsQuery>;
   appealId: string | undefined;
   page: PageEnum | undefined;
+  askedCountQueryResult: ReturnType<typeof useContactsCountQuery>;
+  excludedCountQueryResult: ReturnType<typeof useContactsCountQuery>;
+  committedCountQueryResult: ReturnType<typeof useContactsCountQuery>;
+  givenCountQueryResult: ReturnType<typeof useContactsCountQuery>;
+  receivedCountQueryResult: ReturnType<typeof useContactsCountQuery>;
 }
 
 export const AppealsContext = React.createContext<AppealsType | null>(null);
@@ -205,6 +224,68 @@ export const AppealsProvider: React.FC<AppealsContextProps> = ({
     },
   });
 
+  const nameSearch = searchTerm ? { wildcardSearch: searchTerm as string } : {};
+  const defaultFilters = {
+    appeal: [appealId || ''],
+    ...nameSearch,
+  };
+  const skip = shouldSkipContactCount(filterPanelOpen, viewMode);
+
+  const askedCountQueryResult = useContactsCountQuery({
+    variables: {
+      accountListId: accountListId || '',
+      contactsFilter: {
+        ...defaultFilters,
+        appealStatus: AppealStatusEnum.Asked,
+      },
+    },
+    skip,
+  });
+
+  const excludedCountQueryResult = useContactsCountQuery({
+    variables: {
+      accountListId: accountListId || '',
+      contactsFilter: {
+        ...defaultFilters,
+        appealStatus: AppealStatusEnum.Excluded,
+      },
+    },
+    skip,
+  });
+
+  const committedCountQueryResult = useContactsCountQuery({
+    variables: {
+      accountListId: accountListId || '',
+      contactsFilter: {
+        ...defaultFilters,
+        appealStatus: AppealStatusEnum.NotReceived,
+      },
+    },
+    skip,
+  });
+
+  const givenCountQueryResult = useContactsCountQuery({
+    variables: {
+      accountListId: accountListId || '',
+      contactsFilter: {
+        ...defaultFilters,
+        appealStatus: AppealStatusEnum.Processed,
+      },
+    },
+    skip,
+  });
+
+  const receivedCountQueryResult = useContactsCountQuery({
+    variables: {
+      accountListId: accountListId || '',
+      contactsFilter: {
+        ...defaultFilters,
+        appealStatus: AppealStatusEnum.ReceivedNotProcessed,
+      },
+    },
+    skip,
+  });
+
   const toggleFilterPanel = () => {
     setFilterPanelOpen(!filterPanelOpen);
   };
@@ -363,6 +444,11 @@ export const AppealsProvider: React.FC<AppealsContextProps> = ({
         userOptionsLoading: userOptionsLoading,
         appealId,
         page,
+        askedCountQueryResult,
+        excludedCountQueryResult,
+        committedCountQueryResult,
+        givenCountQueryResult,
+        receivedCountQueryResult,
       }}
     >
       {children}

src/components/Tool/Appeal/List/AppealsListFilterPanel/AppealsListFilterPanel.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
-import { render, waitFor } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { SnackbarProvider } from 'notistack';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper';
@@ -11,8 +12,8 @@ import {
   AppealsContext,
   AppealsType,
 } from '../../AppealsContext/AppealsContext';
+import { ContactsCountQuery } from '../../AppealsContext/contactsCount.generated';
 import { AppealsListFilterPanel } from './AppealsListFilterPanel';
-import { ContactsCountQuery } from './contactsCount.generated';
 
 const accountListId = 'accountListId';
 const appealId = 'appealId';
@@ -26,35 +27,51 @@ const onClose = jest.fn();
 const setActiveFilters = jest.fn();
 const deselectAll = jest.fn();
 
+const defaultContactCountMock = {
+  data: {
+    contacts: {
+      totalCount: 5,
+    },
+  },
+  loading: false,
+};
+
 const Components = ({ ids = selectedIds }) => (
   <ThemeProvider theme={theme}>
     <TestRouter router={router}>
-      <GqlMockedProvider<{ ContactsCount: ContactsCountQuery }>
-        mocks={{
-          ContactsCount: {
-            contacts: {
-              totalCount: 5,
+      <SnackbarProvider>
+        <GqlMockedProvider<{ ContactsCount: ContactsCountQuery }>
+          mocks={{
+            ContactsCount: {
+              contacts: {
+                totalCount: 5,
+              },
             },
-          },
-        }}
-      >
-        <AppealsWrapper>
-          <AppealsContext.Provider
-            value={
-              {
-                accountListId,
-                appealId,
-                activeFilters,
-                selectedIds: ids,
-                setActiveFilters,
-                deselectAll,
-              } as unknown as AppealsType
-            }
-          >
-            <AppealsListFilterPanel onClose={onClose} />
-          </AppealsContext.Provider>
-        </AppealsWrapper>
-      </GqlMockedProvider>
+          }}
+        >
+          <AppealsWrapper>
+            <AppealsContext.Provider
+              value={
+                {
+                  accountListId,
+                  appealId,
+                  activeFilters,
+                  selectedIds: ids,
+                  setActiveFilters,
+                  deselectAll,
+                  askedCountQueryResult: defaultContactCountMock,
+                  excludedCountQueryResult: defaultContactCountMock,
+                  committedCountQueryResult: defaultContactCountMock,
+                  givenCountQueryResult: defaultContactCountMock,
+                  receivedCountQueryResult: defaultContactCountMock,
+                } as unknown as AppealsType
+              }
+            >
+              <AppealsListFilterPanel onClose={onClose} />
+            </AppealsContext.Provider>
+          </AppealsWrapper>
+        </GqlMockedProvider>
+      </SnackbarProvider>
     </TestRouter>
   </ThemeProvider>
 );
@@ -76,17 +93,19 @@ describe('AppealsListFilterPanel', () => {
   });
 
   it('default', async () => {
-    const { getByText, getByRole, getAllByRole } = render(<Components />);
+    const { getByText, getByRole, findByRole, getAllByRole } = render(
+      <Components />,
+    );
 
     expect(getByText('Given')).toBeInTheDocument();
     expect(getByText('Committed')).toBeInTheDocument();
     expect(getByText('Excluded')).toBeInTheDocument();
 
-    await waitFor(() => {
-      expect(getByRole('button', { name: /given 5/i })).toBeInTheDocument();
-      expect(getByRole('button', { name: /received 5/i })).toBeInTheDocument();
-      expect(getByRole('button', { name: /asked 5/i })).toBeInTheDocument();
-    });
+    expect(
+      await findByRole('button', { name: /given 5/i }),
+    ).toBeInTheDocument();
+    expect(getByRole('button', { name: /received 5/i })).toBeInTheDocument();
+    expect(getByRole('button', { name: /asked 5/i })).toBeInTheDocument();
 
     expect(getByText('Add Contact to Appeal')).toBeInTheDocument();
     expect(getByText('Delete Appeal')).toBeInTheDocument();
@@ -112,5 +131,81 @@ describe('AppealsListFilterPanel', () => {
       ...activeFilters,
       appealStatus: AppealStatusEnum.Processed,
     });
+
+    userEvent.click(getByText('Received'));
+    expect(deselectAll).toHaveBeenCalled();
+    expect(setActiveFilters).toHaveBeenCalledWith({
+      ...activeFilters,
+      appealStatus: AppealStatusEnum.ReceivedNotProcessed,
+    });
+
+    userEvent.click(getByText('Committed'));
+    expect(deselectAll).toHaveBeenCalled();
+    expect(setActiveFilters).toHaveBeenCalledWith({
+      ...activeFilters,
+      appealStatus: AppealStatusEnum.NotReceived,
+    });
+
+    userEvent.click(getByText('Asked'));
+    expect(deselectAll).toHaveBeenCalled();
+    expect(setActiveFilters).toHaveBeenCalledWith({
+      ...activeFilters,
+      appealStatus: AppealStatusEnum.Asked,
+    });
+
+    userEvent.click(getByText('Excluded'));
+    expect(deselectAll).toHaveBeenCalled();
+    expect(setActiveFilters).toHaveBeenCalledWith({
+      ...activeFilters,
+      appealStatus: AppealStatusEnum.Excluded,
+    });
+  });
+
+  describe('Modals', () => {
+    it('should open export contacts modal', async () => {
+      const { findAllByRole, findByRole } = render(<Components />);
+
+      const buttons = await findAllByRole('button', {
+        name: 'Export 2 Selected',
+      });
+      userEvent.click(buttons[0]);
+
+      expect(
+        await findByRole('heading', { name: 'Export Contacts' }),
+      ).toBeInTheDocument();
+    });
+
+    it('should open export emails modal', async () => {
+      const { findAllByRole, findByTestId } = render(<Components />);
+
+      const buttons = await findAllByRole('button', {
+        name: 'Export 2 Selected',
+      });
+      userEvent.click(buttons[1]);
+
+      expect(await findByTestId('ExportEmailsModal')).toBeInTheDocument();
+    });
+
+    it('should open add contact to appeal modal', async () => {
+      const { findByRole, findByTestId } = render(<Components />);
+
+      const button = await findByRole('button', {
+        name: 'Select Contact',
+      });
+      userEvent.click(button);
+
+      expect(await findByTestId('addContactToAppealModal')).toBeInTheDocument();
+    });
+
+    it('should open delete appeal modal', async () => {
+      const { findByRole, findByTestId } = render(<Components />);
+
+      const button = await findByRole('button', {
+        name: 'Permanently Delete Appeal',
+      });
+      userEvent.click(button);
+
+      expect(await findByTestId('deleteAppealModal')).toBeInTheDocument();
+    });
   });
 });