Sammy/t 363 comments count at row level depends on total comments number (#192)

* feature: add rightEndContent to editable cell

* refactor: use rightEndContent instead of comments sections

* refactor: move commentCount in a var

* feature: get commentsCount from backend

* refactor: use an index

* feature: use commentCount from backend on people

* refactor: rename commentCount for companies

* refactor: use generated queries, instead of useQuery

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

@@ -0,0 +1 @@
+export * from './select';

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

@@ -0,0 +1,36 @@
+import { gql } from '@apollo/client';
+
+import {
+  useGetCompanyCountsQuery,
+  useGetPeopleCountsQuery,
+} from '../../../generated/graphql';
+
+export const GET_COMPANY_COMMENT_COUNT = gql`
+  query GetCompanyCounts($where: CompanyWhereInput) {
+    companies: findManyCompany(where: $where) {
+      commentsCount: _commentCount
+    }
+  }
+`;
+
+export const useCompanyCommentsCountQuery = (companyId: string) => {
+  const { data, ...rest } = useGetCompanyCountsQuery({
+    variables: { where: { id: { equals: companyId } } },
+  });
+  return { ...rest, data: data?.companies[0].commentsCount };
+};
+
+export const GET_PEOPLE_COMMENT_COUNT = gql`
+  query GetPeopleCounts($where: PersonWhereInput) {
+    people: findManyPerson(where: $where) {
+      commentsCount: _commentCount
+    }
+  }
+`;
+
+export const usePeopleCommentsCountQuery = (personId: string) => {
+  const { data, ...rest } = useGetPeopleCountsQuery({
+    variables: { where: { id: { equals: personId } } },
+  });
+  return { ...rest, data: data?.people[0].commentsCount };
+};

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

@@ -2,6 +2,8 @@ import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightD
 import EditableChip from '@/ui/components/editable-cell/types/EditableChip';
 import { getLogoUrlFromDomainName } from '@/utils/utils';
 
+import { CellCommentChip } from '../../comments/components/comments/CellCommentChip';
+import { useCompanyCommentsCountQuery } from '../../comments/services';
 import { Company } from '../interfaces/company.interface';
 import { updateCompany } from '../services';
 
@@ -23,6 +25,8 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
     ]);
   }
 
+  const commentCount = useCompanyCommentsCountQuery(company.id);
+
   return (
     <EditableChip
       value={company.name || ''}
@@ -35,8 +39,14 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
         });
       }}
       ChipComponent={CompanyChip}
-      commentCount={12}
-      onCommentClick={handleCommentClick}
+      rightEndContents={[
+        commentCount.loading ? null : (
+          <CellCommentChip
+            count={commentCount.data || 0}
+            onClick={handleCommentClick}
+          />
+        ),
+      ]}
     />
   );
 }

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

@@ -4,11 +4,14 @@ import styled from '@emotion/styled';
 import { CellCommentChip } from '@/comments/components/comments/CellCommentChip';
 import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText';
 
+import { usePeopleCommentsCountQuery } from '../../comments/services';
+
 import { PersonChip } from './PersonChip';
 
 type OwnProps = {
   firstname: string;
   lastname: string;
+  personId: string;
   onChange: (firstname: string, lastname: string) => void;
 };
 
@@ -23,6 +26,7 @@ export function EditablePeopleFullName({
   firstname,
   lastname,
   onChange,
+  personId,
 }: OwnProps) {
   const [firstnameValue, setFirstnameValue] = useState(firstname);
   const [lastnameValue, setLastnameValue] = useState(lastname);
@@ -43,6 +47,8 @@ export function EditablePeopleFullName({
     console.log('comment clicked');
   }
 
+  const commentCount = usePeopleCommentsCountQuery(personId);
+
   return (
     <EditableDoubleText
       firstValue={firstnameValue}
@@ -55,7 +61,12 @@ export function EditablePeopleFullName({
           <StyledDiv>
             <PersonChip name={firstname + ' ' + lastname} />
           </StyledDiv>
-          <CellCommentChip count={12} onClick={handleCommentClick} />
+          {commentCount.loading ? null : (
+            <CellCommentChip
+              count={commentCount.data || 0}
+              onClick={handleCommentClick}
+            />
+          )}
         </>
       }
     />

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -1,7 +1,6 @@
-import { ChangeEvent, ComponentType, useRef, useState } from 'react';
+import { ChangeEvent, ComponentType, ReactNode, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 
-import { CellCommentChip } from '@/comments/components/comments/CellCommentChip';
 import { textInputStyle } from '@/ui/layout/styles/themes';
 
 import { EditableCell } from '../EditableCell';
@@ -15,6 +14,7 @@ export type EditableChipProps = {
   ChipComponent: ComponentType<{ name: string; picture: string }>;
   commentCount?: number;
   onCommentClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  rightEndContents?: ReactNode[];
 };
 
 // TODO: refactor
@@ -38,21 +38,17 @@ function EditableChip({
   picture,
   editModeHorizontalAlign,
   ChipComponent,
-  commentCount,
-  onCommentClick,
+  rightEndContents,
 }: EditableChipProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(value);
   const [isEditMode, setIsEditMode] = useState(false);
 
-  const showComment = commentCount ? commentCount > 0 : false;
-
-  function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
-    event.preventDefault();
+  const handleRightEndContentClick = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ) => {
     event.stopPropagation();
-
-    onCommentClick?.(event);
-  }
+  };
 
   return (
     <EditableCell
@@ -77,12 +73,13 @@ function EditableChip({
           <StyledInplaceShow>
             <ChipComponent name={inputValue} picture={picture} />
           </StyledInplaceShow>
-          {showComment && (
-            <CellCommentChip
-              count={commentCount ?? 0}
-              onClick={handleCommentClick}
-            />
-          )}
+          {rightEndContents &&
+            rightEndContents.length > 0 &&
+            rightEndContents.map((content, index) => (
+              <div key={index} onClick={handleRightEndContentClick}>
+                {content}
+              </div>
+            ))}
         </>
       }
     ></EditableCell>