Add comment count to task list item

Author: ceolson01

src/data/fragments.graphql

@@ -49,6 +49,10 @@ fragment CreateTaskFields on Task {
   dueDate
   ethDomainId
   ethSkillId
+  events {
+    id
+    type
+  }
   finalizedAt
   title
   workRequestAddresses

src/data/generated.ts

@@ -1373,7 +1373,7 @@ export type CreateTaskFieldsFragment = (
   & { assignedWorker: Maybe<(
     Pick<User, 'id'>
     & { profile: Pick<UserProfile, 'avatarHash'> }
-  )>, colony: Pick<Colony, 'id' | 'colonyName' | 'displayName' | 'nativeTokenAddress'> }
+  )>, colony: Pick<Colony, 'id' | 'colonyName' | 'displayName' | 'nativeTokenAddress'>, events: Array<Pick<Event, 'id' | 'type'>> }
   & PayoutsFragment
 );
 
@@ -1892,7 +1892,7 @@ export type TaskQuery = { task: (
     )>, colony: Pick<Colony, 'id' | 'colonyAddress' | 'colonyName' | 'avatarHash' | 'displayName' | 'nativeTokenAddress'>, creator: (
       Pick<User, 'id'>
       & { profile: Pick<UserProfile, 'avatarHash' | 'displayName' | 'username' | 'walletAddress'> }
-    ), workInvites: Array<(
+    ), events: Array<Pick<Event, 'id' | 'type'>>, workInvites: Array<(
       Pick<User, 'id'>
       & { profile: Pick<UserProfile, 'avatarHash' | 'displayName' | 'username' | 'walletAddress'> }
     )>, workRequests: Array<(
@@ -1984,7 +1984,7 @@ export type UserTasksQuery = { user: (
       & { assignedWorker: Maybe<(
         Pick<User, 'id'>
         & { profile: Pick<UserProfile, 'avatarHash'> }
-      )>, colony: Pick<Colony, 'id' | 'colonyName' | 'displayName' | 'nativeTokenAddress'> }
+      )>, colony: Pick<Colony, 'id' | 'colonyName' | 'displayName' | 'nativeTokenAddress'>, events: Array<Pick<Event, 'id' | 'type'>> }
       & PayoutsFragment
     )> }
   ) };
@@ -2100,7 +2100,7 @@ export type ColonyTasksQuery = { colony: (
       & { assignedWorker: Maybe<(
         Pick<User, 'id'>
         & { profile: Pick<UserProfile, 'avatarHash'> }
-      )>, colony: Pick<Colony, 'id' | 'colonyName' | 'displayName' | 'nativeTokenAddress'> }
+      )>, colony: Pick<Colony, 'id' | 'colonyName' | 'displayName' | 'nativeTokenAddress'>, events: Array<Pick<Event, 'id' | 'type'>> }
       & PayoutsFragment
     )> }
   ) };
@@ -2294,6 +2294,10 @@ export const CreateTaskFieldsFragmentDoc = gql`
   dueDate
   ethDomainId
   ethSkillId
+  events {
+    id
+    type
+  }
   finalizedAt
   title
   workRequestAddresses
@@ -4487,6 +4491,10 @@ export const TaskDocument = gql`
     ethDomainId
     ethSkillId
     ethPotId
+    events {
+      id
+      type
+    }
     finalizedAt
     title
     workInvites {
@@ -4841,6 +4849,10 @@ export const UserTasksDocument = gql`
       dueDate
       ethDomainId
       ethSkillId
+      events {
+        id
+        type
+      }
       finalizedAt
       title
       workRequestAddresses
@@ -5316,6 +5328,10 @@ export const ColonyTasksDocument = gql`
       dueDate
       ethDomainId
       ethSkillId
+      events {
+        id
+        type
+      }
       finalizedAt
       title
       workRequestAddresses

src/data/queries.graphql

@@ -40,6 +40,10 @@ query Task($id: String!) {
     ethDomainId
     ethSkillId
     ethPotId
+    events {
+      id
+      type
+    }
     finalizedAt
     title
     workInvites {
@@ -204,6 +208,10 @@ query UserTasks($address: String!) {
       dueDate
       ethDomainId
       ethSkillId
+      events {
+        id
+        type
+      }
       finalizedAt
       title
       workRequestAddresses
@@ -325,6 +333,10 @@ query ColonyTasks($address: String!) {
       dueDate
       ethDomainId
       ethSkillId
+      events {
+        id
+        type
+      }
       finalizedAt
       title
       workRequestAddresses

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

@@ -15,12 +15,18 @@ td.taskLoading {
 }
 
 td.taskDetails {
-  flex-wrap: wrap;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: flex-start;
   padding: cellPaddingVertical 0 cellPaddingVertical cellPaddingHorizontal;
-  width: calc(85% - 74px);
   font-weight: var(--weight-semi);
 }
 
+td.taskDetails > div {
+  width: 100%;
+}
+
 .taskDetailsTitle {
   composes: inlineEllipsis from '~styles/text.css';
   max-width: 80%;
@@ -32,18 +38,30 @@ td.taskDetails {
   color: var(--violet);
 }
 
+.extraInfo {
+  display: flex;
+  align-items: baseline;
+}
+
+.extraInfoItem + .extraInfoItem {
+  margin-left: 20px;
+}
+
 td.taskPayouts {
+  flex-basis: 15%;
   justify-content: flex-end;
   padding: cellPaddingVertical 0;
-  width: 15%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 td.userAvatar {
+  flex-basis: 84px;
+
+  /* !important to override table styles */
+  flex-grow: 0 !important;
   justify-content: center;
   padding: cellPaddingVertical cellPaddingHorizontal calc(cellPaddingVertical - 6px);
   height: 88px;
-  width: 84px;
 }

src/modules/dashboard/components/TaskList/TaskListItem.css.d.ts

@@ -5,5 +5,7 @@ export const taskLoading: string;
 export const taskDetails: string;
 export const taskDetailsTitle: string;
 export const taskDetailsReputation: string;
+export const extraInfo: string;
+export const extraInfoItem: string;
 export const taskPayouts: string;
 export const userAvatar: string;

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

@@ -1,11 +1,12 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import BigNumber from 'bn.js';
 
-import { AnyTask, Payouts } from '~data/index';
-import { TableRow, TableCell } from '~core/Table';
+import { AnyTask, Payouts, EventType } from '~data/index';
+import { AbbreviatedNumeral } from '~core/Numeral';
 import PayoutsList from '~core/PayoutsList';
+import { TableRow, TableCell } from '~core/Table';
 import HookedUserAvatar from '~users/HookedUserAvatar';
 
 import styles from './TaskListItem.css';
@@ -15,6 +16,13 @@ const MSG = defineMessages({
     id: 'dashboard.TaskList.TaskListItem.reputation',
     defaultMessage: '+{reputation} max rep',
   },
+  titleCommentCount: {
+    id: 'dashboard.TaskList.TaskListItem.titleCommentCount',
+    defaultMessage: `{formattedCommentCount} {commentCount, plural,
+      one {comment}
+      other {comments}
+    }`,
+  },
 });
 
 const UserAvatar = HookedUserAvatar();
@@ -27,12 +35,13 @@ const displayName = 'dashboard.TaskList.TaskListItem';
 
 const TaskListItem = ({ task }: Props) => {
   const history = useHistory();
-  const { formatMessage } = useIntl();
+  const { formatMessage, formatNumber } = useIntl();
 
   const defaultTitle = formatMessage({ id: 'task.untitled' });
   const {
     id: draftId,
     assignedWorkerAddress,
+    events,
     payouts,
     title = defaultTitle,
     colony: { colonyName, nativeTokenAddress },
@@ -47,17 +56,44 @@ 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}>
-        <p className={styles.taskDetailsTitle}>{title || defaultTitle}</p>
-        {!!reputation && (
-          <span className={styles.taskDetailsReputation}>
-            <FormattedMessage
-              {...MSG.reputation}
-              values={{ reputation: reputation.toString() }}
-            />
-          </span>
+        <div>
+          <p className={styles.taskDetailsTitle}>{title || defaultTitle}</p>
+        </div>
+        {!!(reputation || commentCount) && (
+          <div className={styles.extraInfo}>
+            {!!reputation && (
+              <div className={styles.extraInfoItem}>
+                <span className={styles.taskDetailsReputation}>
+                  <FormattedMessage
+                    {...MSG.reputation}
+                    values={{ reputation: reputation.toString() }}
+                  />
+                </span>
+              </div>
+            )}
+            {commentCount && (
+              <div className={styles.extraInfoItem}>
+                <AbbreviatedNumeral
+                  formatOptions={{
+                    notation: 'compact',
+                  }}
+                  value={commentCount}
+                  title={formatMessage(MSG.titleCommentCount, {
+                    commentCount,
+                    formattedCommentCount: formatNumber(commentCount),
+                  })}
+                />
+              </div>
+            )}
+          </div>
         )}
       </TableCell>
       <TableCell className={styles.taskPayouts}>