From c5fe0eb51217239745bae07d3557370e6a2d3ae3 Mon Sep 17 00:00:00 2001 From: martmull Date: Tue, 13 Feb 2024 16:55:50 +0100 Subject: [PATCH 1/6] Add totalCount to fetch record request --- .../__mocks__/useMapConnectionToRecords.ts | 31 +++++++++++++++++++ .../object-record/hooks/useFindManyRecords.ts | 4 +++ .../hooks/useGenerateFindManyRecordsQuery.ts | 1 + .../types/ObjectRecordConnection.ts | 1 + 4 files changed, 37 insertions(+) diff --git a/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useMapConnectionToRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useMapConnectionToRecords.ts index 66b7e45d4935..847b5c0e6cd4 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useMapConnectionToRecords.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useMapConnectionToRecords.ts @@ -11,6 +11,7 @@ export const emptyConnectionMock: ObjectRecordConnection = { startCursor: '', endCursor: '', }, + totalCount: 0, __typename: 'ObjectRecordConnection', }; @@ -46,6 +47,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -86,6 +88,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: startCursor: 'WyJjODVhODY3Yy01YThmLTQ4NjEtOGVkMi05NmMzOTAyNDg0MjMiXQ==', }, + totalCount: 1, }, }, }, @@ -106,6 +109,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -126,6 +130,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -146,6 +151,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -166,6 +172,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -186,6 +193,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -198,6 +206,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: startCursor: 'WyIyNDBkYTJlYy0yZDQwLTRlNDktOGRmNC05YzZhMDQ5MTkwZGYiXQ==', }, + totalCount: 6, }, }, }, @@ -225,6 +234,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -245,6 +255,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -257,6 +268,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: startCursor: 'WyI5M2M3MmQyZS1mNTE3LTQyZmQtODBhZS0xNDE3M2IzYjcwYWUiXQ==', }, + totalCount: 2, }, }, }, @@ -273,6 +285,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -300,6 +313,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -320,6 +334,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -340,6 +355,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -352,6 +368,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: startCursor: 'WyIxZDE1MTg1Mi00OTBmLTQ0NjYtODM5MS03MzNjZmQ2NmEwYzgiXQ==', }, + totalCount: 3, }, }, }, @@ -368,6 +385,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -384,6 +402,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -400,6 +419,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -427,6 +447,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -439,6 +460,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: startCursor: 'WyIyNDBkYTJlYy0yZDQwLTRlNDktOGRmNC05YzZhMDQ5MTkxZGYiXQ==', }, + totalCount: 1, }, }, }, @@ -466,6 +488,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -478,6 +501,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: startCursor: 'WyIyNDBkYTJlYy0yZDQwLTRlNDktOGRmNC05YzZhMDQ5MTkxZGUiXQ==', }, + totalCount: 1, }, }, }, @@ -494,6 +518,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -510,6 +535,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -550,6 +576,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: startCursor: 'WyIzN2I5NzE0MC0yNmI5LTQ5OGMtODM3Yi00ZjNkZTQ5OWFkODMiXQ==', }, + totalCount: 1, }, }, }, @@ -570,6 +597,7 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: hasPreviousPage: false, startCursor: null, }, + totalCount: 0, }, }, }, @@ -582,10 +610,12 @@ export const companiesConnectionWithPeopleConnectionWithFavoritesConnectionMock: startCursor: 'WyIwYWEwMGJlYi1hYzczLTQ3OTctODI0ZS04N2ExZjVhZWE5ZTAiXQ==', }, + totalCount: 2, }, }, }, ], + totalCount: 13, }; export const peopleWithTheirUniqueCompanies: ObjectRecordConnection< @@ -597,6 +627,7 @@ export const peopleWithTheirUniqueCompanies: ObjectRecordConnection< hasPreviousPage: false, startCursor: 'WyIwYWEwMGJlYi1hYzczLTQ3OTctODI0ZS04N2ExZjVhZWE5ZTAiXQ==', }, + totalCount: 15, edges: [ { cursor: 'WyIwYWEwMGJlYi1hYzczLTQ3OTctODI0ZS04N2ExZjVhZWE5ZTAiXQ==', diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts index efadecedc847..47f7afa2a5b6 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts @@ -146,6 +146,8 @@ export const useFindManyRecords = ({ edges: newEdges, pageInfo: fetchMoreResult?.[objectMetadataItem.namePlural].pageInfo, + totalCount: + fetchMoreResult?.[objectMetadataItem.namePlural].totalCount, }); return Object.assign({}, prev, { @@ -156,6 +158,8 @@ export const useFindManyRecords = ({ edges: newEdges, pageInfo: fetchMoreResult?.[objectMetadataItem.namePlural].pageInfo, + totalCount: + fetchMoreResult?.[objectMetadataItem.namePlural].totalCount, }, } as ObjectRecordQueryResult); }, diff --git a/packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsQuery.ts b/packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsQuery.ts index 5fb8d8471813..46cd279fc29a 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsQuery.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsQuery.ts @@ -43,6 +43,7 @@ export const useGenerateFindManyRecordsQuery = () => { startCursor endCursor } + totalCount } } `; diff --git a/packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts b/packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts index e8db81a3d3fc..52bb2160211d 100644 --- a/packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts +++ b/packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts @@ -11,4 +11,5 @@ export type ObjectRecordConnection = { startCursor?: Nullable; endCursor?: Nullable; }; + totalCount: number; }; From d7938fb7c34ae66a06f120dffe589e1afb12858c Mon Sep 17 00:00:00 2001 From: martmull Date: Wed, 14 Feb 2024 14:38:15 +0100 Subject: [PATCH 2/6] Add totalCount to object board --- .../object-record/hooks/useFindManyRecords.ts | 1 + .../hooks/useLoadRecordIndexBoard.ts | 21 ++++++++++++------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts index 47f7afa2a5b6..78aafcf682ae 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts @@ -228,6 +228,7 @@ export const useFindManyRecords = ({ return { objectMetadataItem, records: useRecordsWithoutConnection ? recordsWithoutConnection : records, + totalCount: data?.[objectMetadataItem.namePlural].totalCount || 0, loading, error, fetchMoreRecords, diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts index d0a0042b83c2..622be1ecdfce 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts @@ -56,12 +56,17 @@ export const useLoadRecordIndexBoard = ({ recordIndexIsCompactModeActiveState, ); - const { records, loading, fetchMoreRecords, queryStateIdentifier } = - useFindManyRecords({ - objectNameSingular, - filter: requestFilters, - orderBy, - }); + const { + records, + totalCount, + loading, + fetchMoreRecords, + queryStateIdentifier, + } = useFindManyRecords({ + objectNameSingular, + filter: requestFilters, + orderBy, + }); const { setEntityCountInCurrentView } = useViewBar({ viewBarId, @@ -80,8 +85,8 @@ export const useLoadRecordIndexBoard = ({ }, [records, setRecordsInStore]); useEffect(() => { - setEntityCountInCurrentView(records.length); - }, [records.length, setEntityCountInCurrentView]); + setEntityCountInCurrentView(totalCount); + }, [totalCount, setEntityCountInCurrentView]); useEffect(() => { setIsCompactModeActive(recordIndexIsCompactModeActive); From 4f85240f417bdb878258c37dd25196d0c8e67e02 Mon Sep 17 00:00:00 2001 From: martmull Date: Wed, 14 Feb 2024 14:38:28 +0100 Subject: [PATCH 3/6] WIP Add totalCount to object table --- .../hooks/useLoadRecordIndexTable.ts | 26 ++++++++++++------- .../components/RecordTableBodyEffect.tsx | 5 ++-- .../hooks/internal/useSetRecordTableData.ts | 7 ++--- .../components/SettingsObjectItemTableRow.tsx | 5 ++-- 4 files changed, 25 insertions(+), 18 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts index 8e3947b7dc3e..807257e4ff58 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts +++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts @@ -41,19 +41,25 @@ export const useLoadRecordIndexTable = (objectNameSingular: string) => { objectMetadataItem?.fields ?? [], ); - const { records, loading, fetchMoreRecords, queryStateIdentifier } = - useFindManyRecords({ - objectNameSingular, - filter: requestFilters, - orderBy, - onCompleted: () => { - setLastRowVisible(false); - setIsRecordTableInitialLoading(false); - }, - }); + const { + records, + loading, + totalCount, + fetchMoreRecords, + queryStateIdentifier, + } = useFindManyRecords({ + objectNameSingular, + filter: requestFilters, + orderBy, + onCompleted: () => { + setLastRowVisible(false); + setIsRecordTableInitialLoading(false); + }, + }); return { records: isCurrentWorkspaceActive ? records : signInBackgroundMockCompanies, + totalCount: totalCount || 0, loading, fetchMoreRecords, queryStateIdentifier, diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx index daa53951a613..6b215db7ed7b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx @@ -15,6 +15,7 @@ export const RecordTableBodyEffect = ({ const { fetchMoreRecords: fetchMoreObjects, records, + totalCount, setRecordTableData, queryStateIdentifier, loading, @@ -32,9 +33,9 @@ export const RecordTableBodyEffect = ({ useEffect(() => { if (!loading) { - setRecordTableData(records); + setRecordTableData(records, totalCount); } - }, [records, setRecordTableData, loading]); + }, [records, totalCount, setRecordTableData, loading]); useEffect(() => { if (tableLastRowVisible && !isFetchingMoreObjects) { diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index 007699bf46c3..ed2a52f81e58 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -19,7 +19,7 @@ export const useSetRecordTableData = ({ return useRecoilCallback( ({ set, snapshot }) => - (newEntityArray: T[]) => { + (newEntityArray: T[], totalCount: number) => { for (const entity of newEntityArray) { // TODO: refactor with scoped state later const currentEntity = snapshot @@ -37,9 +37,10 @@ export const useSetRecordTableData = ({ if (!isDeeplyEqual(currentRowIds, entityIds)) { set(getTableRowIdsState(), entityIds); } + console.log(newEntityArray.length); - set(getNumberOfTableRowsState(), entityIds.length); - onEntityCountChange(entityIds.length); + set(getNumberOfTableRowsState(), totalCount); + onEntityCountChange(totalCount); }, [getNumberOfTableRowsState, getTableRowIdsState, onEntityCountChange], ); diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index 498997a7b854..ba84e7cc988a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -36,10 +36,9 @@ export const SettingsObjectItemTableRow = ({ }: SettingsObjectItemTableRowProps) => { const theme = useTheme(); - const { records } = useFindManyRecords({ + const { totalCount } = useFindManyRecords({ objectNameSingular: objectItem.nameSingular, }); - const { getIcon } = useIcons(); const Icon = getIcon(objectItem.icon); @@ -61,7 +60,7 @@ export const SettingsObjectItemTableRow = ({ {objectItem.fields.filter((field) => !field.isSystem).length} - {records.length} + {totalCount} {action} ); From 11dd4e464404c1e51764bb440f59626f6ed99479 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Fri, 16 Feb 2024 13:28:59 +0100 Subject: [PATCH 4/6] Update query total count on update / delete optimistic effects --- .../utils/triggerCreateRecordsOptimisticEffect.ts | 8 ++++++++ .../utils/triggerDeleteRecordsOptimisticEffect.ts | 7 +++++++ 2 files changed, 15 insertions(+) diff --git a/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect.ts b/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect.ts index 5ed242589f59..ec4061eef9e1 100644 --- a/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect.ts +++ b/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect.ts @@ -63,6 +63,13 @@ export const triggerCreateRecordsOptimisticEffect = ({ 'edges', rootQueryCachedObjectRecordConnection, ); + + const rootQueryCachedRecordTotalCount = + readField( + 'totalCount', + rootQueryCachedObjectRecordConnection, + ) || 0; + const nextRootQueryCachedRecordEdges = rootQueryCachedRecordEdges ? [...rootQueryCachedRecordEdges] : []; @@ -109,6 +116,7 @@ export const triggerCreateRecordsOptimisticEffect = ({ return { ...rootQueryCachedObjectRecordConnection, edges: nextRootQueryCachedRecordEdges, + totalCount: rootQueryCachedRecordTotalCount + 1, }; }, }, diff --git a/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerDeleteRecordsOptimisticEffect.ts b/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerDeleteRecordsOptimisticEffect.ts index 264f2c100dc1..2478a3e30b17 100644 --- a/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerDeleteRecordsOptimisticEffect.ts +++ b/packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerDeleteRecordsOptimisticEffect.ts @@ -50,6 +50,12 @@ export const triggerDeleteRecordsOptimisticEffect = ({ rootQueryCachedObjectRecordConnection, ); + const totalCount = + readField( + 'totalCount', + rootQueryCachedObjectRecordConnection, + ) || 0; + const nextCachedEdges = cachedEdges?.filter((cachedEdge) => { const nodeId = readField('id', cachedEdge.node); @@ -71,6 +77,7 @@ export const triggerDeleteRecordsOptimisticEffect = ({ return { ...rootQueryCachedObjectRecordConnection, edges: nextCachedEdges, + totalCount: totalCount - recordIdsToDelete.length, }; }, }, From dd7dee30e5c4138b31f81267c57dc0897510f3cd Mon Sep 17 00:00:00 2001 From: martmull Date: Fri, 16 Feb 2024 13:52:29 +0100 Subject: [PATCH 5/6] Remove console log --- .../record-table/hooks/internal/useSetRecordTableData.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts index ed2a52f81e58..f6fc8e1df828 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts @@ -37,7 +37,6 @@ export const useSetRecordTableData = ({ if (!isDeeplyEqual(currentRowIds, entityIds)) { set(getTableRowIdsState(), entityIds); } - console.log(newEntityArray.length); set(getNumberOfTableRowsState(), totalCount); onEntityCountChange(totalCount); From d709d254e01f96ec392aa418c6d8f2cbf3ed0dd4 Mon Sep 17 00:00:00 2001 From: martmull Date: Fri, 16 Feb 2024 14:25:58 +0100 Subject: [PATCH 6/6] Load fewer data for totalcount --- .../object-details/components/SettingsObjectItemTableRow.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index ba84e7cc988a..8e756f7b5e9e 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -38,6 +38,7 @@ export const SettingsObjectItemTableRow = ({ const { totalCount } = useFindManyRecords({ objectNameSingular: objectItem.nameSingular, + depth: 0, }); const { getIcon } = useIcons(); const Icon = getIcon(objectItem.icon);