From 6de90024ef9c5246a8843bd067c428d057b2bb43 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 5 Jun 2023 14:41:27 +0200 Subject: [PATCH] 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 | 86 ++++++++++++++++++- front/src/modules/comments/services/index.ts | 1 + front/src/modules/comments/services/select.ts | 36 ++++++++ .../components/CompanyEditableNameCell.tsx | 14 ++- .../components/EditablePeopleFullName.tsx | 13 ++- .../editable-cell/types/EditableChip.tsx | 31 +++---- front/src/pages/people/people-columns.tsx | 1 + .../relations/company-relations.resolver.ts | 2 +- 8 files changed, 162 insertions(+), 22 deletions(-) create mode 100644 front/src/modules/comments/services/index.ts create mode 100644 front/src/modules/comments/services/select.ts diff --git a/front/src/generated/graphql.tsx b/front/src/generated/graphql.tsx index 8d2b4c8a9..b5fe5c385 100644 --- a/front/src/generated/graphql.tsx +++ b/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; accountOwnerId?: Maybe; address: Scalars['String']; @@ -1049,6 +1049,20 @@ export type WorkspaceMember = { workspace: Workspace; }; +export type GetCompanyCountsQueryVariables = Exact<{ + where?: InputMaybe; +}>; + + +export type GetCompanyCountsQuery = { __typename?: 'Query', companies: Array<{ __typename?: 'Company', commentsCount: number }> }; + +export type GetPeopleCountsQueryVariables = Exact<{ + where?: InputMaybe; +}>; + + +export type GetPeopleCountsQuery = { __typename?: 'Query', people: Array<{ __typename?: 'Person', commentsCount: number }> }; + export type GetCompaniesQueryVariables = Exact<{ orderBy?: InputMaybe | CompanyOrderByWithRelationInput>; where?: InputMaybe; @@ -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) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(GetCompanyCountsDocument, options); + } +export function useGetCompanyCountsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(GetCompanyCountsDocument, options); + } +export type GetCompanyCountsQueryHookResult = ReturnType; +export type GetCompanyCountsLazyQueryHookResult = ReturnType; +export type GetCompanyCountsQueryResult = Apollo.QueryResult; +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) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(GetPeopleCountsDocument, options); + } +export function useGetPeopleCountsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(GetPeopleCountsDocument, options); + } +export type GetPeopleCountsQueryHookResult = ReturnType; +export type GetPeopleCountsLazyQueryHookResult = ReturnType; +export type GetPeopleCountsQueryResult = Apollo.QueryResult; export const GetCompaniesDocument = gql` query GetCompanies($orderBy: [CompanyOrderByWithRelationInput!], $where: CompanyWhereInput) { companies: findManyCompany(orderBy: $orderBy, where: $where) { diff --git a/front/src/modules/comments/services/index.ts b/front/src/modules/comments/services/index.ts new file mode 100644 index 000000000..c7396734d --- /dev/null +++ b/front/src/modules/comments/services/index.ts @@ -0,0 +1 @@ +export * from './select'; diff --git a/front/src/modules/comments/services/select.ts b/front/src/modules/comments/services/select.ts new file mode 100644 index 000000000..1ab1d820b --- /dev/null +++ b/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 }; +}; diff --git a/front/src/modules/companies/components/CompanyEditableNameCell.tsx b/front/src/modules/companies/components/CompanyEditableNameCell.tsx index 3a27faff9..4be2abae3 100644 --- a/front/src/modules/companies/components/CompanyEditableNameCell.tsx +++ b/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 ( + ), + ]} /> ); } diff --git a/front/src/modules/people/components/EditablePeopleFullName.tsx b/front/src/modules/people/components/EditablePeopleFullName.tsx index 4c040f979..ab94419af 100644 --- a/front/src/modules/people/components/EditablePeopleFullName.tsx +++ b/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 ( - + {commentCount.loading ? null : ( + + )} } /> diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx index 1007640e7..9ba8b92a4 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx +++ b/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) => void; + rightEndContents?: ReactNode[]; }; // TODO: refactor @@ -38,21 +38,17 @@ function EditableChip({ picture, editModeHorizontalAlign, ChipComponent, - commentCount, - onCommentClick, + rightEndContents, }: EditableChipProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(value); const [isEditMode, setIsEditMode] = useState(false); - const showComment = commentCount ? commentCount > 0 : false; - - function handleCommentClick(event: React.MouseEvent) { - event.preventDefault(); + const handleRightEndContentClick = ( + event: React.MouseEvent, + ) => { event.stopPropagation(); - - onCommentClick?.(event); - } + }; return ( - {showComment && ( - - )} + {rightEndContents && + rightEndContents.length > 0 && + rightEndContents.map((content, index) => ( +
+ {content} +
+ ))} } > diff --git a/front/src/pages/people/people-columns.tsx b/front/src/pages/people/people-columns.tsx index a55d9debf..97d42d2aa 100644 --- a/front/src/pages/people/people-columns.tsx +++ b/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} /> ), diff --git a/server/src/api/resolvers/relations/company-relations.resolver.ts b/server/src/api/resolvers/relations/company-relations.resolver.ts index 1b96f1f28..c2ac9d555 100644 --- a/server/src/api/resolvers/relations/company-relations.resolver.ts +++ b/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 { + async _commentCount(@TypeGraphQL.Root() company: Company): Promise { return this.prismaService.comment.count({ where: { commentThread: {