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

* Refresh comments threads and count on new comment

* Fix tests

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