Merge pull request #2814 from JoinColony/fix/2530-agreements-pagination

Fix/2530 agreements pagination

Author: mmioana

src/components/common/ColonyActionsTable/partials/ActionDescription/ActionDescription.tsx

@@ -26,6 +26,7 @@ const ActionDescription: FC<ActionDescriptionProps> = ({
     initiatorUser: user,
     initiatorAddress,
     metadata,
+    decisionData,
     isMotion,
     motionData,
     motionState,
@@ -100,7 +101,10 @@ const ActionDescription: FC<ActionDescriptionProps> = ({
               },
             )}
           >
-            {metadata?.customTitle || actionMetadataDescription || '-'}
+            {metadata?.customTitle ||
+              decisionData?.title ||
+              actionMetadataDescription ||
+              '-'}
           </p>
           {colony && (
             <p

src/components/frame/v5/pages/AgreementsPage/hooks.ts

@@ -1,44 +1,117 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import {
   useGetColonyActionsQuery,
   ColonyActionType,
   ModelSortDirection,
+  useGetColonyActionQuery,
 } from '~gql';
 import {
   filterActionByMotionState,
   makeWithMotionStateMapper,
 } from '~hooks/useActivityFeed/helpers.ts';
 import useNetworkMotionStates from '~hooks/useNetworkMotionStates.ts';
 import { notNull } from '~utils/arrays/index.ts';
+import { isTransactionFormat } from '~utils/web3/index.ts';
 
 import { useFiltersContext } from './FiltersContext/FiltersContext.ts';
 
-export const useGetAgreements = () => {
+const QUERY_PAGE_SIZE = 20;
+
+const useGetAllAgreements = () => {
   const {
     colony: { colonyAddress },
   } = useColonyContext();
-  const { activeFilters, searchFilter } = useFiltersContext();
-  const { data, loading } = useGetColonyActionsQuery({
+
+  const { data, loading, fetchMore, refetch } = useGetColonyActionsQuery({
     variables: {
       colonyAddress,
       filter: {
         type: { eq: ColonyActionType.CreateDecisionMotion },
       },
       sortDirection: ModelSortDirection.Desc,
+      limit: QUERY_PAGE_SIZE,
     },
     fetchPolicy: 'network-only',
+    onCompleted: (newData) => {
+      if (newData?.getActionsByColony?.nextToken) {
+        fetchMore({
+          variables: { nextToken: newData?.getActionsByColony?.nextToken },
+          updateQuery: (prev, { fetchMoreResult }) => {
+            if (!fetchMoreResult) return prev;
+
+            // Here, combine the previous items with the newly fetched items
+            return {
+              ...prev,
+              getActionsByColony: {
+                ...prev.getActionsByColony,
+                items: [
+                  ...(prev.getActionsByColony?.items ?? []),
+                  ...(fetchMoreResult.getActionsByColony?.items ?? []),
+                ],
+                nextToken: fetchMoreResult?.getActionsByColony?.nextToken,
+              },
+            };
+          },
+        });
+      }
+    },
   });
 
   const agreementsData = data?.getActionsByColony?.items.filter(notNull);
+
+  return {
+    agreementsData,
+    loading,
+    refetchAgreements: refetch,
+  };
+};
+
+export const useGetCurrentOpenedAgreement = () => {
+  const [searchParams] = useSearchParams();
+  const transactionHash = searchParams.get('tx');
+  const isInvalidTx = !isTransactionFormat(transactionHash ?? undefined);
+  const { data: actionData } = useGetColonyActionQuery({
+    skip: isInvalidTx,
+    variables: {
+      transactionHash: transactionHash ?? '',
+    },
+  });
+  const action = actionData?.getColonyAction;
+  const motionData = action?.motionData;
+
+  return action?.type === ColonyActionType.CreateDecisionMotion
+    ? motionData
+    : null;
+};
+
+export const useGetAgreements = () => {
+  const currentAgreement = useGetCurrentOpenedAgreement();
+
+  const { activeFilters, searchFilter } = useFiltersContext();
+
+  const { agreementsData, refetchAgreements, loading } = useGetAllAgreements();
+
   const motionIds = useMemo(
     () =>
       agreementsData
         ?.map((action) => action?.motionData?.motionId ?? '')
         .filter(Boolean) || [],
     [agreementsData],
   );
+
+  useEffect(() => {
+    if (
+      !loading &&
+      currentAgreement?.motionId &&
+      !motionIds.includes(currentAgreement?.motionId)
+    ) {
+      refetchAgreements();
+    }
+  }, [currentAgreement?.motionId, motionIds, loading, refetchAgreements]);
+
   const {
     motionStatesMap,
     loading: motionStatesLoading,

src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/ActionSidebarContent.tsx

@@ -15,6 +15,7 @@ import { ActionForm } from '~shared/Fields/index.ts';
 import { DecisionMethod } from '~types/actions.ts';
 import { getDraftDecisionFromStore } from '~utils/decisions.ts';
 import { formatText } from '~utils/intl.ts';
+import { isQueryActive } from '~utils/isQueryActive.ts';
 import FormTextareaBase from '~v5/common/Fields/TextareaBase/FormTextareaBase.tsx';
 import NotificationBanner from '~v5/shared/NotificationBanner/index.ts';
 
@@ -222,9 +223,11 @@ const ActionSidebarContent: FC<ActionSidebarContentProps> = ({
           className="flex h-full flex-col"
           innerRef={formRef}
           onSuccess={() => {
-            client.refetchQueries({
-              include: [SearchActionsDocument],
-            });
+            if (isQueryActive('SearchActions')) {
+              client.refetchQueries({
+                include: [SearchActionsDocument],
+              });
+            }
           }}
         >
           <ActionSidebarFormContent

src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx

@@ -81,15 +81,18 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
     return stopPollingAction;
   }, [isClaimed, stopPollingAction]);
 
-  /* Update colony object when motion gets finalized. */
+  /* Update colony object when motion gets finalized or is agreement. */
   useEffect(() => {
-    if (actionData.motionData.isFinalized && !hasFinalizedHandlerRun.current) {
+    if (
+      (isMotionAgreement || isMotionFinalized) &&
+      !hasFinalizedHandlerRun.current
+    ) {
       refetchColony();
       setIsPolling(false);
       handleMotionFinalized(actionData);
       hasFinalizedHandlerRun.current = true;
     }
-  }, [actionData, refetchColony]);
+  }, [isMotionAgreement, isMotionFinalized, actionData, refetchColony]);
 
   let action = {
     actionType: ActionTypes.MOTION_FINALIZE,

src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/utils.ts

@@ -1,5 +1,7 @@
-import { ColonyActionType } from '~gql';
+import { apolloClient } from '~apollo';
+import { ColonyActionType, SearchActionsDocument } from '~gql';
 import { type MotionAction } from '~types/motions.ts';
+import { isQueryActive } from '~utils/isQueryActive.ts';
 import { updateContributorVerifiedStatus } from '~utils/members.ts';
 
 export const handleMotionFinalized = (action: MotionAction) => {
@@ -24,6 +26,13 @@ export const handleMotionFinalized = (action: MotionAction) => {
       }
       break;
     }
+    case ColonyActionType.CreateDecisionMotion: {
+      if (isQueryActive('SearchActions')) {
+        apolloClient.refetchQueries({ include: [SearchActionsDocument] });
+      }
+
+      break;
+    }
     default: {
       break;
     }

src/components/v5/common/CompletedAction/partials/CreateDecision/CreateDecision.tsx

@@ -26,11 +26,11 @@ interface CreateDecisionProps {
 const MSG = defineMessages({
   defaultTitle: {
     id: `${displayName}.defaultTitle`,
-    defaultMessage: 'Create decision',
+    defaultMessage: 'Create agreement',
   },
   subtitle: {
     id: `${displayName}.subtitle`,
-    defaultMessage: 'Decision by {user}',
+    defaultMessage: 'Agreement by {user}',
   },
 });
 

src/hooks/useActivityFeed/helpers.ts

@@ -141,9 +141,6 @@ export const getBaseSearchActionsFilterVariable = (
   showInActionsList: {
     eq: true,
   },
-  colonyDecisionId: {
-    exists: false,
-  },
   isMotionFinalization: {
     ne: true,
   },

src/i18n/en-actions.ts

@@ -81,7 +81,7 @@ const actionsMessageDescriptors = {
       ${ColonyActionType.EmitDomainReputationPenaltyMotion} {Manage reputation}
       ${ColonyActionType.EmitDomainReputationReward} {Manage reputation}
       ${ColonyActionType.EmitDomainReputationRewardMotion} {Manage reputation}
-      ${ColonyActionType.CreateDecisionMotion} {Decision}
+      ${ColonyActionType.CreateDecisionMotion} {Agreement}
       ${ColonyActionType.AddVerifiedMembers} {Manage verified members}
       ${ColonyActionType.AddVerifiedMembersMotion} {Manage verified members}
       ${ColonyActionType.RemoveVerifiedMembers} {Manage verified members}

src/utils/isQueryActive.ts

@@ -0,0 +1,8 @@
+import { apolloClient } from '~apollo';
+
+export const isQueryActive = (queryName: string) => {
+  const activeQueries = apolloClient.getObservableQueries();
+  return Array.from(activeQueries.values()).some((query) => {
+    return query.queryName?.includes(queryName);
+  });
+};