[Aggregate queries for table views - #1] Introduce aggregateOperationForViewFieldState (twentyhq#9010)

Introducing aggregateOperationForViewFieldState to add a state storing
the aggregate operation for each view field

Author: ijreilly

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -28,6 +28,7 @@ import { useSetRecordGroup } from '@/object-record/record-group/hooks/useSetReco
 import { RecordIndexFiltersToContextStoreEffect } from '@/object-record/record-index/components/RecordIndexFiltersToContextStoreEffect';
 import { recordIndexKanbanAggregateOperationState } from '@/object-record/record-index/states/recordIndexKanbanAggregateOperationState';
 import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/states/recordIndexViewFilterGroupsState';
+import { aggregateOperationForViewFieldState } from '@/object-record/record-table/record-table-footer/states/aggregateOperationForViewFieldState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { ViewBar } from '@/views/components/ViewBar';
 import { ViewField } from '@/views/types/ViewField';
@@ -118,6 +119,25 @@ export const RecordIndexContainer = () => {
         ) {
           set(recordIndexFieldDefinitionsState, newFieldDefinitions);
         }
+
+        for (const viewField of viewFields) {
+          const aggregateOperationForViewField = snapshot
+            .getLoadable(
+              aggregateOperationForViewFieldState({
+                viewFieldId: viewField.id,
+              }),
+            )
+            .getValue();
+
+          if (aggregateOperationForViewField !== viewField.aggregateOperation) {
+            set(
+              aggregateOperationForViewFieldState({
+                viewFieldId: viewField.id,
+              }),
+              viewField.aggregateOperation,
+            );
+          }
+        }
       },
     [columnDefinitions, setTableColumns],
   );

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx

@@ -6,7 +6,11 @@ import { RecordIndexRootPropsContext } from '@/object-record/record-index/contex
 import { useHandleToggleColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleColumnFilter';
 import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
+import { aggregateOperationForViewFieldState } from '@/object-record/record-table/record-table-footer/states/aggregateOperationForViewFieldState';
+import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useSetRecordCountInCurrentView } from '@/views/hooks/useSetRecordCountInCurrentView';
+import { ViewField } from '@/views/types/ViewField';
+import { useRecoilCallback } from 'recoil';
 
 export const RecordIndexTableContainerEffect = () => {
   const { recordIndexId, objectNameSingular } = useContext(
@@ -48,6 +52,8 @@ export const RecordIndexTableContainerEffect = () => {
     viewBarId,
   });
 
+  const { currentViewWithSavedFiltersAndSorts } = useGetCurrentView();
+
   useEffect(() => {
     setOnToggleColumnFilter(
       () => (fieldMetadataId: string) =>
@@ -68,5 +74,37 @@ export const RecordIndexTableContainerEffect = () => {
     );
   }, [setRecordCountInCurrentView, setOnEntityCountChange]);
 
+  const setViewFieldAggregateOperation = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (viewField: ViewField) => {
+        const aggregateOperationForViewField = snapshot
+          .getLoadable(
+            aggregateOperationForViewFieldState({
+              viewFieldId: viewField.id,
+            }),
+          )
+          .getValue();
+
+        if (aggregateOperationForViewField !== viewField.aggregateOperation) {
+          set(
+            aggregateOperationForViewFieldState({
+              viewFieldId: viewField.id,
+            }),
+            viewField.aggregateOperation,
+          );
+        }
+      },
+    [],
+  );
+
+  useEffect(() => {
+    currentViewWithSavedFiltersAndSorts?.viewFields.forEach((viewField) => {
+      setViewFieldAggregateOperation(viewField);
+    });
+  }, [
+    currentViewWithSavedFiltersAndSorts?.viewFields,
+    setViewFieldAggregateOperation,
+  ]);
+
   return <></>;
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/states/aggregateOperationForViewFieldState.ts

@@ -0,0 +1,10 @@
+import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
+import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
+
+export const aggregateOperationForViewFieldState = createFamilyState<
+  AGGREGATE_OPERATIONS | null | undefined,
+  { viewFieldId: string }
+>({
+  key: 'aggregateOperationForViewFieldState',
+  defaultValue: null,
+});