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

3757 update frontend to show correct view count (#3967)

Browse Source 
* Add totalCount to fetch record request

* Add totalCount to object board

* WIP Add totalCount to object table

* Update query total count on update / delete optimistic effects

* Remove console log

* Load fewer data for totalcount

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
martmull
2024-02-16 14:33:51 +01:00
committed by GitHub
parent a5ecbf7df5
commit a06b6c9078
11 changed files with 91 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect.ts
View File

@ -63,6 +63,13 @@ export const triggerCreateRecordsOptimisticEffect = ({
'edges',
rootQueryCachedObjectRecordConnection,
);
const rootQueryCachedRecordTotalCount =
readField<number>(
'totalCount',
rootQueryCachedObjectRecordConnection,
) || 0;
const nextRootQueryCachedRecordEdges = rootQueryCachedRecordEdges
? [...rootQueryCachedRecordEdges]
: [];
@ -109,6 +116,7 @@ export const triggerCreateRecordsOptimisticEffect = ({
return {
...rootQueryCachedObjectRecordConnection,
edges: nextRootQueryCachedRecordEdges,
totalCount: rootQueryCachedRecordTotalCount + 1,
};
},
},

7
packages/twenty-front/src/modules/apollo/optimistic-effect/utils/triggerDeleteRecordsOptimisticEffect.ts
View File

@ -50,6 +50,12 @@ export const triggerDeleteRecordsOptimisticEffect = ({
rootQueryCachedObjectRecordConnection,
);
const totalCount =
readField<number>(
'totalCount',
rootQueryCachedObjectRecordConnection,
) || 0;
const nextCachedEdges =
cachedEdges?.filter((cachedEdge) => {
const nodeId = readField<string>('id', cachedEdge.node);
@ -71,6 +77,7 @@ export const triggerDeleteRecordsOptimisticEffect = ({
return {
...rootQueryCachedObjectRecordConnection,
edges: nextCachedEdges,
totalCount: totalCount - recordIdsToDelete.length,
};
},
},

31
packages/twenty-front/src/modules/object-record/hooks/__mocks__/useMapConnectionToRecords.ts
View File

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

5
packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts
View File

@ -146,6 +146,8 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
edges: newEdges,
pageInfo:
fetchMoreResult?.[objectMetadataItem.namePlural].pageInfo,
totalCount:
fetchMoreResult?.[objectMetadataItem.namePlural].totalCount,
});
return Object.assign({}, prev, {
@ -156,6 +158,8 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
edges: newEdges,
pageInfo:
fetchMoreResult?.[objectMetadataItem.namePlural].pageInfo,
totalCount:
fetchMoreResult?.[objectMetadataItem.namePlural].totalCount,
},
} as ObjectRecordQueryResult<T>);
},
@ -224,6 +228,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
return {
objectMetadataItem,
records: useRecordsWithoutConnection ? recordsWithoutConnection : records,
totalCount: data?.[objectMetadataItem.namePlural].totalCount || 0,
loading,
error,
fetchMoreRecords,

1
packages/twenty-front/src/modules/object-record/hooks/useGenerateFindManyRecordsQuery.ts
View File

@ -43,6 +43,7 @@ export const useGenerateFindManyRecordsQuery = () => {
startCursor
endCursor
}
totalCount
}
}
`;

21
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoard.ts
View File

@ -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);

26
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexTable.ts
View File

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

5
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableBodyEffect.tsx
View File

@ -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) {

6
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useSetRecordTableData.ts
View File

@ -19,7 +19,7 @@ export const useSetRecordTableData = ({
return useRecoilCallback(
({ set, snapshot }) =>
<T extends { id: string }>(newEntityArray: T[]) => {
<T extends { id: string }>(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],
);

1
packages/twenty-front/src/modules/object-record/types/ObjectRecordConnection.ts
View File

@ -11,4 +11,5 @@ export type ObjectRecordConnection<T extends ObjectRecord = ObjectRecord> = {
startCursor?: Nullable<string>;
endCursor?: Nullable<string>;
};
totalCount: number;
};

6
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
View File

@ -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 = ({
<TableCell align="right">
{objectItem.fields.filter((field) => !field.isSystem).length}
</TableCell>
<TableCell align="right">{records.length}</TableCell>
<TableCell align="right">{totalCount}</TableCell>
<StyledActionTableCell>{action}</StyledActionTableCell>
</StyledObjectTableRow>
);