Refresh comments threads and count on new comment (#276)

* Refresh comments threads and count on new comment

* Fix tests

front/src/generated/graphql.tsx

@@ -1104,22 +1104,9 @@ export type CreateCommentThreadWithCommentMutationVariables = Exact<{
 
 export type CreateCommentThreadWithCommentMutation = { __typename?: 'Mutation', createOneCommentThread: { __typename?: 'CommentThread', id: string, createdAt: string, updatedAt: string, commentThreadTargets?: Array<{ __typename?: 'CommentThreadTarget', id: string, createdAt: string, updatedAt: string, commentThreadId: string, commentableType: CommentableType, commentableId: string }> | null, comments?: Array<{ __typename?: 'Comment', id: string, createdAt: string, updatedAt: string, body: string, author: { __typename?: 'User', id: string } }> | null } };
 
-export type GetCompanyCommentsCountQueryVariables = Exact<{
-  where?: InputMaybe<CompanyWhereInput>;
-}>;
-
-
-export type GetCompanyCommentsCountQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', commentsCount: number }> };
-
-export type GetPeopleCommentsCountQueryVariables = Exact<{
-  where?: InputMaybe<PersonWhereInput>;
-}>;
-
-
-export type GetPeopleCommentsCountQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', commentsCount: number }> };
-
 export type GetCommentThreadsByTargetsQueryVariables = Exact<{
   commentThreadTargetIds: Array<Scalars['String']> | Scalars['String'];
+  orderBy?: InputMaybe<Array<CommentThreadOrderByWithRelationInput> | CommentThreadOrderByWithRelationInput>;
 }>;
 
 
@@ -1138,7 +1125,7 @@ export type GetCompaniesQueryVariables = Exact<{
 }>;
 
 
-export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string } | null }> };
+export type GetCompaniesQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', id: string, domainName: string, name: string, createdAt: string, address: string, employees?: number | null, _commentCount: number, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string } | null }> };
 
 export type UpdateCompanyMutationVariables = Exact<{
   id?: InputMaybe<Scalars['String']>;
@@ -1179,7 +1166,7 @@ export type GetPeopleQueryVariables = Exact<{
 }>;
 
 
-export type GetPeopleQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', id: string, phone: string, email: string, city: string, firstname: string, lastname: string, createdAt: string, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null }> };
+export type GetPeopleQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', id: string, phone: string, email: string, city: string, firstname: string, lastname: string, createdAt: string, _commentCount: number, company?: { __typename?: 'Company', id: string, name: string, domainName: string } | null }> };
 
 export type UpdatePeopleMutationVariables = Exact<{
   id?: InputMaybe<Scalars['String']>;
@@ -1363,79 +1350,10 @@ export function useCreateCommentThreadWithCommentMutation(baseOptions?: Apollo.M
 export type CreateCommentThreadWithCommentMutationHookResult = ReturnType<typeof useCreateCommentThreadWithCommentMutation>;
 export type CreateCommentThreadWithCommentMutationResult = Apollo.MutationResult<CreateCommentThreadWithCommentMutation>;
 export type CreateCommentThreadWithCommentMutationOptions = Apollo.BaseMutationOptions<CreateCommentThreadWithCommentMutation, CreateCommentThreadWithCommentMutationVariables>;
-export const GetCompanyCommentsCountDocument = gql`
-    query GetCompanyCommentsCount($where: CompanyWhereInput) {
-  companies: findManyCompany(where: $where) {
-    commentsCount: _commentCount
-  }
-}
-    `;
-
-/**
- * __useGetCompanyCommentsCountQuery__
- *
- * To run a query within a React component, call `useGetCompanyCommentsCountQuery` and pass it any options that fit your needs.
- * When your component renders, `useGetCompanyCommentsCountQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useGetCompanyCommentsCountQuery({
- *   variables: {
- *      where: // value for 'where'
- *   },
- * });
- */
-export function useGetCompanyCommentsCountQuery(baseOptions?: Apollo.QueryHookOptions<GetCompanyCommentsCountQuery, GetCompanyCommentsCountQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetCompanyCommentsCountQuery, GetCompanyCommentsCountQueryVariables>(GetCompanyCommentsCountDocument, options);
-      }
-export function useGetCompanyCommentsCountLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetCompanyCommentsCountQuery, GetCompanyCommentsCountQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetCompanyCommentsCountQuery, GetCompanyCommentsCountQueryVariables>(GetCompanyCommentsCountDocument, options);
-        }
-export type GetCompanyCommentsCountQueryHookResult = ReturnType<typeof useGetCompanyCommentsCountQuery>;
-export type GetCompanyCommentsCountLazyQueryHookResult = ReturnType<typeof useGetCompanyCommentsCountLazyQuery>;
-export type GetCompanyCommentsCountQueryResult = Apollo.QueryResult<GetCompanyCommentsCountQuery, GetCompanyCommentsCountQueryVariables>;
-export const GetPeopleCommentsCountDocument = gql`
-    query GetPeopleCommentsCount($where: PersonWhereInput) {
-  people: findManyPerson(where: $where) {
-    commentsCount: _commentCount
-  }
-}
-    `;
-
-/**
- * __useGetPeopleCommentsCountQuery__
- *
- * To run a query within a React component, call `useGetPeopleCommentsCountQuery` and pass it any options that fit your needs.
- * When your component renders, `useGetPeopleCommentsCountQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useGetPeopleCommentsCountQuery({
- *   variables: {
- *      where: // value for 'where'
- *   },
- * });
- */
-export function useGetPeopleCommentsCountQuery(baseOptions?: Apollo.QueryHookOptions<GetPeopleCommentsCountQuery, GetPeopleCommentsCountQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<GetPeopleCommentsCountQuery, GetPeopleCommentsCountQueryVariables>(GetPeopleCommentsCountDocument, options);
-      }
-export function useGetPeopleCommentsCountLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetPeopleCommentsCountQuery, GetPeopleCommentsCountQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<GetPeopleCommentsCountQuery, GetPeopleCommentsCountQueryVariables>(GetPeopleCommentsCountDocument, options);
-        }
-export type GetPeopleCommentsCountQueryHookResult = ReturnType<typeof useGetPeopleCommentsCountQuery>;
-export type GetPeopleCommentsCountLazyQueryHookResult = ReturnType<typeof useGetPeopleCommentsCountLazyQuery>;
-export type GetPeopleCommentsCountQueryResult = Apollo.QueryResult<GetPeopleCommentsCountQuery, GetPeopleCommentsCountQueryVariables>;
 export const GetCommentThreadsByTargetsDocument = gql`
-    query GetCommentThreadsByTargets($commentThreadTargetIds: [String!]!) {
+    query GetCommentThreadsByTargets($commentThreadTargetIds: [String!]!, $orderBy: [CommentThreadOrderByWithRelationInput!]) {
   findManyCommentThreads(
+    orderBy: $orderBy
     where: {commentThreadTargets: {some: {commentableId: {in: $commentThreadTargetIds}}}}
   ) {
     id
@@ -1467,6 +1385,7 @@ export const GetCommentThreadsByTargetsDocument = gql`
  * const { data, loading, error } = useGetCommentThreadsByTargetsQuery({
  *   variables: {
  *      commentThreadTargetIds: // value for 'commentThreadTargetIds'
+ *      orderBy: // value for 'orderBy'
  *   },
  * });
  */
@@ -1536,6 +1455,7 @@ export const GetCompaniesDocument = gql`
     createdAt
     address
     employees
+    _commentCount
     accountOwner {
       id
       email
@@ -1713,6 +1633,7 @@ export const GetPeopleDocument = gql`
     firstname
     lastname
     createdAt
+    _commentCount
     company {
       id
       name

front/src/modules/comments/components/comments/CommentThread.tsx

@@ -70,8 +70,8 @@ export function CommentThread({ commentThread }: OwnProps) {
       // Also it cannot refetch queries than are not in the cache
       refetchQueries: [
         'GetCommentThreadsByTargets',
-        'GetPeopleCommentsCount',
-        'GetCompanyCommentsCount',
+        'GetCompanies',
+        'GetPeople',
       ],
       onError: (error) => {
         logError(

front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx

@@ -6,6 +6,7 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { commentableEntityArrayState } from '@/comments/states/commentableEntityArrayState';
 import { createdCommentThreadIdState } from '@/comments/states/createdCommentThreadIdState';
 import { AutosizeTextInput } from '@/ui/components/inputs/AutosizeTextInput';
+import { useOpenRightDrawer } from '@/ui/layout/right-drawer/hooks/useOpenRightDrawer';
 import { logError } from '@/utils/logs/logError';
 import { isDefined } from '@/utils/type-guards/isDefined';
 import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
@@ -49,6 +50,8 @@ export function CommentThreadCreateMode() {
     createdCommentThreadIdState,
   );
 
+  const openRightDrawer = useOpenRightDrawer();
+
   const [createCommentMutation] = useCreateCommentMutation();
 
   const [createCommentThreadWithComment] =
@@ -96,9 +99,10 @@ export function CommentThreadCreateMode() {
             }),
           ),
         },
-        refetchQueries: ['GetCommentThread'],
+        refetchQueries: ['GetCommentThread', 'GetCompanies', 'GetPeople'],
         onCompleted(data) {
           setCreatedCommentThreadId(data.createOneCommentThread.id);
+          openRightDrawer('comments');
         },
       });
     } else {
@@ -111,11 +115,7 @@ export function CommentThreadCreateMode() {
           createdAt: new Date().toISOString(),
         },
         // TODO: find a way to have this configuration dynamic and typed
-        refetchQueries: [
-          'GetCommentThread',
-          'GetPeopleCommentsCount',
-          'GetCompanyCommentsCount',
-        ],
+        refetchQueries: ['GetCommentThread'],
         onError: (error) => {
           logError(
             `In handleCreateCommentThread, createCommentMutation onError, error: ${error}`,

front/src/modules/comments/components/comments/RightDrawerComments.tsx

@@ -4,7 +4,10 @@ import { CommentThreadForDrawer } from '@/comments/types/CommentThreadForDrawer'
 import { RightDrawerBody } from '@/ui/layout/right-drawer/components/RightDrawerBody';
 import { RightDrawerPage } from '@/ui/layout/right-drawer/components/RightDrawerPage';
 import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
-import { useGetCommentThreadsByTargetsQuery } from '~/generated/graphql';
+import {
+  SortOrder,
+  useGetCommentThreadsByTargetsQuery,
+} from '~/generated/graphql';
 
 import { commentableEntityArrayState } from '../../states/commentableEntityArrayState';
 
@@ -18,6 +21,11 @@ export function RightDrawerComments() {
       commentThreadTargetIds: commentableEntityArray.map(
         (commentableEntity) => commentableEntity.id,
       ),
+      orderBy: [
+        {
+          createdAt: SortOrder.Desc,
+        },
+      ],
     },
   });
 

front/src/modules/comments/services/select.ts

@@ -1,43 +1,12 @@
 import { gql } from '@apollo/client';
 
-import {
-  useGetCompanyCommentsCountQuery,
-  useGetPeopleCommentsCountQuery,
-} from '../../../generated/graphql';
-
-export const GET_COMPANY_COMMENT_COUNT = gql`
-  query GetCompanyCommentsCount($where: CompanyWhereInput) {
-    companies: findManyCompany(where: $where) {
-      commentsCount: _commentCount
-    }
-  }
-`;
-
-export const useCompanyCommentsCountQuery = (companyId: string) => {
-  const { data, ...rest } = useGetCompanyCommentsCountQuery({
-    variables: { where: { id: { equals: companyId } } },
-  });
-  return { ...rest, data: data?.companies[0].commentsCount };
-};
-
-export const GET_PEOPLE_COMMENT_COUNT = gql`
-  query GetPeopleCommentsCount($where: PersonWhereInput) {
-    people: findManyPerson(where: $where) {
-      commentsCount: _commentCount
-    }
-  }
-`;
-
-export const usePeopleCommentsCountQuery = (personId: string) => {
-  const { data, ...rest } = useGetPeopleCommentsCountQuery({
-    variables: { where: { id: { equals: personId } } },
-  });
-  return { ...rest, data: data?.people[0].commentsCount };
-};
-
 export const GET_COMMENT_THREADS_BY_TARGETS = gql`
-  query GetCommentThreadsByTargets($commentThreadTargetIds: [String!]!) {
+  query GetCommentThreadsByTargets(
+    $commentThreadTargetIds: [String!]!
+    $orderBy: [CommentThreadOrderByWithRelationInput!]
+  ) {
     findManyCommentThreads(
+      orderBy: $orderBy
       where: {
         commentThreadTargets: {
           some: { commentableId: { in: $commentThreadTargetIds } }

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -1,6 +1,5 @@
 import { CellCommentChip } from '@/comments/components/comments/CellCommentChip';
 import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
-import { useCompanyCommentsCountQuery } from '@/comments/services';
 import EditableChip from '@/ui/components/editable-cell/types/EditableChip';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
 import { CommentableType } from '~/generated/graphql';
@@ -29,8 +28,6 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
     ]);
   }
 
-  const commentCount = useCompanyCommentsCountQuery(company.id);
-
   return (
     <EditableChip
       value={company.name || ''}
@@ -45,7 +42,7 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
       ChipComponent={CompanyChip}
       rightEndContents={[
         <CellCommentChip
-          count={commentCount.data ?? 0}
+          count={company._commentCount ?? 0}
           onClick={handleCommentClick}
         />,
       ]}

front/src/modules/companies/interfaces/__tests__/company.interface.test.ts

@@ -17,6 +17,7 @@ describe('Company mappers', () => {
       createdAt: now.toUTCString(),
       employees: 10,
       address: '1 Infinite Loop, 95014 Cupertino, California, USA',
+      _commentCount: 1,
       accountOwner: {
         id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
         email: 'john@example.com',
@@ -44,6 +45,7 @@ describe('Company mappers', () => {
       createdAt: new Date(now.toUTCString()),
       employees: graphQLCompany.employees,
       address: graphQLCompany.address,
+      _commentCount: 1,
       accountOwner: {
         __typename: 'users',
         id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
@@ -66,6 +68,7 @@ describe('Company mappers', () => {
       employees: 10,
       address: '1 Infinite Loop, 95014 Cupertino, California, USA',
       pipes: [],
+      _commentCount: 1,
       accountOwner: {
         id: '522d4ec4-c46b-4360-a0a7-df8df170be81',
         email: 'john@example.com',

front/src/modules/companies/interfaces/company.interface.ts

@@ -20,6 +20,8 @@ export type Company = {
 
   pipes?: Pipeline[];
   accountOwner?: User | null;
+
+  _commentCount?: number;
 };
 
 export type GraphqlQueryCompany = {
@@ -34,6 +36,8 @@ export type GraphqlQueryCompany = {
   accountOwner?: GraphqlQueryUser | null;
   pipes?: GraphqlQueryPipeline[] | null;
   __typename?: string;
+
+  _commentCount?: number;
 };
 
 export type GraphqlMutationCompany = {
@@ -62,6 +66,8 @@ export const mapToCompany = (company: GraphqlQueryCompany): Company => ({
     ? mapToUser(company.accountOwner)
     : company.accountOwner,
   pipes: [],
+
+  _commentCount: company._commentCount,
 });
 
 export const mapToGqlCompany = (company: Company): GraphqlMutationCompany => ({

front/src/modules/companies/services/select.ts

@@ -22,6 +22,7 @@ export const GET_COMPANIES = gql`
       createdAt
       address
       employees
+      _commentCount
       accountOwner {
         id
         email

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -6,14 +6,12 @@ import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightD
 import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText';
 import { CommentableType } from '~/generated/graphql';
 
-import { usePeopleCommentsCountQuery } from '../../comments/services';
+import { Person } from '../interfaces/person.interface';
 
 import { PersonChip } from './PersonChip';
 
 type OwnProps = {
-  firstname: string;
-  lastname: string;
-  personId: string;
+  person: Person;
   onChange: (firstname: string, lastname: string) => void;
 };
 
@@ -24,14 +22,9 @@ const StyledDiv = styled.div`
   width: 100%;
 `;
 
-export function EditablePeopleFullName({
-  firstname,
-  lastname,
-  onChange,
-  personId,
-}: OwnProps) {
-  const [firstnameValue, setFirstnameValue] = useState(firstname);
-  const [lastnameValue, setLastnameValue] = useState(lastname);
+export function EditablePeopleFullName({ person, onChange }: OwnProps) {
+  const [firstnameValue, setFirstnameValue] = useState(person.firstname ?? '');
+  const [lastnameValue, setLastnameValue] = useState(person.lastname ?? '');
   const openCommentRightDrawer = useOpenCommentRightDrawer();
 
   function handleDoubleTextChange(
@@ -51,15 +44,11 @@ export function EditablePeopleFullName({
     openCommentRightDrawer([
       {
         type: CommentableType.Person,
-        id: personId,
+        id: person.id,
       },
     ]);
   }
 
-  const commentCount = usePeopleCommentsCountQuery(personId);
-
-  const displayCommentCount = !commentCount.loading;
-
   return (
     <EditableDoubleText
       firstValue={firstnameValue}
@@ -70,14 +59,12 @@ export function EditablePeopleFullName({
       nonEditModeContent={
         <>
           <StyledDiv>
-            <PersonChip name={firstname + ' ' + lastname} />
+            <PersonChip name={person.firstname + ' ' + person.lastname} />
           </StyledDiv>
-          {displayCommentCount && (
-            <CellCommentChip
-              count={commentCount.data ?? 0}
-              onClick={handleCommentClick}
-            />
-          )}
+          <CellCommentChip
+            count={person._commentCount ?? 0}
+            onClick={handleCommentClick}
+          />
         </>
       }
     />

front/src/modules/people/interfaces/__tests__/person.interface.test.ts

@@ -18,6 +18,7 @@ describe('Person mappers', () => {
       email: 'john.doe@gmail.com',
       phone: '+1 (555) 123-4567',
       city: 'Paris',
+      _commentCount: 1,
       company: {
         id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
         name: 'John Doe',
@@ -36,6 +37,7 @@ describe('Person mappers', () => {
       email: graphQLPerson.email,
       city: graphQLPerson.city,
       phone: graphQLPerson.phone,
+      _commentCount: 1,
       company: {
         __typename: 'companies',
         id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
@@ -44,6 +46,7 @@ describe('Person mappers', () => {
         createdAt: undefined,
         domainName: undefined,
         employees: undefined,
+        _commentCount: undefined,
         name: 'John Doe',
         pipes: [],
       },
@@ -61,6 +64,7 @@ describe('Person mappers', () => {
       email: 'john.doe@gmail.com',
       phone: '+1 (555) 123-4567',
       city: 'Paris',
+      _commentCount: 1,
       company: {
         id: '7af20dea-0412-4c4c-8b13-d6f0e6e09e87',
       },

front/src/modules/people/interfaces/person.interface.ts

@@ -19,6 +19,8 @@ export type Person = {
 
   company?: Company | null;
   pipes?: Pipeline[] | null;
+
+  _commentCount?: number;
 };
 
 export type GraphqlQueryPerson = {
@@ -33,6 +35,8 @@ export type GraphqlQueryPerson = {
 
   company?: GraphqlQueryCompany | null;
 
+  _commentCount?: number;
+
   __typename?: string;
 };
 
@@ -60,6 +64,7 @@ export const mapToPerson = (person: GraphqlQueryPerson): Person => ({
   createdAt: person.createdAt ? new Date(person.createdAt) : undefined,
 
   company: person.company ? mapToCompany(person.company) : null,
+  _commentCount: person._commentCount,
 });
 
 export const mapToGqlPerson = (person: Person): GraphqlMutationPerson => ({

front/src/modules/people/services/select.ts

@@ -24,6 +24,7 @@ export const GET_PEOPLE = gql`
       firstname
       lastname
       createdAt
+      _commentCount
       company {
         id
         name

front/src/pages/people/people-columns.tsx

@@ -32,15 +32,13 @@ export const usePeopleColumns = () => {
         cell: (props) => (
           <>
             <EditablePeopleFullName
-              firstname={props.row.original.firstname || ''}
-              lastname={props.row.original.lastname || ''}
+              person={props.row.original}
               onChange={async (firstName: string, lastName: string) => {
                 const person = props.row.original;
                 person.firstname = firstName;
                 person.lastname = lastName;
                 await updatePerson(person);
               }}
-              personId={props.row.original.id}
             />
           </>
         ),

front/src/testing/graphqlMocks.ts

@@ -4,11 +4,6 @@ import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
 import { GraphqlQueryPerson } from '@/people/interfaces/person.interface';
 import { GraphqlQueryUser } from '@/users/interfaces/user.interface';
 
-import {
-  GetCompanyCommentsCountQuery,
-  GetPeopleCommentsCountQuery,
-} from '../generated/graphql';
-
 import { mockedCompaniesData } from './mock-data/companies';
 import { mockedPeopleData } from './mock-data/people';
 import { mockedUsersData } from './mock-data/users';
@@ -98,17 +93,4 @@ export const graphqlMocks = [
       }),
     );
   }),
-  graphql.query('GetPeopleCommentsCount', (req, res, ctx) => {
-    const mockedData: GetPeopleCommentsCountQuery = {
-      people: [{ commentsCount: 12 }],
-    };
-    return res(ctx.data(mockedData));
-  }),
-
-  graphql.query('GetCompanyCommentsCount', (req, res, ctx) => {
-    const mockedData: GetCompanyCommentsCountQuery = {
-      companies: [{ commentsCount: 20 }],
-    };
-    return res(ctx.data(mockedData));
-  }),
 ];

front/src/testing/mock-data/companies.ts

@@ -8,6 +8,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     createdAt: '2023-04-26T10:08:54.724515+00:00',
     address: '17 rue de clignancourt',
     employees: 12,
+    _commentCount: 1,
     accountOwner: {
       email: 'charles@test.com',
       displayName: 'Charles Test',
@@ -23,6 +24,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     createdAt: '2023-04-26T10:12:42.33625+00:00',
     address: '',
     employees: 1,
+    _commentCount: 1,
     accountOwner: null,
     __typename: 'companies',
   },
@@ -33,6 +35,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     createdAt: '2023-04-26T10:10:32.530184+00:00',
     address: '',
     employees: 1,
+    _commentCount: 1,
     accountOwner: null,
     __typename: 'companies',
   },
@@ -43,6 +46,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     createdAt: '2023-03-21T06:30:25.39474+00:00',
     address: '',
     employees: 10,
+    _commentCount: 0,
     accountOwner: null,
     __typename: 'companies',
   },
@@ -53,6 +57,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     createdAt: '2023-04-26T10:13:29.712485+00:00',
     address: '10 rue de la Paix',
     employees: 1,
+    _commentCount: 2,
     accountOwner: null,
     __typename: 'companies',
   },
@@ -63,6 +68,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     createdAt: '2023-04-26T10:09:25.656555+00:00',
     address: '',
     employees: 1,
+    _commentCount: 13,
     accountOwner: null,
     __typename: 'companies',
   },
@@ -73,6 +79,7 @@ export const mockedCompaniesData: Array<GraphqlQueryCompany> = [
     createdAt: '2023-04-26T10:09:25.656555+00:00',
     address: '',
     employees: 1,
+    _commentCount: 1,
     accountOwner: null,
     __typename: 'companies',
   },

front/src/testing/mock-data/people.ts

@@ -14,6 +14,7 @@ export const mockedPeopleData = [
       __typename: 'Company',
     },
     phone: '06 12 34 56 78',
+    _commentCount: 1,
     createdAt: '2023-04-20T13:20:09.158312+00:00',
 
     city: 'Paris',
@@ -31,6 +32,7 @@ export const mockedPeopleData = [
       __typename: 'Company',
     },
     phone: '06 12 34 56 78',
+    _commentCount: 1,
     createdAt: '2023-04-20T13:20:09.158312+00:00',
 
     city: 'Paris',
@@ -48,6 +50,7 @@ export const mockedPeopleData = [
       __typename: 'Company',
     },
     phone: '06 12 34 56 78',
+    _commentCount: 1,
     createdAt: '2023-04-20T13:20:09.158312+00:00',
 
     city: 'Paris',
@@ -66,6 +69,7 @@ export const mockedPeopleData = [
       __typename: 'Company',
     },
     phone: '06 12 34 56 78',
+    _commentCount: 2,
     createdAt: '2023-04-20T13:20:09.158312+00:00',
 
     city: 'Paris',