Merge pull request #4158 from unicef/fix/optimise-programs-list

Optimise programs list page
unicef · Aug 26, 2024 · a0a22c1 · a0a22c1
2 parents e79542a + 078b0da
commit a0a22c1
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 22 deletions.
diff --git a/frontend/fixtures/programs/fakeApolloAllPrograms.ts b/frontend/fixtures/programs/fakeApolloAllPrograms.ts
@@ -1,9 +1,9 @@
-import { AllProgramsDocument } from '../../src/__generated__/graphql';
+import { AllProgramsForTableDocument } from '../../src/__generated__/graphql';
 
 export const fakeApolloAllPrograms = [
   {
     request: {
-      query: AllProgramsDocument,
+      query: AllProgramsForTableDocument,
       variables: {
         businessArea: 'afghanistan',
         search: '',
@@ -34,8 +34,7 @@ export const fakeApolloAllPrograms = [
             {
               cursor: 'YXJyYXljb25uZWN0aW9uOjA=',
               node: {
-                id:
-                  'UHJvZ3JhbU5vZGU6ZDM4YWI4MTQtOTQyNy00ZmJkLTg4ODctOGUyYzlkMzcxYjg2',
+                id: 'UHJvZ3JhbU5vZGU6ZDM4YWI4MTQtOTQyNy00ZmJkLTg4ODctOGUyYzlkMzcxYjg2',
                 name: 'Notice hair fall college enough perhaps.',
                 startDate: '2020-01-20',
                 endDate: '2020-08-19',
@@ -48,7 +47,6 @@ export const fakeApolloAllPrograms = [
                 populationGoal: 507376,
                 sector: 'EDUCATION',
                 totalNumberOfHouseholds: 12,
-                totalNumberOfHouseholdsWithTpInProgram: 12,
                 __typename: 'ProgramNode',
               },
               __typename: 'ProgramNodeEdge',

diff --git a/frontend/src/__generated__/graphql.tsx b/frontend/src/__generated__/graphql.tsx
diff --git a/frontend/src/apollo/queries/program/AllProgramsForTable.ts b/frontend/src/apollo/queries/program/AllProgramsForTable.ts
@@ -0,0 +1,59 @@
+import { gql } from '@apollo/client';
+
+export const AllProgramsForTable = gql`
+  query AllProgramsForTable(
+    $before: String
+    $after: String
+    $first: Int
+    $last: Int
+    $status: [String]
+    $sector: [String]
+    $businessArea: String!
+    $search: String
+    $numberOfHouseholds: String
+    $budget: String
+    $startDate: Date
+    $endDate: Date
+    $orderBy: String
+    $dataCollectingType: String
+  ) {
+    allPrograms(
+      before: $before
+      after: $after
+      first: $first
+      last: $last
+      status: $status
+      sector: $sector
+      businessArea: $businessArea
+      search: $search
+      numberOfHouseholds: $numberOfHouseholds
+      budget: $budget
+      orderBy: $orderBy
+      startDate: $startDate
+      endDate: $endDate
+      dataCollectingType: $dataCollectingType
+    ) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        endCursor
+        startCursor
+      }
+      totalCount
+      edgeCount
+      edges {
+        cursor
+        node {
+          id
+          name
+          startDate
+          endDate
+          status
+          budget
+          sector
+          totalNumberOfHouseholds
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/src/containers/tables/ProgrammesTable/ProgrammesHeadCells.tsx b/frontend/src/containers/tables/ProgrammesTable/ProgrammesHeadCells.tsx
@@ -1,8 +1,8 @@
-import { AllProgramsQuery } from '@generated/graphql';
+import { AllProgramsForTableQuery } from '@generated/graphql';
 import { HeadCell } from '@components/core/Table/EnhancedTableHead';
 
 export const headCells: HeadCell<
-AllProgramsQuery['allPrograms']['edges'][number]['node']
+  AllProgramsForTableQuery['allPrograms']['edges'][number]['node']
 >[] = [
   {
     disablePadding: false,

diff --git a/frontend/src/containers/tables/ProgrammesTable/ProgrammesTable.test.tsx b/frontend/src/containers/tables/ProgrammesTable/ProgrammesTable.test.tsx
@@ -3,10 +3,9 @@ import * as React from 'react';
 import { act } from '@testing-library/react';
 import wait from 'waait';
 import { ProgrammesTable } from '.';
-import { render, ApolloLoadingLink } from '../../../testUtils/testUtils';
+import { render } from '../../../testUtils/testUtils';
 import { fakeProgramChoices } from '../../../../fixtures/programs/fakeProgramChoices';
 import { fakeApolloAllPrograms } from '../../../../fixtures/programs/fakeApolloAllPrograms';
-import {ApolloLink} from "@apollo/client";
 
 describe('containers/tables/ProgrammesTable', () => {
   const initialFilter = {
@@ -39,10 +38,7 @@ describe('containers/tables/ProgrammesTable', () => {
 
   it('should render loading', () => {
     const { container } = render(
-      <MockedProvider
-        addTypename={false}
-        mocks={fakeApolloAllPrograms}
-      >
+      <MockedProvider addTypename={false} mocks={fakeApolloAllPrograms}>
         <ProgrammesTable
           businessArea="afghanistan"
           filter={initialFilter}

diff --git a/frontend/src/containers/tables/ProgrammesTable/ProgrammesTable.tsx b/frontend/src/containers/tables/ProgrammesTable/ProgrammesTable.tsx
@@ -1,10 +1,10 @@
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  AllProgramsQuery,
-  AllProgramsQueryVariables,
+  AllProgramsForTableQuery,
+  AllProgramsForTableQueryVariables,
   ProgrammeChoiceDataQuery,
-  useAllProgramsQuery,
+  useAllProgramsForTableQuery,
 } from '@generated/graphql';
 import { TableWrapper } from '@components/core/TableWrapper';
 import { UniversalTable } from '../UniversalTable';
@@ -23,7 +23,7 @@ export function ProgrammesTable({
   choicesData,
 }: ProgrammesTableProps): ReactElement {
   const { t } = useTranslation();
-  const initialVariables: AllProgramsQueryVariables = {
+  const initialVariables: AllProgramsForTableQueryVariables = {
     businessArea,
     search: filter.search,
     startDate: filter.startDate || null,
@@ -40,12 +40,12 @@ export function ProgrammesTable({
   return (
     <TableWrapper>
       <UniversalTable<
-      AllProgramsQuery['allPrograms']['edges'][number]['node'],
-      AllProgramsQueryVariables
+        AllProgramsForTableQuery['allPrograms']['edges'][number]['node'],
+        AllProgramsForTableQueryVariables
       >
         title={t('Programmes')}
         headCells={headCells}
-        query={useAllProgramsQuery}
+        query={useAllProgramsForTableQuery}
         queriedObjectName="allPrograms"
         initialVariables={initialVariables}
         renderRow={(row) => (

diff --git a/frontend/src/containers/tables/ProgrammesTable/ProgrammesTableRow.tsx b/frontend/src/containers/tables/ProgrammesTable/ProgrammesTableRow.tsx
@@ -1,7 +1,10 @@
 import TableCell from '@mui/material/TableCell';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AllProgramsQuery, ProgrammeChoiceDataQuery } from '@generated/graphql';
+import {
+  AllProgramsForTableQuery,
+  ProgrammeChoiceDataQuery,
+} from '@generated/graphql';
 import { BlackLink } from '@components/core/BlackLink';
 import { StatusBox } from '@components/core/StatusBox';
 import { ClickableTableRow } from '@components/core/Table/ClickableTableRow';
@@ -14,7 +17,7 @@ import {
 } from '@utils/utils';
 
 interface ProgrammesTableRowProps {
-  program: AllProgramsQuery['allPrograms']['edges'][number]['node'];
+  program: AllProgramsForTableQuery['allPrograms']['edges'][number]['node'];
   choicesData: ProgrammeChoiceDataQuery;
 }