feat: replace all records ids state by selector

twentyhq · Nov 28, 2024 · b9200de · b9200de
1 parent f9f2d8d
commit b9200de
Show file tree

Hide file tree

Showing 23 changed files with 185 additions and 213 deletions.
diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
@@ -16,8 +16,8 @@ import { RecordBoardComponentInstanceContext } from '@/object-record/record-boar
 import { getDraggedRecordPosition } from '@/object-record/record-board/utils/getDraggedRecordPosition';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
 import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
+import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
@@ -73,8 +73,8 @@ export const RecordBoard = () => {
     recordIndexRowIdsByGroupComponentFamilyState,
   );
 
-  const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
-    recordIndexAllRowIdsComponentState,
+  const recordIndexAllRecordIdsState = useRecoilComponentCallbackStateV2(
+    recordIndexAllRecordIdsComponentSelector,
   );
 
   const { resetRecordSelection, setRecordAsSelected } =
@@ -97,14 +97,14 @@ export const RecordBoard = () => {
       () => {
         const allRecordIds = getSnapshotValue(
           snapshot,
-          recordIndexAllRowIdsState,
+          recordIndexAllRecordIdsState,
         );
 
         for (const recordId of allRecordIds) {
           setRecordAsSelected(recordId, true);
         }
       },
-    [recordIndexAllRowIdsState, setRecordAsSelected],
+    [recordIndexAllRecordIdsState, setRecordAsSelected],
   );
 
   useScopedHotkeys('ctrl+a,meta+a', selectAll, TableHotkeyScope.Table);

diff --git a/...s/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts b/...s/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordBoardRecordIds.ts
@@ -3,7 +3,6 @@ import { useRecoilCallback } from 'recoil';
 import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { visibleRecordGroupIdsComponentSelector } from '@/object-record/record-group/states/selectors/visibleRecordGroupIdsComponentSelector';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
 import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition';
@@ -22,11 +21,6 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
     recordBoardId,
   );
 
-  const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
-    recordIndexAllRowIdsComponentState,
-    recordBoardId,
-  );
-
   const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2(
     recordIndexRowIdsByGroupComponentFamilyState,
     recordBoardId,
@@ -35,11 +29,6 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
   const setRecordIds = useRecoilCallback(
     ({ set, snapshot }) =>
       (records: ObjectRecord[]) => {
-        const existingAllRowIds = getSnapshotValue(
-          snapshot,
-          recordIndexAllRowIdsState,
-        );
-
         const recordGroupIds = getSnapshotValue(
           snapshot,
           visibleRecordGroupIdsSelector,
@@ -80,27 +69,11 @@ export const useSetRecordBoardRecordIds = (recordBoardId?: string) => {
             );
           }
         }
-
-        const allRowIds: string[] = [];
-
-        for (const recordGroupId of recordGroupIds) {
-          const tableRowIdsByGroup = getSnapshotValue(
-            snapshot,
-            recordIndexRowIdsByGroupFamilyState(recordGroupId),
-          );
-
-          allRowIds.push(...tableRowIdsByGroup);
-        }
-
-        if (!isDeeplyEqual(existingAllRowIds, allRowIds)) {
-          set(recordIndexAllRowIdsState, allRowIds);
-        }
       },
     [
       visibleRecordGroupIdsSelector,
       recordIndexRowIdsByGroupFamilyState,
       recordGroupFieldMetadataState,
-      recordIndexAllRowIdsState,
     ],
   );
 

diff --git a/...ges/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts b/...ges/twenty-front/src/modules/object-record/record-board/hooks/useSetRecordIdsForColumn.ts
@@ -2,8 +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 { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
 import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { sortRecordsByPosition } from '@/object-record/utils/sortRecordsByPosition';
@@ -13,21 +11,11 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 import { isDefined } from '~/utils/isDefined';
 
 export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
-  const recordGroupIdsState = useRecoilComponentCallbackStateV2(
-    recordGroupIdsComponentState,
-    recordBoardId,
-  );
-
   const recordGroupFieldMetadataState = useRecoilComponentCallbackStateV2(
     recordGroupFieldMetadataComponentState,
     recordBoardId,
   );
 
-  const recordIndexAllRowIdsState = useRecoilComponentCallbackStateV2(
-    recordIndexAllRowIdsComponentState,
-    recordBoardId,
-  );
-
   const recordIndexRowIdsByGroupFamilyState = useRecoilComponentCallbackStateV2(
     recordIndexRowIdsByGroupComponentFamilyState,
     recordBoardId,
@@ -36,13 +24,6 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
   const setRecordIdsForColumn = useRecoilCallback(
     ({ set, snapshot }) =>
       (currentRecordGroupId: string, records: ObjectRecord[]) => {
-        const existingAllRowIds = getSnapshotValue(
-          snapshot,
-          recordIndexAllRowIdsState,
-        );
-
-        const recordGroupIds = getSnapshotValue(snapshot, recordGroupIdsState);
-
         const recordGroup = getSnapshotValue(
           snapshot,
           recordGroupDefinitionFamilyState(currentRecordGroupId),
@@ -76,31 +57,8 @@ export const useSetRecordIdsForColumn = (recordBoardId?: string) => {
             recordGroupRowIds,
           );
         }
-
-        const allRowIds: string[] = [];
-
-        for (const recordGroupId of recordGroupIds) {
-          const tableRowIdsByGroup =
-            recordGroupId !== currentRecordGroupId
-              ? getSnapshotValue(
-                  snapshot,
-                  recordIndexRowIdsByGroupFamilyState(recordGroupId),
-                )
-              : recordGroupRowIds;
-
-          allRowIds.push(...tableRowIdsByGroup);
-        }
-
-        if (!isDeeplyEqual(existingAllRowIds, allRowIds)) {
-          set(recordIndexAllRowIdsState, allRowIds);
-        }
       },
-    [
-      recordGroupIdsState,
-      recordIndexRowIdsByGroupFamilyState,
-      recordGroupFieldMetadataState,
-      recordIndexAllRowIdsState,
-    ],
+    [recordIndexRowIdsByGroupFamilyState, recordGroupFieldMetadataState],
   );
 
   return {

diff --git a/...ect-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts b/...ect-record/record-board/states/selectors/recordBoardSelectedRecordIdsComponentSelector.ts
@@ -1,6 +1,6 @@
 import { RecordBoardComponentInstanceContext } from '@/object-record/record-board/states/contexts/RecordBoardComponentInstanceContext';
 import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
+import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
 
 export const recordBoardSelectedRecordIdsComponentSelector =
@@ -10,11 +10,15 @@ export const recordBoardSelectedRecordIdsComponentSelector =
     get:
       ({ instanceId }) =>
       ({ get }) => {
-        const allRowIds = get(
-          recordIndexAllRowIdsComponentState.atomFamily({ instanceId }),
+        const allRecordIds = get(
+          // TODO: This selector use a context different from the one used in the snippet
+          // its working for now as the instanceId is the same but we should change this
+          recordIndexAllRecordIdsComponentSelector.selectorFamily({
+            instanceId,
+          }),
         );
 
-        return allRowIds.filter(
+        return allRecordIds.filter(
           (recordId) =>
             get(
               isRecordBoardCardSelectedComponentFamilyState.atomFamily({

diff --git a/...front/src/modules/object-record/record-index/states/recordIndexAllRowIdsComponentState.ts b/...front/src/modules/object-record/record-index/states/recordIndexAllRowIdsComponentState.ts
diff --git a/...s/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts b/...s/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector.ts
@@ -0,0 +1,60 @@
+import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState';
+import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
+import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
+import { v4 } from 'uuid';
+
+/**
+ * Do not use this key outside of this file.
+ * This is a temporary key to store the record ids for the default record group.
+ */
+const defaultFamilyKey = v4();
+
+export const recordIndexAllRecordIdsComponentSelector =
+  createComponentSelectorV2<ObjectRecord['id'][]>({
+    key: 'recordIndexAllRecordIdsComponentSelector',
+    componentInstanceContext: ViewComponentInstanceContext,
+    get:
+      ({ instanceId }) =>
+      ({ get }) => {
+        const recordGroupIds = get(
+          recordGroupIdsComponentState.atomFamily({
+            instanceId,
+          }),
+        );
+
+        if (recordGroupIds.length === 0) {
+          return get(
+            recordIndexRowIdsByGroupComponentFamilyState.atomFamily({
+              instanceId,
+              familyKey: defaultFamilyKey,
+            }),
+          );
+        }
+
+        return recordGroupIds.reduce<ObjectRecord['id'][]>(
+          (acc, recordGroupId) => {
+            const rowIds = get(
+              recordIndexRowIdsByGroupComponentFamilyState.atomFamily({
+                instanceId,
+                familyKey: recordGroupId,
+              }),
+            );
+
+            return [...acc, ...rowIds];
+          },
+          [],
+        );
+      },
+    set:
+      ({ instanceId }) =>
+      ({ set }, recordIds) =>
+        set(
+          recordIndexRowIdsByGroupComponentFamilyState.atomFamily({
+            instanceId,
+            familyKey: defaultFamilyKey,
+          }),
+          recordIds,
+        ),
+  });
diff --git a/...d/record-index/states/selectors/recordIndexRecordGroupIsDraggableSortComponentSelector.ts b/...d/record-index/states/selectors/recordIndexRecordGroupIsDraggableSortComponentSelector.ts
@@ -4,7 +4,7 @@ import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 
 export const recordIndexRecordGroupIsDraggableSortComponentSelector =
-  createComponentSelectorV2({
+  createComponentSelectorV2<boolean>({
     key: 'recordIndexRecordGroupIsDraggableSortComponentSelector',
     componentInstanceContext: ViewComponentInstanceContext,
     get:

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx
@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { isNonEmptyString, isNull } from '@sniptt/guards';
 
 import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
+import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
 import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
 import { RecordTableStickyEffect } from '@/object-record/record-table/components/RecordTableStickyEffect';
@@ -53,8 +53,8 @@ export const RecordTable = ({
     recordTableId,
   );
 
-  const allRowIds = useRecoilComponentValueV2(
-    recordIndexAllRowIdsComponentState,
+  const allRecordIds = useRecoilComponentValueV2(
+    recordIndexAllRecordIdsComponentSelector,
     recordTableId,
   );
 
@@ -70,7 +70,7 @@ export const RecordTable = ({
 
   const recordTableIsEmpty =
     !isRecordTableInitialLoading &&
-    allRowIds.length === 0 &&
+    allRecordIds.length === 0 &&
     isNull(pendingRecordId);
 
   const { resetTableRowSelection, setRowSelected } = useRecordTable({

diff --git a/...-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx b/...-front/src/modules/object-record/record-table/components/RecordTableNoRecordGroupRows.tsx
@@ -1,16 +1,16 @@
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
+import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableNoRecordGroupRows = () => {
-  const allRowIds = useRecoilComponentValueV2(
-    recordIndexAllRowIdsComponentState,
+  const allRecordIds = useRecoilComponentValueV2(
+    recordIndexAllRecordIdsComponentSelector,
   );
 
   return (
     <>
-      {allRowIds.map((recordId, rowIndex) => {
+      {allRecordIds.map((recordId, rowIndex) => {
         return (
           <RecordTableRow
             key={recordId}

diff --git a/...ty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx b/...ty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx
@@ -1,6 +1,6 @@
 import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
 import { recordIndexRowIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRowIdsByGroupComponentFamilyState';
+import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
 import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
@@ -14,8 +14,8 @@ const MotionRecordTableRow = motion(RecordTableRow);
 export const RecordTableRecordGroupRows = () => {
   const currentRecordGroupId = useCurrentRecordGroupId();
 
-  const allRowIds = useRecoilComponentValueV2(
-    recordIndexAllRowIdsComponentState,
+  const allRecordIds = useRecoilComponentValueV2(
+    recordIndexAllRecordIdsComponentSelector,
   );
 
   const recordGroupRowIds = useRecoilComponentFamilyValueV2(
@@ -29,8 +29,8 @@ export const RecordTableRecordGroupRows = () => {
   );
 
   const rowIndexMap = useMemo(
-    () => new Map(allRowIds.map((id, index) => [id, index])),
-    [allRowIds],
+    () => new Map(allRecordIds.map((recordId, index) => [recordId, index])),
+    [allRecordIds],
   );
 
   // TODO: Animation is not working, find a way to make it works

diff --git a/...src/modules/object-record/record-table/empty-state/components/RecordTableEmptyHandler.tsx b/...src/modules/object-record/record-table/empty-state/components/RecordTableEmptyHandler.tsx
@@ -1,6 +1,6 @@
 import { isNull } from '@sniptt/guards';
 
-import { recordIndexAllRowIdsComponentState } from '@/object-record/record-index/states/recordIndexAllRowIdsComponentState';
+import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
 import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
 import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
 import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
@@ -20,8 +20,8 @@ export const RecordTableEmptyHandler = ({
     recordTableId,
   );
 
-  const allRowIds = useRecoilComponentValueV2(
-    recordIndexAllRowIdsComponentState,
+  const allRecordIds = useRecoilComponentValueV2(
+    recordIndexAllRecordIdsComponentSelector,
     recordTableId,
   );
 
@@ -32,7 +32,7 @@ export const RecordTableEmptyHandler = ({
 
   const recordTableIsEmpty =
     !isRecordTableInitialLoading &&
-    allRowIds.length === 0 &&
+    allRecordIds.length === 0 &&
     isNull(pendingRecordId);
 
   if (recordTableIsEmpty) {