Updating the coaches query to use useFetchAllPages

src/components/Coaching/CoachingList.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import { render } from '@testing-library/react';
+import { ErgonoMockShape } from 'graphql-ergonomock';
+import TestRouter from '__tests__/util/TestRouter';
+import TestWrapper from '__tests__/util/TestWrapper';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import theme from 'src/theme';
+import { CoachingList } from './CoachingList';
+import { LoadCoachingListQuery } from './LoadCoachingList.generated';
+
+const accountListId = 'accountListId';
+const mutationSpy = jest.fn();
+
+const coachingAccountListsMock = [
+  {
+    id: '1',
+    name: 'Account 1',
+  },
+  {
+    id: '2',
+    name: 'Account 2',
+  },
+];
+const router = {
+  query: { accountListId: accountListId },
+  push: jest.fn(),
+};
+
+interface ComponentsProps {
+  mockNodes?: ErgonoMockShape[];
+}
+const Components = ({
+  mockNodes = coachingAccountListsMock,
+}: ComponentsProps) => (
+  <ThemeProvider theme={theme}>
+    <TestRouter router={router}>
+      <TestWrapper>
+        <GqlMockedProvider<{
+          coachingAccountLists: LoadCoachingListQuery;
+        }>
+          mocks={{
+            LoadCoachingList: {
+              coachingAccountLists: {
+                nodes: mockNodes,
+                totalCount: 2,
+              },
+            },
+          }}
+          onCall={mutationSpy}
+        >
+          <CoachingList accountListId={accountListId} />
+        </GqlMockedProvider>
+      </TestWrapper>
+    </TestRouter>
+  </ThemeProvider>
+);
+
+describe('CoachingList', () => {
+  it('should render loading state', () => {
+    const { getByTestId } = render(<Components />);
+
+    expect(getByTestId('loading-coaches')).toBeInTheDocument();
+  });
+
+  it('should render coaching accounts', async () => {
+    const { findByText, getByText } = render(<Components />);
+
+    expect(await findByText('Account 1')).toBeInTheDocument();
+    expect(getByText('Account 2')).toBeInTheDocument();
+  });
+});

src/components/Coaching/CoachingList.tsx

@@ -3,7 +3,8 @@ import { Spa } from '@mui/icons-material';
 import { Box, Divider, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import { CoachingRow } from './CoachingRow/CoachingRow';
+import { useFetchAllPages } from 'src/hooks/useFetchAllPages';
+import { CoachingRow, CoachingRowWrapper } from './CoachingRow/CoachingRow';
 import { useLoadCoachingListQuery } from './LoadCoachingList.generated';
 
 interface CoachingListProps {
@@ -32,19 +33,24 @@ const CoachingListTitle = styled(Typography)(({ theme }) => ({
 }));
 
 const CoachingLoading = styled(Skeleton)(() => ({
-  width: '75%',
-  height: '50px',
+  height: '100px',
 }));
 
 export const CoachingList: React.FC<CoachingListProps> = ({
   accountListId,
 }) => {
   // This needs to become a infinite scroll query
-  const { data, loading } = useLoadCoachingListQuery();
+  const { data, fetchMore, error } = useLoadCoachingListQuery();
   const { t } = useTranslation();
 
   const coachingAccounts = data?.coachingAccountLists;
 
+  const { loading } = useFetchAllPages({
+    fetchMore,
+    error,
+    pageInfo: coachingAccounts?.pageInfo,
+  });
+
   return (
     <CoachingListWrapper>
       <CoachingTitleWrapper>
@@ -57,9 +63,9 @@ export const CoachingList: React.FC<CoachingListProps> = ({
       <Box>
         {loading ? (
           <>
-            <CoachingLoading role="listitem" />
-            <CoachingLoading role="listitem" />
-            <CoachingLoading role="listitem" />
+            <LoadingCoach />
+            <LoadingCoach />
+            <LoadingCoach />
           </>
         ) : (
           coachingAccounts?.nodes.map((coachingAccount, _index) => {
@@ -78,3 +84,11 @@ export const CoachingList: React.FC<CoachingListProps> = ({
     </CoachingListWrapper>
   );
 };
+
+const LoadingCoach: React.FC = () => (
+  <span>
+    <CoachingRowWrapper>
+      <CoachingLoading role="listitem" />
+    </CoachingRowWrapper>
+  </span>
+);

src/components/Coaching/CoachingRow/CoachingRow.tsx

@@ -17,7 +17,7 @@ interface Props {
   accountListId: string;
 }
 
-const CoachingRowWrapper = styled(Box)(({ theme }) => ({
+export const CoachingRowWrapper = styled(Box)(({ theme }) => ({
   width: '100%',
   maxWidth: '950px',
   margin: 'auto',

src/components/Coaching/LoadCoachingList.graphql

@@ -1,5 +1,5 @@
-query LoadCoachingList {
-  coachingAccountLists(first: 100) {
+query LoadCoachingList($after: String) {
+  coachingAccountLists(first: 25, after: $after) {
     nodes {
       ...CoachedPerson
     }

src/lib/apollo/cache.ts

@@ -42,6 +42,12 @@ export const createCache = () =>
         },
         merge: true,
       },
+      CoachingAccountLists: {
+        fields: {
+          contacts: paginationFieldPolicy,
+        },
+        merge: true,
+      },
       // For Options, use the key as the unique id to make it easier to find them in the cache
       Option: { keyFields: ['key'] },
       User: { merge: true },
@@ -77,6 +83,7 @@ export const createCache = () =>
           accountListPledges: paginationFieldPolicy,
           appeals: paginationFieldPolicy,
           coachingAccountListPledges: paginationFieldPolicy,
+          coachingAccountLists: paginationFieldPolicy,
           contacts: paginationFieldPolicy,
           donations: paginationFieldPolicy,
           financialAccounts: paginationFieldPolicy,