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

Feature/optmistically render table create & remove (#1156)

Browse Source 
* Add optimistic updates on company table

* Add optimistic rendering for tables too

* Fix schema
This commit is contained in:
Emilien Chauvet
2023-08-10 18:37:24 +02:00
committed by GitHub
parent ee5ac11f98
commit 6b3a538c07
8 changed files with 126 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
front/src/generated/graphql.tsx
View File

@ -2679,12 +2679,14 @@ export type UpdateOneCompanyMutationVariables = Exact<{
export type UpdateOneCompanyMutation = { __typename?: 'Mutation', updateOneCompany?: { __typename?: 'Company', address: string, createdAt: string, domainName: string, employees?: number | null, linkedinUrl?: string | null, id: string, name: string, accountOwner?: { __typename?: 'User', id: string, email: string, displayName: string, firstName?: string | null, lastName?: string | null } | null } | null };
export type InsertCompanyFragmentFragment = { __typename?: 'Company', domainName: string, address: string, id: string, name: string, createdAt: string };
export type InsertOneCompanyMutationVariables = Exact<{
data: CompanyCreateInput;
}>;
export type InsertOneCompanyMutation = { __typename?: 'Mutation', createOneCompany: { __typename?: 'Company', address: string, createdAt: string, domainName: string, linkedinUrl?: string | null, employees?: number | null, id: string, name: string } };
export type InsertOneCompanyMutation = { __typename?: 'Mutation', createOneCompany: { __typename?: 'Company', domainName: string, address: string, id: string, name: string, createdAt: string } };
export type DeleteManyCompaniesMutationVariables = Exact<{
ids?: InputMaybe<Array<Scalars['String']> | Scalars['String']>;
@ -2766,12 +2768,14 @@ export type UpdateOnePersonMutationVariables = Exact<{
export type UpdateOnePersonMutation = { __typename?: 'Mutation', updateOnePerson?: { __typename?: 'Person', id: string, city?: string | null, email?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, firstName?: string | null, lastName?: string | null, displayName: string, phone?: string | null, createdAt: string, company?: { __typename?: 'Company', domainName: string, name: string, id: string } | null } | null };
export type InsertPersonFragmentFragment = { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, createdAt: string };
export type InsertOnePersonMutationVariables = Exact<{
data: PersonCreateInput;
}>;
export type InsertOnePersonMutation = { __typename?: 'Mutation', createOnePerson: { __typename?: 'Person', id: string, city?: string | null, email?: string | null, firstName?: string | null, lastName?: string | null, jobTitle?: string | null, linkedinUrl?: string | null, xUrl?: string | null, displayName: string, phone?: string | null, createdAt: string, company?: { __typename?: 'Company', domainName: string, name: string, id: string } | null } };
export type InsertOnePersonMutation = { __typename?: 'Mutation', createOnePerson: { __typename?: 'Person', id: string, firstName?: string | null, lastName?: string | null, displayName: string, createdAt: string } };
export type DeleteManyPersonMutationVariables = Exact<{
ids?: InputMaybe<Array<Scalars['String']> | Scalars['String']>;
@ -3025,6 +3029,24 @@ export const ActivityUpdatePartsFragmentDoc = gql`
}
}
`;
export const InsertCompanyFragmentFragmentDoc = gql`
fragment InsertCompanyFragment on Company {
domainName
address
id
name
createdAt
}
`;
export const InsertPersonFragmentFragmentDoc = gql`
fragment InsertPersonFragment on Person {
id
firstName
lastName
displayName
createdAt
}
`;
export const CreateCommentDocument = gql`
mutation CreateComment($commentId: String!, $commentText: String!, $authorId: String!, $activityId: String!, $createdAt: DateTime!) {
createOneComment(
@ -4062,16 +4084,10 @@ export type UpdateOneCompanyMutationOptions = Apollo.BaseMutationOptions<UpdateO
export const InsertOneCompanyDocument = gql`
mutation InsertOneCompany($data: CompanyCreateInput!) {
createOneCompany(data: $data) {
address
createdAt
domainName
linkedinUrl
employees
id
name
...InsertCompanyFragment
}
}
`;
${InsertCompanyFragmentFragmentDoc}`;
export type InsertOneCompanyMutationFn = Apollo.MutationFunction<InsertOneCompanyMutation, InsertOneCompanyMutationVariables>;
/**
@ -4548,25 +4564,10 @@ export type UpdateOnePersonMutationOptions = Apollo.BaseMutationOptions<UpdateOn
export const InsertOnePersonDocument = gql`
mutation InsertOnePerson($data: PersonCreateInput!) {
createOnePerson(data: $data) {
id
city
company {
domainName
name
id
}
email
firstName
lastName
jobTitle
linkedinUrl
xUrl
displayName
phone
createdAt
...InsertPersonFragment
}
}
`;
${InsertPersonFragmentFragmentDoc}`;
export type InsertOnePersonMutationFn = Apollo.MutationFunction<InsertOnePersonMutation, InsertOnePersonMutationVariables>;
/**

18
front/src/modules/companies/queries/update.ts
View File

@ -24,16 +24,20 @@ export const UPDATE_ONE_COMPANY = gql`
}
`;
export const INSERT_COMPANY_FRAGMENT = gql`
fragment InsertCompanyFragment on Company {
domainName
address
id
name
createdAt
}
`;
export const INSERT_ONE_COMPANY = gql`
mutation InsertOneCompany($data: CompanyCreateInput!) {
createOneCompany(data: $data) {
address
createdAt
domainName
linkedinUrl
employees
id
name
...InsertCompanyFragment
}
}
`;

22
front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx
View File

@ -1,12 +1,12 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilValue } from 'recoil';
import { useRecoilState, useRecoilValue } from 'recoil';
import { GET_COMPANIES } from '@/companies/queries';
import { GET_PIPELINES } from '@/pipeline/queries';
import { IconTrash } from '@/ui/icon/index';
import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
export function TableActionBarButtonDeleteCompanies() {
@ -15,12 +15,11 @@ export function TableActionBarButtonDeleteCompanies() {
const resetRowSelection = useResetTableRowSelection();
const [deleteCompanies] = useDeleteManyCompaniesMutation({
refetchQueries: [
getOperationName(GET_COMPANIES) ?? '',
getOperationName(GET_PIPELINES) ?? '',
],
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
async function handleDeleteClick() {
const rowIdsToDelete = selectedRowIds;
@ -30,6 +29,17 @@ export function TableActionBarButtonDeleteCompanies() {
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyCompany: {
count: rowIdsToDelete.length,
},
},
update: () => {
setTableRowIds(
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
},
});
}

27
front/src/modules/people/queries/update.ts
View File

@ -26,25 +26,20 @@ export const UPDATE_ONE_PERSON = gql`
}
`;
export const INSERT_PERSON_FRAGMENT = gql`
fragment InsertPersonFragment on Person {
id
firstName
lastName
displayName
createdAt
}
`;
export const INSERT_ONE_PERSON = gql`
mutation InsertOnePerson($data: PersonCreateInput!) {
createOnePerson(data: $data) {
id
city
company {
domainName
name
id
}
email
firstName
lastName
jobTitle
linkedinUrl
xUrl
displayName
phone
createdAt
...InsertPersonFragment
}
}
`;

15
front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx
View File

@ -1,15 +1,17 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilValue } from 'recoil';
import { useRecoilState, useRecoilValue } from 'recoil';
import { GET_PEOPLE } from '@/people/queries';
import { IconTrash } from '@/ui/icon/index';
import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import { useDeleteManyPersonMutation } from '~/generated/graphql';
export function TableActionBarButtonDeletePeople() {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
const resetRowSelection = useResetTableRowSelection();
@ -26,6 +28,17 @@ export function TableActionBarButtonDeletePeople() {
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyPerson: {
count: rowIdsToDelete.length,
},
},
update: () => {
setTableRowIds(
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
},
});
}

3
front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx
View File

@ -40,7 +40,8 @@ export function GenericEditableDoubleTextChipCellDisplayMode({
}),
);
const displayName = `${firstValue} ${secondValue}`;
const displayName =
firstValue || secondValue ? `${firstValue} ${secondValue}` : ' ';
switch (viewField.metadata.entityType) {
case Entity.Company: {

30
front/src/pages/companies/Companies.tsx
View File

@ -1,20 +1,21 @@
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { v4 } from 'uuid';
import { GET_COMPANIES } from '@/companies/queries';
import { CompanyTable } from '@/companies/table/components/CompanyTable';
import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
import { IconBuildingSkyscraper } from '@/ui/icon';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
import { TableContext } from '@/ui/table/states/TableContext';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useInsertOneCompanyMutation } from '~/generated/graphql';
import { SEARCH_COMPANY_QUERY } from '../../modules/search/queries/search';
const StyledTableContainer = styled.div`
display: flex;
width: 100%;
@ -22,20 +23,35 @@ const StyledTableContainer = styled.div`
export function Companies() {
const [insertCompany] = useInsertOneCompanyMutation();
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
async function handleAddButtonClick() {
const newCompanyId: string = v4();
await insertCompany({
variables: {
data: {
id: newCompanyId,
name: '',
domainName: '',
address: '',
},
},
refetchQueries: [
getOperationName(GET_COMPANIES) ?? '',
getOperationName(SEARCH_COMPANY_QUERY) ?? '',
],
optimisticResponse: {
__typename: 'Mutation',
createOneCompany: {
__typename: 'Company',
id: newCompanyId,
name: '',
domainName: '',
address: '',
createdAt: '',
},
},
update: (cache, { data }) => {
data?.createOneCompany.id &&
setTableRowIds([data?.createOneCompany.id, ...tableRowIds]);
},
refetchQueries: [getOperationName(SEARCH_COMPANY_QUERY) ?? ''],
});
}

24
front/src/pages/people/People.tsx
View File

@ -1,8 +1,8 @@
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { v4 } from 'uuid';
import { GET_PEOPLE } from '@/people/queries';
import { PeopleTable } from '@/people/table/components/PeopleTable';
import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople';
import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople';
@ -10,6 +10,7 @@ import { IconUser } from '@/ui/icon';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
import { TableContext } from '@/ui/table/states/TableContext';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useInsertOnePersonMutation } from '~/generated/graphql';
@ -20,16 +21,33 @@ const StyledTableContainer = styled.div`
export function People() {
const [insertOnePerson] = useInsertOnePersonMutation();
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
async function handleAddButtonClick() {
const newPersonId: string = v4();
await insertOnePerson({
variables: {
data: {
id: newPersonId,
firstName: '',
lastName: '',
},
},
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
optimisticResponse: {
__typename: 'Mutation',
createOnePerson: {
__typename: 'Person',
id: newPersonId,
firstName: '',
lastName: '',
displayName: '',
createdAt: '',
},
},
update: (cache, { data }) => {
data?.createOnePerson?.id &&
setTableRowIds([data?.createOnePerson.id, ...tableRowIds]);
},
});
}