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, }; }, }, 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..78aafcf682ae 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); }, @@ -224,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/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/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); 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..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 @@ -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 @@ -38,8 +38,8 @@ export const useSetRecordTableData = ({ set(getTableRowIdsState(), entityIds); } - set(getNumberOfTableRowsState(), entityIds.length); - onEntityCountChange(entityIds.length); + set(getNumberOfTableRowsState(), totalCount); + onEntityCountChange(totalCount); }, [getNumberOfTableRowsState, getTableRowIdsState, onEntityCountChange], ); 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; }; 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..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 @@ -36,10 +36,10 @@ export const SettingsObjectItemTableRow = ({ }: SettingsObjectItemTableRowProps) => { const theme = useTheme(); - const { records } = useFindManyRecords({ + const { totalCount } = useFindManyRecords({ objectNameSingular: objectItem.nameSingular, + depth: 0, }); - const { getIcon } = useIcons(); const Icon = getIcon(objectItem.icon); @@ -61,7 +61,7 @@ export const SettingsObjectItemTableRow = ({ {objectItem.fields.filter((field) => !field.isSystem).length} - {records.length} + {totalCount} {action} );