From aaa8ec574d5126e32fe300b662ee8b0a3ee12f47 Mon Sep 17 00:00:00 2001
From: Pallavi Varshney <h20190029g@alumni.bits-pilani.ac.in>
Date: Mon, 23 Oct 2023 02:23:37 -0700
Subject: [PATCH] #2133 added comments icon and count on notes tab (#2186)

* fix

* #2133 added comments icon and count on notes tab

* reverted changes in people-filters.tsx
---
 front/src/generated/graphql.tsx               | 17 ++++++++++++++-
 .../activities/notes/components/NoteCard.tsx  | 21 +++++++++++++++++--
 front/src/testing/mock-data/activities.ts     |  6 +-----
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/front/src/generated/graphql.tsx b/front/src/generated/graphql.tsx
index 17f40f8e3..7ccb56bf9 100644
--- a/front/src/generated/graphql.tsx
+++ b/front/src/generated/graphql.tsx
@@ -3719,7 +3719,22 @@ export type GetActivitiesQueryVariables = Exact<{
 }>;
 
 
-export type GetActivitiesQuery = { __typename?: 'Query', findManyActivities: Array<{ __typename?: 'Activity', id: string, createdAt: string, title?: string | null, body?: string | null, type: ActivityType, completedAt?: string | null, dueAt?: string | null, assignee?: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string, avatarUrl?: string | null } | null, author: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string }, comments?: Array<{ __typename?: 'Comment', id: string, body: string, createdAt: string, updatedAt: string, author: { __typename?: 'User', id: string, displayName: string, firstName?: string | null, lastName?: string | null, avatarUrl?: string | null } }> | null, activityTargets?: Array<{ __typename?: 'ActivityTarget', id: string, companyId?: string | null, personId?: string | null, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null, person?: { __typename?: 'Person', id: string, displayName: string, avatarUrl?: string | null } | null }> | null }> };
+export type GetActivitiesQuery = { 
+  __typename?: 'Query', 
+  findManyActivities: Array<{ 
+  __typename?: 'Activity'; 
+  id: string;
+  createdAt: string, 
+  title?: string | null, 
+  body?: string | null, 
+  type: ActivityType, 
+  completedAt?: string | null, 
+  dueAt?: string | null, 
+  assignee?: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string, avatarUrl?: string | null } | null, 
+  author: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string }, 
+  comments?: Array<Comment>,
+  activityTargets?: Array<{ __typename?: 'ActivityTarget', id: string, companyId?: string | null, personId?: string | null, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null, person?: { __typename?: 'Person', id: string, displayName: string, avatarUrl?: string | null } | null }> | null 
+}> };
 
 export type GetActivitiesByTargetsQueryVariables = Exact<{
   activityTargetIds: Array<Scalars['String']> | Scalars['String'];
diff --git a/front/src/modules/activities/notes/components/NoteCard.tsx b/front/src/modules/activities/notes/components/NoteCard.tsx
index e3a1bbb34..b93e41aea 100644
--- a/front/src/modules/activities/notes/components/NoteCard.tsx
+++ b/front/src/modules/activities/notes/components/NoteCard.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import { ActivityRelationEditableField } from '@/activities/editable-fields/components/ActivityRelationEditableField';
@@ -7,6 +8,7 @@ import {
   FieldContext,
   GenericFieldContextType,
 } from '@/ui/data/field/contexts/FieldContext';
+import { IconComment } from '@/ui/display/icon';
 import { Activity, ActivityTarget } from '~/generated/graphql';
 
 const StyledCard = styled.div`
@@ -54,23 +56,32 @@ const StyledFooter = styled.div`
   border-top: 1px solid ${({ theme }) => theme.border.color.light};
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: ${({ theme }) => theme.spacing(1)};
   justify-content: center;
   padding: ${({ theme }) => theme.spacing(2)};
   width: calc(100% - ${({ theme }) => theme.spacing(4)});
 `;
 
+const StyledCommentIcon = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
 export const NoteCard = ({
   note,
 }: {
   note: Pick<
     Activity,
-    'id' | 'title' | 'body' | 'type' | 'completedAt' | 'dueAt'
+    'id' | 'title' | 'body' | 'type' | 'completedAt' | 'dueAt' | 'comments'
   > & {
     activityTargets?: Array<Pick<ActivityTarget, 'id'>> | null;
   };
 }) => {
+  const theme = useTheme();
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const body = JSON.parse(note.body ?? '{}')[0]
     ?.content.map((x: any) => x.text)
@@ -92,6 +103,12 @@ export const NoteCard = ({
         </StyledCardDetailsContainer>
         <StyledFooter>
           <ActivityRelationEditableField activity={note} />
+          {note.comments && note.comments.length > 0 && (
+            <StyledCommentIcon>
+              <IconComment size={theme.icon.size.md} />
+              {note.comments.length}
+            </StyledCommentIcon>
+          )}
         </StyledFooter>
       </StyledCard>
     </FieldContext.Provider>
diff --git a/front/src/testing/mock-data/activities.ts b/front/src/testing/mock-data/activities.ts
index b332722cb..8e8748bf0 100644
--- a/front/src/testing/mock-data/activities.ts
+++ b/front/src/testing/mock-data/activities.ts
@@ -29,11 +29,7 @@ type MockedActivity = Pick<
     User,
     'id' | 'firstName' | 'lastName' | 'displayName' | 'avatarUrl'
   >;
-  comments: Array<
-    Pick<Comment, 'body' | 'id' | 'createdAt' | 'updatedAt'> & {
-      author: Pick<User, 'id' | 'displayName' | 'avatarUrl'>;
-    }
-  >;
+  comments: Array<Comment>;
   activityTargets: Array<
     Pick<
       ActivityTarget,