From 6b3a538c073732f2578a8b4e2cc2202265043dbc Mon Sep 17 00:00:00 2001 From: Emilien Chauvet Date: Thu, 10 Aug 2023 18:37:24 +0200 Subject: [PATCH] Feature/optmistically render table create & remove (#1156) * Add optimistic updates on company table * Add optimistic rendering for tables too * Fix schema --- front/src/generated/graphql.tsx | 55 ++++++++++--------- front/src/modules/companies/queries/update.ts | 18 +++--- .../TableActionBarButtonDeleteCompanies.tsx | 22 ++++++-- front/src/modules/people/queries/update.ts | 27 ++++----- .../TableActionBarButtonDeletePeople.tsx | 15 ++++- ...cEditableDoubleTextChipCellDisplayMode.tsx | 3 +- front/src/pages/companies/Companies.tsx | 30 +++++++--- front/src/pages/people/People.tsx | 24 +++++++- 8 files changed, 126 insertions(+), 68 deletions(-) diff --git a/front/src/generated/graphql.tsx b/front/src/generated/graphql.tsx index 49a69b162..9c53a8ec3 100644 --- a/front/src/generated/graphql.tsx +++ b/front/src/generated/graphql.tsx @@ -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 | 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 | 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; /** @@ -4548,25 +4564,10 @@ export type UpdateOnePersonMutationOptions = Apollo.BaseMutationOptions; /** diff --git a/front/src/modules/companies/queries/update.ts b/front/src/modules/companies/queries/update.ts index 483baf33c..fe9c2c7e7 100644 --- a/front/src/modules/companies/queries/update.ts +++ b/front/src/modules/companies/queries/update.ts @@ -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 } } `; diff --git a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx b/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx index fc172760d..63d51d09f 100644 --- a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx +++ b/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx @@ -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)), + ); + }, }); } diff --git a/front/src/modules/people/queries/update.ts b/front/src/modules/people/queries/update.ts index 91c544f90..7c3b00ebd 100644 --- a/front/src/modules/people/queries/update.ts +++ b/front/src/modules/people/queries/update.ts @@ -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 } } `; diff --git a/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx b/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx index f431e96ad..f3bb51f6a 100644 --- a/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx +++ b/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx @@ -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)), + ); + }, }); } diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx index d4c61d051..348e6b73a 100644 --- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx @@ -40,7 +40,8 @@ export function GenericEditableDoubleTextChipCellDisplayMode({ }), ); - const displayName = `${firstValue} ${secondValue}`; + const displayName = + firstValue || secondValue ? `${firstValue} ${secondValue}` : ' '; switch (viewField.metadata.entityType) { case Entity.Company: { diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 77dd9e2f8..79d04fd69 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -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) ?? ''], }); } diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index edbf396dc..4ed08ad2c 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -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]); + }, }); }