Use client resolver for task comment count

Author: ceolson01

src/data/fragments.graphql

@@ -44,6 +44,7 @@ fragment CreateTaskFields on Task {
     nativeTokenAddress
   }
   colonyAddress
+  commentCount @client
   createdAt
   creatorAddress
   dueDate

src/data/generated.ts

@@ -1225,6 +1225,7 @@ export type Task = {
   events: Array<Event>,
   payouts: Array<TaskPayout>,
   txHash?: Maybe<Scalars['String']>,
+  commentCount: Scalars['Int'],
   finalizedPayment?: Maybe<TaskFinalizedPayment>,
 };
 
@@ -1369,7 +1370,7 @@ export type PersistentTaskPayoutsFragment = { payouts: Array<(
   )> };
 
 export type CreateTaskFieldsFragment = (
-  Pick<Task, 'id' | 'assignedWorkerAddress' | 'cancelledAt' | 'colonyAddress' | 'createdAt' | 'creatorAddress' | 'dueDate' | 'ethDomainId' | 'ethSkillId' | 'finalizedAt' | 'title' | 'workRequestAddresses' | 'txHash'>
+  Pick<Task, 'id' | 'assignedWorkerAddress' | 'cancelledAt' | 'colonyAddress' | 'commentCount' | 'createdAt' | 'creatorAddress' | 'dueDate' | 'ethDomainId' | 'ethSkillId' | 'finalizedAt' | 'title' | 'workRequestAddresses' | 'txHash'>
   & { assignedWorker: Maybe<(
     Pick<User, 'id'>
     & { profile: Pick<UserProfile, 'avatarHash'> }
@@ -1885,7 +1886,7 @@ export type TaskQueryVariables = {
 
 
 export type TaskQuery = { task: (
-    Pick<Task, 'id' | 'assignedWorkerAddress' | 'cancelledAt' | 'colonyAddress' | 'createdAt' | 'creatorAddress' | 'description' | 'dueDate' | 'ethDomainId' | 'ethSkillId' | 'ethPotId' | 'finalizedAt' | 'title' | 'workInviteAddresses' | 'workRequestAddresses' | 'txHash'>
+    Pick<Task, 'id' | 'assignedWorkerAddress' | 'cancelledAt' | 'colonyAddress' | 'commentCount' | 'createdAt' | 'creatorAddress' | 'description' | 'dueDate' | 'ethDomainId' | 'ethSkillId' | 'ethPotId' | 'finalizedAt' | 'title' | 'workInviteAddresses' | 'workRequestAddresses' | 'txHash'>
     & { assignedWorker: Maybe<(
       Pick<User, 'id'>
       & { profile: Pick<UserProfile, 'avatarHash' | 'displayName' | 'username' | 'walletAddress'> }
@@ -1980,7 +1981,7 @@ export type UserTasksQueryVariables = {
 export type UserTasksQuery = { user: (
     Pick<User, 'id'>
     & { tasks: Array<(
-      Pick<Task, 'id' | 'assignedWorkerAddress' | 'cancelledAt' | 'colonyAddress' | 'createdAt' | 'creatorAddress' | 'dueDate' | 'ethDomainId' | 'ethSkillId' | 'finalizedAt' | 'title' | 'workRequestAddresses' | 'txHash'>
+      Pick<Task, 'id' | 'assignedWorkerAddress' | 'cancelledAt' | 'colonyAddress' | 'commentCount' | 'createdAt' | 'creatorAddress' | 'dueDate' | 'ethDomainId' | 'ethSkillId' | 'finalizedAt' | 'title' | 'workRequestAddresses' | 'txHash'>
       & { assignedWorker: Maybe<(
         Pick<User, 'id'>
         & { profile: Pick<UserProfile, 'avatarHash'> }
@@ -2096,7 +2097,7 @@ export type ColonyTasksQueryVariables = {
 export type ColonyTasksQuery = { colony: (
     Pick<Colony, 'id'>
     & { tasks: Array<(
-      Pick<Task, 'id' | 'assignedWorkerAddress' | 'cancelledAt' | 'colonyAddress' | 'createdAt' | 'creatorAddress' | 'dueDate' | 'ethDomainId' | 'ethSkillId' | 'finalizedAt' | 'title' | 'workRequestAddresses' | 'txHash'>
+      Pick<Task, 'id' | 'assignedWorkerAddress' | 'cancelledAt' | 'colonyAddress' | 'commentCount' | 'createdAt' | 'creatorAddress' | 'dueDate' | 'ethDomainId' | 'ethSkillId' | 'finalizedAt' | 'title' | 'workRequestAddresses' | 'txHash'>
       & { assignedWorker: Maybe<(
         Pick<User, 'id'>
         & { profile: Pick<UserProfile, 'avatarHash'> }
@@ -2289,6 +2290,7 @@ export const CreateTaskFieldsFragmentDoc = gql`
     nativeTokenAddress
   }
   colonyAddress
+  commentCount @client
   createdAt
   creatorAddress
   dueDate
@@ -4475,6 +4477,7 @@ export const TaskDocument = gql`
       nativeTokenAddress
     }
     colonyAddress
+    commentCount @client
     createdAt
     creator {
       id
@@ -4844,6 +4847,7 @@ export const UserTasksDocument = gql`
         nativeTokenAddress
       }
       colonyAddress
+      commentCount @client
       createdAt
       creatorAddress
       dueDate
@@ -5323,6 +5327,7 @@ export const ColonyTasksDocument = gql`
         nativeTokenAddress
       }
       colonyAddress
+      commentCount @client
       createdAt
       creatorAddress
       dueDate

src/data/queries.graphql

@@ -24,6 +24,7 @@ query Task($id: String!) {
       nativeTokenAddress
     }
     colonyAddress
+    commentCount @client
     createdAt
     creator {
       id
@@ -203,6 +204,7 @@ query UserTasks($address: String!) {
         nativeTokenAddress
       }
       colonyAddress
+      commentCount @client
       createdAt
       creatorAddress
       dueDate
@@ -328,6 +330,7 @@ query ColonyTasks($address: String!) {
         nativeTokenAddress
       }
       colonyAddress
+      commentCount @client
       createdAt
       creatorAddress
       dueDate

src/data/task.ts

@@ -5,9 +5,13 @@ import { ContextType } from '~context/index';
 import { createAddress } from '~utils/web3';
 
 import { getToken } from './token';
+import { EventType } from './index';
 
 export const taskResolvers = ({ colonyManager }: ContextType): Resolvers => ({
   Task: {
+    commentCount({ events }): number {
+      return events.filter(({ type }) => type === EventType.TaskMessage).length;
+    },
     async finalizedPayment({ colonyAddress, finalizedAt, ethPotId }) {
       if (!finalizedAt || !ethPotId) return null;
       const colonyClient = await colonyManager.getColonyClient(colonyAddress);

src/data/typeDefs.ts

@@ -54,6 +54,7 @@ export default gql`
   }
 
   extend type Task {
+    commentCount: Int!
     finalizedPayment: TaskFinalizedPayment
   }
 

src/modules/dashboard/components/TaskList/TaskListItem.tsx

@@ -1,13 +1,13 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import BigNumber from 'bn.js';
 
 import Icon from '~core/Icon';
 import { AbbreviatedNumeral } from '~core/Numeral';
 import PayoutsList from '~core/PayoutsList';
 import { TableRow, TableCell } from '~core/Table';
-import { AnyTask, Payouts, EventType } from '~data/index';
+import { AnyTask, Payouts } from '~data/index';
 import HookedUserAvatar from '~users/HookedUserAvatar';
 
 import styles from './TaskListItem.css';
@@ -42,7 +42,7 @@ const TaskListItem = ({ task }: Props) => {
   const {
     id: draftId,
     assignedWorkerAddress,
-    events,
+    commentCount,
     payouts,
     title = defaultTitle,
     colony: { colonyName, nativeTokenAddress },
@@ -57,11 +57,6 @@ const TaskListItem = ({ task }: Props) => {
     });
   }, [colonyName, draftId, history]);
 
-  const commentCount = useMemo<number>(
-    () => events.filter(({ type }) => type === EventType.TaskMessage).length,
-    [events],
-  );
-
   return (
     <TableRow className={styles.globalLink} onClick={() => handleClick()}>
       <TableCell className={styles.taskDetails}>