From 3d7f4b7971e4c7de7f1106776a8a0b58146b7e87 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Fri, 7 Mar 2025 15:47:34 +0100
Subject: [PATCH] Fix view picker total count on board (#10697)

This PR is a follow-up of https://github.com/twentyhq/twenty/pull/10612
where the method of computation of total count was only taking records
fetched on the front end.

In this PR we use `totalCount` returned by `useFindManyRecords` instead,
which returns the total count in DB for the given filters.

We also set `shouldMatchRootQueryFilter` on board card create mutation
to avoid optimistic rendering issues.

Fixes https://github.com/twentyhq/twenty/issues/10598
---
 .../hooks/useSetRecordIdsForColumn.ts             | 15 +--------------
 .../components/RecordIndexBoardContainer.tsx      |  5 ++++-
 .../hooks/useLoadRecordIndexBoardColumn.ts        |  9 +++++++++
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts
index c68bd51f4..1d1bf6ab9 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts
@@ -2,7 +2,6 @@ import { useRecoilCallback } from 'recoil';
 
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
-import { useSetRecordIndexEntityCount } from '@/object-record/record-index/hooks/useSetRecordIndexEntityCount';
 import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@@ -22,9 +21,6 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
       recordBoardId,
     );
 
-  const { setRecordIndexEntityCount } =
-    useSetRecordIndexEntityCount(recordBoardId);
-
   const setRecordIdsForColumn = useRecoilCallback(
     ({ set, snapshot }) =>
       (currentRecordGroupId: string, records: ObjectRecord[]) => {
@@ -59,18 +55,9 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
             recordIndexRecordIdsByGroupFamilyState(currentRecordGroupId),
             recordGroupRowIds,
           );
-
-          setRecordIndexEntityCount(
-            recordGroupRowIds.length,
-            currentRecordGroupId,
-          );
         }
       },
-    [
-      recordIndexRecordIdsByGroupFamilyState,
-      recordGroupFieldMetadataState,
-      setRecordIndexEntityCount,
-    ],
+    [recordIndexRecordIdsByGroupFamilyState, recordGroupFieldMetadataState],
   );
 
   return {
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx
index 20d5f570e..edd219383 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainer.tsx
@@ -33,7 +33,10 @@ export const RecordIndexBoardContainer = ({
 
   const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular });
   const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular });
-  const { createOneRecord } = useCreateOneRecord({ objectNameSingular });
+  const { createOneRecord } = useCreateOneRecord({
+    objectNameSingular,
+    shouldMatchRootQueryFilter: true,
+  });
 
   if (!selectFieldMetadataItem) {
     return;
diff --git a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts
index ae273510c..304c472fd 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts
@@ -10,6 +10,7 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
 import { computeRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hooks/useRecordBoardRecordGqlFields';
+import { useSetRecordIndexEntityCount } from '@/object-record/record-index/hooks/useSetRecordIndexEntityCount';
 import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/states/recordIndexViewFilterGroupsState';
 import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
@@ -91,6 +92,7 @@ export const useLoadRecordIndexBoardColumn = ({
     fetchMoreRecords,
     queryStateIdentifier,
     hasNextPage,
+    totalCount,
   } = useFindManyRecords({
     objectNameSingular,
     filter,
@@ -99,6 +101,13 @@ export const useLoadRecordIndexBoardColumn = ({
     limit: 10,
   });
 
+  const { setRecordIndexEntityCount } =
+    useSetRecordIndexEntityCount(recordBoardId);
+
+  useEffect(() => {
+    setRecordIndexEntityCount(totalCount ?? 0, columnId);
+  }, [setRecordIndexEntityCount, totalCount, columnId]);
+
   useEffect(() => {
     setRecordIdsForColumn(columnId, records);
   }, [records, setRecordIdsForColumn, columnId]);