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/generated/graphql.tsx

@@ -194,7 +194,7 @@ export enum CommentableType {
 
 export type Company = {
   __typename?: 'Company';
-  _commentsCount: Scalars['Int'];
+  _commentCount: Scalars['Int'];
   accountOwner?: Maybe<User>;
   accountOwnerId?: Maybe<Scalars['String']>;
   address: Scalars['String'];
@@ -1049,6 +1049,20 @@ export type WorkspaceMember = {
   workspace: Workspace;
 };
 
+export type GetCompanyCountsQueryVariables = Exact<{
+  where?: InputMaybe<CompanyWhereInput>;
+}>;
+
+
+export type GetCompanyCountsQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', commentsCount: number }> };
+
+export type GetPeopleCountsQueryVariables = Exact<{
+  where?: InputMaybe<PersonWhereInput>;
+}>;
+
+
+export type GetPeopleCountsQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', commentsCount: number }> };
+
 export type GetCompaniesQueryVariables = Exact<{
   orderBy?: InputMaybe<Array<CompanyOrderByWithRelationInput> | CompanyOrderByWithRelationInput>;
   where?: InputMaybe<CompanyWhereInput>;
@@ -1174,6 +1188,76 @@ export type GetUsersQueryVariables = Exact<{ [key: string]: never; }>;
 export type GetUsersQuery = { __typename?: 'Query', findManyUser: Array<{ __typename?: 'User', id: string }> };
 
 
+export const GetCompanyCountsDocument = gql`
+    query GetCompanyCounts($where: CompanyWhereInput) {
+  companies: findManyCompany(where: $where) {
+    commentsCount: _commentCount
+  }
+}
+    `;
+
+/**
+ * __useGetCompanyCountsQuery__
+ *
+ * To run a query within a React component, call `useGetCompanyCountsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetCompanyCountsQuery` 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 } = useGetCompanyCountsQuery({
+ *   variables: {
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function useGetCompanyCountsQuery(baseOptions?: Apollo.QueryHookOptions<GetCompanyCountsQuery, GetCompanyCountsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetCompanyCountsQuery, GetCompanyCountsQueryVariables>(GetCompanyCountsDocument, options);
+      }
+export function useGetCompanyCountsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetCompanyCountsQuery, GetCompanyCountsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetCompanyCountsQuery, GetCompanyCountsQueryVariables>(GetCompanyCountsDocument, options);
+        }
+export type GetCompanyCountsQueryHookResult = ReturnType<typeof useGetCompanyCountsQuery>;
+export type GetCompanyCountsLazyQueryHookResult = ReturnType<typeof useGetCompanyCountsLazyQuery>;
+export type GetCompanyCountsQueryResult = Apollo.QueryResult<GetCompanyCountsQuery, GetCompanyCountsQueryVariables>;
+export const GetPeopleCountsDocument = gql`
+    query GetPeopleCounts($where: PersonWhereInput) {
+  people: findManyPerson(where: $where) {
+    commentsCount: _commentCount
+  }
+}
+    `;
+
+/**
+ * __useGetPeopleCountsQuery__
+ *
+ * To run a query within a React component, call `useGetPeopleCountsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetPeopleCountsQuery` 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 } = useGetPeopleCountsQuery({
+ *   variables: {
+ *      where: // value for 'where'
+ *   },
+ * });
+ */
+export function useGetPeopleCountsQuery(baseOptions?: Apollo.QueryHookOptions<GetPeopleCountsQuery, GetPeopleCountsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetPeopleCountsQuery, GetPeopleCountsQueryVariables>(GetPeopleCountsDocument, options);
+      }
+export function useGetPeopleCountsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetPeopleCountsQuery, GetPeopleCountsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetPeopleCountsQuery, GetPeopleCountsQueryVariables>(GetPeopleCountsDocument, options);
+        }
+export type GetPeopleCountsQueryHookResult = ReturnType<typeof useGetPeopleCountsQuery>;
+export type GetPeopleCountsLazyQueryHookResult = ReturnType<typeof useGetPeopleCountsLazyQuery>;
+export type GetPeopleCountsQueryResult = Apollo.QueryResult<GetPeopleCountsQuery, GetPeopleCountsQueryVariables>;
 export const GetCompaniesDocument = gql`
     query GetCompanies($orderBy: [CompanyOrderByWithRelationInput!], $where: CompanyWhereInput) {
   companies: findManyCompany(orderBy: $orderBy, where: $where) {

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>

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

@@ -59,6 +59,7 @@ export const usePeopleColumns = () => {
                 person.lastname = lastName;
                 await updatePerson(person);
               }}
+              personId={props.row.original.id}
             />
           </>
         ),

server/src/api/resolvers/relations/company-relations.resolver.ts

@@ -63,7 +63,7 @@ export class CompanyRelationsResolver {
   @TypeGraphQL.ResolveField(() => TypeGraphQL.Int, {
     nullable: false,
   })
-  async _commentsCount(@TypeGraphQL.Root() company: Company): Promise<number> {
+  async _commentCount(@TypeGraphQL.Root() company: Company): Promise<number> {
     return this.prismaService.comment.count({
       where: {
         commentThread: {