Use previous mass selection ids

Also speeds up loading mass selection ids by not waiting for the contacts or tasks to load first.
CruGlobal · Oct 25, 2024 · 6e9c8e4 · 6e9c8e4
1 parent 5890635
commit 6e9c8e4
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 89 deletions.
diff --git a/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx
@@ -184,18 +184,19 @@ const TasksPage: React.FC = () => {
 
   //#region Mass Actions
 
-  const taskCount = data?.tasks.totalCount ?? 0;
-  const { data: allTasks } = useGetTaskIdsForMassSelectionQuery({
-    variables: {
-      accountListId,
-      first: taskCount,
-      tasksFilter,
-    },
-    skip: taskCount === 0,
-  });
+  const { data: allTasks, previousData: allTasksPrevious } =
+    useGetTaskIdsForMassSelectionQuery({
+      variables: {
+        accountListId,
+        tasksFilter,
+      },
+    });
+  // When the next batch of task ids is loading, use the previous batch of task ids in the
+  // meantime to avoid throwing out the selected task ids.
   const allTaskIds = useMemo(
-    () => allTasks?.tasks.nodes.map((task) => task.id) ?? [],
-    [allTasks],
+    () =>
+      (allTasks ?? allTasksPrevious)?.tasks.nodes.map((task) => task.id) ?? [],
+    [allTasks, allTasksPrevious],
   );
 
   const {

diff --git a/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx b/src/components/Contacts/ContactDetails/ContactTasksTab/ContactTasksTab.tsx
@@ -137,17 +137,19 @@ export const ContactTasksTab: React.FC<ContactTasksTabProps> = ({
     [starredFilter, searchTerm],
   );
   const taskCount = data?.tasks.totalCount ?? 0;
-  const { data: allTasks } = useGetTaskIdsForMassSelectionQuery({
-    variables: {
-      accountListId,
-      first: taskCount,
-      tasksFilter,
-    },
-    skip: taskCount === 0,
-  });
+  const { data: allTasks, previousData: allTasksPrevious } =
+    useGetTaskIdsForMassSelectionQuery({
+      variables: {
+        accountListId,
+        tasksFilter,
+      },
+    });
+  // When the next batch of task ids is loading, use the previous batch of task ids in the
+  // meantime to avoid throwing out the selected task ids.
   const allTaskIds = useMemo(
-    () => allTasks?.tasks.nodes.map((task) => task.id) ?? [],
-    [allTasks],
+    () =>
+      (allTasks ?? allTasksPrevious)?.tasks.nodes.map((task) => task.id) ?? [],
+    [allTasks, allTasksPrevious],
   );
   //#region Mass Actions
   const {

diff --git a/src/components/Contacts/ContactsContext/ContactsContext.tsx b/src/components/Contacts/ContactsContext/ContactsContext.tsx
@@ -186,18 +186,21 @@ export const ContactsProvider: React.FC<ContactsContextProps> = ({
 
   //#region Mass Actions
 
-  const contactCount = data?.contacts.totalCount ?? 0;
-  const { data: allContacts } = useGetIdsForMassSelectionQuery({
-    variables: {
-      accountListId,
-      first: contactCount,
-      contactsFilters,
-    },
-    skip: contactCount === 0,
-  });
+  const { data: allContacts, previousData: allContactsPrevious } =
+    useGetIdsForMassSelectionQuery({
+      variables: {
+        accountListId,
+        contactsFilters,
+      },
+    });
+  // When the next batch of contact ids is loading, use the previous batch of contact ids in the
+  // meantime to avoid throwing out the selected contact ids.
   const allContactIds = useMemo(
-    () => allContacts?.contacts.nodes.map((contact) => contact.id) ?? [],
-    [allContacts],
+    () =>
+      (allContacts ?? allContactsPrevious)?.contacts.nodes.map(
+        (contact) => contact.id,
+      ) ?? [],
+    [allContacts, allContactsPrevious],
   );
 
   const {

diff --git a/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.tsx b/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.tsx
@@ -88,26 +88,28 @@ export const PartnerGivingAnalysisReport = forwardRef<
       ? Object.keys(activeFilters).length > 0
       : false;
 
-    const { data, loading } = useGetPartnerGivingAnalysisReportQuery({
-      variables: {
-        input: {
-          accountListId,
-          // Page 1 is the first page for the API
-          page: page + 1,
-          pageSize: limit,
-          sortField: orderBy ?? '',
-          sortDirection:
-            order === 'asc'
-              ? SortDirection.Ascending
-              : SortDirection.Descending,
-          contactFilters,
+    const { data, previousData, loading } =
+      useGetPartnerGivingAnalysisReportQuery({
+        variables: {
+          input: {
+            accountListId,
+            // Page 1 is the first page for the API
+            page: page + 1,
+            pageSize: limit,
+            sortField: orderBy ?? '',
+            sortDirection:
+              order === 'asc'
+                ? SortDirection.Ascending
+                : SortDirection.Descending,
+            contactFilters,
+          },
         },
-      },
-    });
+      });
     const contacts = data?.partnerGivingAnalysisReport.contacts ?? [];
 
-    const contactCount = data?.partnerGivingAnalysisReport?.totalContacts ?? 0;
-    const { data: allContacts } =
+    const contactCount =
+      (data ?? previousData)?.partnerGivingAnalysisReport?.totalContacts ?? 0;
+    const { data: allContacts, previousData: allContactsPrevious } =
       useGetPartnerGivingAnalysisIdsForMassSelectionQuery({
         variables: {
           input: {
@@ -121,12 +123,15 @@ export const PartnerGivingAnalysisReport = forwardRef<
         },
         skip: contactCount === 0,
       });
+    // When the next batch of contact ids is loading, use the previous batch of contact ids in the
+    // meantime to avoid throwing out the selected contact ids.
     const allContactIds = useMemo(
       () =>
-        allContacts?.partnerGivingAnalysisReport?.contacts.map(
-          (contact) => contact.id,
-        ) ?? [],
-      [allContacts],
+        (
+          allContacts ?? allContactsPrevious
+        )?.partnerGivingAnalysisReport?.contacts.map((contact) => contact.id) ??
+        [],
+      [allContacts, allContactsPrevious],
     );
 
     const {

diff --git a/src/components/Tool/Appeal/AppealsContext/AppealsContext.tsx b/src/components/Tool/Appeal/AppealsContext/AppealsContext.tsx
@@ -173,38 +173,45 @@ export const AppealsProvider: React.FC<AppealsContextProps> = ({
     },
     skip: !accountListId,
   });
-  const { data } = contactsQueryResult;
 
   //#region Mass Actions
 
-  const contactCount = data?.contacts.totalCount ?? 0;
-  const { data: allContacts } = useGetIdsForMassSelectionQuery({
-    variables: {
-      accountListId,
-      first: contactCount,
-      contactsFilters,
-    },
-    skip: contactCount === 0,
-  });
+  const { data: allContacts, previousData: allContactsPrevious } =
+    useGetIdsForMassSelectionQuery({
+      variables: {
+        accountListId,
+        contactsFilters,
+      },
+    });
   // In the flows view, we need the total count of all contacts in every column, but the API
   // filters out contacts excluded from an appeal. We have to load excluded contacts also and
   // manually merge them with the other contacts.
-  const { data: allExcludedContacts } = useGetIdsForMassSelectionQuery({
+  const {
+    data: allExcludedContacts,
+    previousData: allExcludedContactsPrevious,
+  } = useGetIdsForMassSelectionQuery({
     variables: {
       accountListId,
-      first: contactCount,
       contactsFilters: { ...contactsFilters, appealStatus: 'excluded' },
     },
     // Skip this query when there is an appealStatus filter from the list view
-    skip: contactCount === 0 || !!contactsFilters.appealStatus,
+    skip: !!contactsFilters.appealStatus,
   });
+  // When the next batch of contact ids is loading, use the previous batch of contact ids in the
+  // meantime to avoid throwing out the selected contact ids.
   const allContactIds = useMemo(
     () =>
       [
-        ...(allContacts?.contacts.nodes ?? []),
-        ...(allExcludedContacts?.contacts.nodes ?? []),
+        ...((allContacts ?? allContactsPrevious)?.contacts.nodes ?? []),
+        ...((allExcludedContacts ?? allExcludedContactsPrevious)?.contacts
+          .nodes ?? []),
       ].map((contact) => contact.id),
-    [allContacts, allExcludedContacts],
+    [
+      allContacts,
+      allContactsPrevious,
+      allExcludedContacts,
+      allExcludedContactsPrevious,
+    ],
   );
 
   const {

diff --git a/src/components/Tool/Appeal/Flow/ContactFlowColumn/ContactFlowColumn.tsx b/src/components/Tool/Appeal/Flow/ContactFlowColumn/ContactFlowColumn.tsx
@@ -100,19 +100,21 @@ export const ContactFlowColumn: React.FC<Props> = ({
     skip: !accountListId || !appealStatus,
   });
 
-  const contactCount = data?.contacts.totalCount ?? 0;
-  const { data: allContacts } = useGetIdsForMassSelectionQuery({
-    variables: {
-      accountListId,
-      first: contactCount,
-      contactsFilters,
-    },
-    skip: contactCount === 0,
-  });
-
+  const { data: allContacts, previousData: allContactsPrevious } =
+    useGetIdsForMassSelectionQuery({
+      variables: {
+        accountListId,
+        contactsFilters,
+      },
+    });
+  // When the next batch of contact ids is loading, use the previous batch of contact ids in the
+  // meantime to avoid throwing out the selected contact ids.
   const allContactIds = useMemo(
-    () => allContacts?.contacts.nodes.map((contact) => contact.id) ?? [],
-    [allContacts],
+    () =>
+      (allContacts ?? allContactsPrevious)?.contacts.nodes.map(
+        (contact) => contact.id,
+      ) ?? [],
+    [allContacts, allContactsPrevious],
   );
 
   const { data: excludedContacts } = useExcludedAppealContactsQuery({

diff --git a/src/hooks/GetIdsForMassSelection.graphql b/src/hooks/GetIdsForMassSelection.graphql
@@ -1,12 +1,11 @@
 query GetIdsForMassSelection(
   $accountListId: ID!
-  $first: Int!
   $contactsFilters: ContactFilterSetInput
 ) {
   contacts(
     accountListId: $accountListId
-    first: $first
     contactsFilter: $contactsFilters
+    first: 20000 # Maximum allowed by the API
   ) {
     nodes {
       id
@@ -16,13 +15,12 @@ query GetIdsForMassSelection(
 
 query GetTaskIdsForMassSelection(
   $accountListId: ID!
-  $first: Int!
   $tasksFilter: TaskFilterSetInput
 ) {
   tasks(
     accountListId: $accountListId
-    first: $first
     tasksFilter: $tasksFilter
+    first: 1000 # Maximum allowed by the API
   ) {
     nodes {
       id

diff --git a/src/hooks/useUpdateTasksQueries.ts b/src/hooks/useUpdateTasksQueries.ts
@@ -57,10 +57,7 @@ export const useUpdateTasksQueries = (): {
           GetTaskIdsForMassSelectionQueryVariables
         >({
           query: GetTaskIdsForMassSelectionDocument,
-          variables: {
-            ...variables,
-            first: observableQuery.getLastResult()?.data.tasks.nodes.length,
-          },
+          variables: variables,
         });
         if (!taskIds) {
           return;