MPDX-8116 - Fix Commitment Info - Infinity Scroll

src/components/Tool/FixCommitmentInfo/Contact.tsx

@@ -166,7 +166,7 @@ interface Props {
   id: string;
   name: string;
   donations: DonationsType[];
-  statusTitle: string;
+  statusTitle: string | null | undefined;
   statusValue: string;
   amount: number;
   amountCurrency: string;
@@ -304,7 +304,7 @@ const Contact: React.FC<Props> = ({
                             <Typography variant="subtitle1">{name}</Typography>
                           </Link>
                           <Typography variant="subtitle2">
-                            {`Current: ${statusTitle} ${
+                            {`Current: ${statusTitle || ''} ${
                               amount && amountCurrency
                                 ? currencyFormat(amount, amountCurrency, locale)
                                 : ''

src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.test.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from '@mui/material/styles';
 import userEvent from '@testing-library/user-event';
 import { ErgonoMockShape } from 'graphql-ergonomock';
 import { SnackbarProvider } from 'notistack';
+import { VirtuosoMockContext } from 'react-virtuoso';
 import TestRouter from '__tests__/util/TestRouter';
 import TestWrapper from '__tests__/util/TestWrapper';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
@@ -42,23 +43,27 @@ const Components = ({
     <ThemeProvider theme={theme}>
       <TestRouter router={router}>
         <TestWrapper>
-          <GqlMockedProvider<{
-            InvalidStatuses: InvalidStatusesQuery;
-          }>
-            mocks={{
-              InvalidStatuses: {
-                contacts: {
-                  nodes: mockNodes,
-                  totalCount: 2,
-                },
-              },
-            }}
+          <VirtuosoMockContext.Provider
+            value={{ viewportHeight: 1000, itemHeight: 100 }}
           >
-            <FixCommitmentInfo
-              accountListId={accountListId}
-              setContactFocus={setContactFocus}
-            />
-          </GqlMockedProvider>
+            <GqlMockedProvider<{
+              InvalidStatuses: InvalidStatusesQuery;
+            }>
+              mocks={{
+                InvalidStatuses: {
+                  contacts: {
+                    nodes: mockNodes,
+                    totalCount: 2,
+                  },
+                },
+              }}
+            >
+              <FixCommitmentInfo
+                accountListId={accountListId}
+                setContactFocus={setContactFocus}
+              />
+            </GqlMockedProvider>
+          </VirtuosoMockContext.Provider>
         </TestWrapper>
       </TestRouter>
     </ThemeProvider>
@@ -71,13 +76,16 @@ describe('FixCommitmentContact', () => {
   });
 
   it('default with test data', async () => {
-    const { getByText, findByText } = render(<Components />);
+    const { getByText, getAllByText, findByText } = render(<Components />);
     await findByText('Fix Commitment Info');
     expect(getByText('Fix Commitment Info')).toBeInTheDocument();
 
     expect(
       getByText('You have 2 partner statuses to confirm.'),
     ).toBeInTheDocument();
+    expect(getAllByText('Current: Partner - Financial $1 Weekly')).toHaveLength(
+      2,
+    );
   });
 
   it('has correct styles', async () => {
@@ -174,4 +182,24 @@ describe('FixCommitmentContact', () => {
 
     expect(setContactFocus).toHaveBeenCalled();
   });
+
+  it('updates contact info with dontChange enum', async () => {
+    const { findAllByTestId, findByText, getAllByTestId, queryByText } = render(
+      <Components />,
+    );
+
+    userEvent.click((await findAllByTestId('doNotChangeButton'))[0]);
+
+    expect(
+      await findByText(
+        "Are you sure you wish to leave Tester 1's commitment information unchanged?",
+      ),
+    ).toBeInTheDocument();
+
+    userEvent.click(getAllByTestId('action-button')[1]);
+
+    await waitFor(() =>
+      expect(queryByText('Tester 1')).not.toBeInTheDocument(),
+    );
+  });
 });

src/components/Tool/FixCommitmentInfo/FixCommitmentInfo.tsx

@@ -9,8 +9,14 @@ import {
 } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import { Trans, useTranslation } from 'react-i18next';
+import { ItemProps } from 'react-virtuoso';
 import { makeStyles } from 'tss-react/mui';
 import { SetContactFocus } from 'pages/accountLists/[accountListId]/tools/useToolsHelper';
+import {
+  InfiniteList,
+  ItemWithBorders,
+} from 'src/components/InfiniteList/InfiniteList';
+import { navBarHeight } from 'src/components/Layouts/Primary/Primary';
 import { Confirmation } from 'src/components/common/Modal/Confirmation/Confirmation';
 import { PledgeFrequencyEnum, StatusEnum } from 'src/graphql/types.generated';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
@@ -107,6 +113,10 @@ export enum UpdateTypeEnum {
   Hide = 'HIDE',
 }
 
+const ItemOverride: React.ComponentType<ItemProps> = (props) => (
+  <ItemWithBorders disableGutters disableHover {...props} />
+);
+
 const FixCommitmentInfo: React.FC<Props> = ({
   accountListId,
   setContactFocus,
@@ -117,7 +127,7 @@ const FixCommitmentInfo: React.FC<Props> = ({
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
   const { appName } = useGetAppSettings();
-  const { data } = useInvalidStatusesQuery({
+  const { data, loading, fetchMore } = useInvalidStatusesQuery({
     variables: { accountListId },
   });
 
@@ -251,36 +261,55 @@ const FixCommitmentInfo: React.FC<Props> = ({
                   </Typography>
                 </Box>
               </Grid>
-              <Grid item xs={12}>
-                <Box>
-                  {data.contacts.nodes.map((contact) => (
-                    <Contact
-                      id={contact.id}
-                      name={contact.name}
-                      key={contact.id}
-                      donations={contact.donations?.nodes}
-                      statusTitle={
-                        contact.status
-                          ? contactPartnershipStatus[contact.status]
-                          : ''
-                      }
-                      statusValue={
-                        getLocalizedContactStatus(t, contact.status) || ''
-                      }
-                      amount={contact.pledgeAmount || 0}
-                      amountCurrency={contact.pledgeCurrency || ''}
-                      frequencyValue={contact.pledgeFrequency || null}
-                      showModal={handleShowModal}
-                      statuses={contactStatuses || []}
-                      setContactFocus={setContactFocus}
-                      avatar={contact?.avatar}
-                      suggestedChanges={formatSuggestedChanges(
-                        contact?.suggestedChanges,
-                      )}
-                    />
-                  ))}
-                </Box>
-              </Grid>
+              <InfiniteList
+                loading={loading}
+                data={data.contacts.nodes}
+                itemContent={(index, contact) => (
+                  <Grid item xs={12}>
+                    <Box>
+                      <Contact
+                        id={contact.id}
+                        name={contact.name}
+                        key={contact.id}
+                        donations={contact.donations?.nodes}
+                        statusTitle={
+                          contact.status &&
+                          contactPartnershipStatus[contact.status]
+                        }
+                        statusValue={
+                          getLocalizedContactStatus(t, contact.status) || ''
+                        }
+                        amount={contact.pledgeAmount || 0}
+                        amountCurrency={contact.pledgeCurrency || ''}
+                        frequencyValue={contact.pledgeFrequency || null}
+                        showModal={handleShowModal}
+                        statuses={contactStatuses || []}
+                        setContactFocus={setContactFocus}
+                        avatar={contact?.avatar}
+                        suggestedChanges={formatSuggestedChanges(
+                          contact?.suggestedChanges,
+                        )}
+                      />
+                    </Box>
+                  </Grid>
+                )}
+                endReached={() =>
+                  data.contacts.pageInfo.hasNextPage &&
+                  fetchMore({
+                    variables: { after: data.contacts.pageInfo.endCursor },
+                  })
+                }
+                EmptyPlaceholder={<NoData tool="fixEmailAddresses" />}
+                style={{
+                  height: `calc(100vh - ${navBarHeight} - ${theme.spacing(
+                    33,
+                  )})`,
+                  width: '100%',
+                  scrollbarWidth: 'none',
+                }}
+                ItemOverride={ItemOverride}
+                increaseViewportBy={{ top: 2000, bottom: 2000 }}
+              ></InfiniteList>
             </>
           ) : (
             <NoData tool="fixCommitmentInfo" />