admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* Refresh comments threads and count on new comment

* Fix tests
This commit is contained in:
Charles Bochet
2023-06-12 19:32:18 +02:00
committed by GitHub
parent 3341539eb2
commit 16e1b862d9
17 changed files with 74 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/comments/components/comments/CommentThread.tsx
View File

@ -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(

12
front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx
View File

@ -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}`,

10
front/src/modules/comments/components/comments/RightDrawerComments.tsx
View File

@ -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,
},
],
},
});

41
front/src/modules/comments/services/select.ts
View File

@ -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 } }

5
front/src/modules/companies/components/CompanyEditableNameCell.tsx
View File

@ -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}
/>,
]}

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

@ -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',

6
front/src/modules/companies/interfaces/company.interface.ts
View File

@ -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 => ({

1
front/src/modules/companies/services/select.ts
View File

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

35
front/src/modules/people/components/EditablePeopleFullName.tsx
View File

@ -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}
/>
</>
}
/>

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

@ -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',
},

5
front/src/modules/people/interfaces/person.interface.ts
View File

@ -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 => ({

1
front/src/modules/people/services/select.ts
View File

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