refactor context store states

twentyhq · Oct 18, 2024 · ffbbf01 · ffbbf01
1 parent b8e2d98
commit ffbbf01
Show file tree

Hide file tree

Showing 22 changed files with 202 additions and 288 deletions.
diff --git a/...t/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx b/...t/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx
@@ -1,10 +1,13 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
-import { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
 import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
+import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsState';
+import { computeContextStoreFilters } from '@/context-store/utils/computeContextStoreFilters';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { DELETE_MAX_COUNT } from '@/object-record/constants/DeleteMaxCount';
 import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
+import { useFetchAllRecordIds } from '@/object-record/hooks/useFetchAllRecordIds';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useCallback, useEffect, useState } from 'react';
@@ -39,12 +42,23 @@ export const DeleteRecordsActionEffect = ({
 
   const { favorites, deleteFavorite } = useFavorites();
 
-  const { totalCount: numberOfSelectedRecords, fetchAllRecordIds } =
-    useContextStoreSelectedRecords({
-      recordGqlFields: {
-        id: true,
-      },
-    });
+  const contextStoreNumberOfSelectedRecords = useRecoilValue(
+    contextStoreNumberOfSelectedRecordsState,
+  );
+
+  const contextStoreTargetedRecordsRule = useRecoilValue(
+    contextStoreTargetedRecordsRuleState,
+  );
+
+  const filter = computeContextStoreFilters(
+    contextStoreTargetedRecordsRule,
+    objectMetadataItem ?? undefined,
+  );
+
+  const { fetchAllRecordIds } = useFetchAllRecordIds({
+    objectNameSingular: objectMetadataItem?.nameSingular ?? '',
+    filter,
+  });
 
   const handleDeleteClick = useCallback(async () => {
     const recordIdsToDelete = await fetchAllRecordIds();
@@ -76,9 +90,9 @@ export const DeleteRecordsActionEffect = ({
 
   const canDelete =
     !isRemoteObject &&
-    isDefined(numberOfSelectedRecords) &&
-    numberOfSelectedRecords < DELETE_MAX_COUNT &&
-    numberOfSelectedRecords > 0;
+    isDefined(contextStoreNumberOfSelectedRecords) &&
+    contextStoreNumberOfSelectedRecords < DELETE_MAX_COUNT &&
+    contextStoreNumberOfSelectedRecords > 0;
 
   useEffect(() => {
     if (canDelete) {
@@ -95,17 +109,19 @@ export const DeleteRecordsActionEffect = ({
           <ConfirmationModal
             isOpen={isDeleteRecordsModalOpen}
             setIsOpen={setIsDeleteRecordsModalOpen}
-            title={`Delete ${numberOfSelectedRecords} ${
-              numberOfSelectedRecords === 1 ? `record` : 'records'
+            title={`Delete ${contextStoreNumberOfSelectedRecords} ${
+              contextStoreNumberOfSelectedRecords === 1 ? `record` : 'records'
             }`}
             subtitle={`Are you sure you want to delete ${
-              numberOfSelectedRecords === 1 ? 'this record' : 'these records'
+              contextStoreNumberOfSelectedRecords === 1
+                ? 'this record'
+                : 'these records'
             }? ${
-              numberOfSelectedRecords === 1 ? 'It' : 'They'
+              contextStoreNumberOfSelectedRecords === 1 ? 'It' : 'They'
             } can be recovered from the Options menu.`}
             onConfirmClick={() => handleDeleteClick()}
             deleteButtonText={`Delete ${
-              numberOfSelectedRecords > 1 ? 'Records' : 'Record'
+              contextStoreNumberOfSelectedRecords > 1 ? 'Records' : 'Record'
             }`}
           />
         ),
@@ -120,9 +136,9 @@ export const DeleteRecordsActionEffect = ({
   }, [
     addActionMenuEntry,
     canDelete,
+    contextStoreNumberOfSelectedRecords,
     handleDeleteClick,
     isDeleteRecordsModalOpen,
-    numberOfSelectedRecords,
     position,
     removeActionMenuEntry,
   ]);

diff --git a/...src/modules/action-menu/actions/record-actions/components/ManageFavoritesActionEffect.tsx b/...src/modules/action-menu/actions/record-actions/components/ManageFavoritesActionEffect.tsx
@@ -1,6 +1,6 @@
 import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
 import { contextStoreCurrentObjectMetadataIdState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdState';
-import { contextStoreTargetedRecordsState } from '@/context-store/states/contextStoreTargetedRecordsState';
+import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsState';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
@@ -15,8 +15,8 @@ export const ManageFavoritesActionEffect = ({
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
 
-  const contextStoreTargetedRecords = useRecoilValue(
-    contextStoreTargetedRecordsState,
+  const contextStoreTargetedRecordsRule = useRecoilValue(
+    contextStoreTargetedRecordsRuleState,
   );
   const contextStoreCurrentObjectMetadataId = useRecoilValue(
     contextStoreCurrentObjectMetadataIdState,
@@ -25,9 +25,9 @@ export const ManageFavoritesActionEffect = ({
   const { favorites, createFavorite, deleteFavorite } = useFavorites();
 
   const selectedRecordId =
-    contextStoreTargetedRecords.selectedRecordIds === 'all'
-      ? ''
-      : contextStoreTargetedRecords.selectedRecordIds[0];
+    contextStoreTargetedRecordsRule.mode === 'selection'
+      ? contextStoreTargetedRecordsRule.selectedRecordIds[0]
+      : '';
 
   const selectedRecord = useRecoilValue(
     recordStoreFamilyState(selectedRecordId),

diff --git a/...c/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx b/...c/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx
@@ -1,15 +1,18 @@
 import { MultipleRecordsActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/MultipleRecordsActionMenuEntriesSetter';
 import { SingleRecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/SingleRecordActionMenuEntriesSetter';
-import { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
+import { useRecoilValue } from 'recoil';
 
 export const RecordActionMenuEntriesSetter = () => {
-  const { totalCount } = useContextStoreSelectedRecords({ limit: 1 });
+  const contextStoreNumberOfSelectedRecords = useRecoilValue(
+    contextStoreNumberOfSelectedRecordsState,
+  );
 
-  if (!totalCount) {
+  if (!contextStoreNumberOfSelectedRecords) {
     return null;
   }
 
-  if (totalCount === 1) {
+  if (contextStoreNumberOfSelectedRecords === 1) {
     return <SingleRecordActionMenuEntriesSetter />;
   }
 

diff --git a/packages/twenty-front/src/modules/action-menu/components/ActionMenuBar.tsx b/packages/twenty-front/src/modules/action-menu/components/ActionMenuBar.tsx
@@ -4,10 +4,11 @@ import { ActionMenuBarEntry } from '@/action-menu/components/ActionMenuBarEntry'
 import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { ActionBarHotkeyScope } from '@/action-menu/types/ActionBarHotKeyScope';
-import { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
 import { BottomBar } from '@/ui/layout/bottom-bar/components/BottomBar';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilValue } from 'recoil';
 
 const StyledLabel = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
@@ -18,10 +19,9 @@ const StyledLabel = styled.div`
 `;
 
 export const ActionMenuBar = () => {
-  const { totalCount: numberOfSelectedRecords } =
-    useContextStoreSelectedRecords({
-      limit: 1,
-    });
+  const contextStoreNumberOfSelectedRecords = useRecoilValue(
+    contextStoreNumberOfSelectedRecordsState,
+  );
 
   const actionMenuId = useAvailableComponentInstanceIdOrThrow(
     ActionMenuComponentInstanceContext,
@@ -42,7 +42,7 @@ export const ActionMenuBar = () => {
         scope: ActionBarHotkeyScope.ActionBar,
       }}
     >
-      <StyledLabel>{numberOfSelectedRecords} selected:</StyledLabel>
+      <StyledLabel>{contextStoreNumberOfSelectedRecords} selected:</StyledLabel>
       {actionMenuEntries.map((entry, index) => (
         <ActionMenuBarEntry key={index} entry={entry} />
       ))}

diff --git a/packages/twenty-front/src/modules/action-menu/components/ActionMenuEffect.tsx b/packages/twenty-front/src/modules/action-menu/components/ActionMenuEffect.tsx
@@ -1,20 +1,17 @@
 import { useActionMenu } from '@/action-menu/hooks/useActionMenu';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { contextStoreTargetedRecordsState } from '@/context-store/states/contextStoreTargetedRecordsState';
-import { isOneRecordOrMoreSelected } from '@/context-store/utils/isOneRecordOrMoreSelected';
+import { contextStoreNumberOfSelectedRecordsState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsState';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
 export const ActionMenuEffect = () => {
-  const contextStoreTargetedRecords = useRecoilValue(
-    contextStoreTargetedRecordsState,
+  const contextStoreNumberOfSelectedRecords = useRecoilValue(
+    contextStoreNumberOfSelectedRecordsState,
   );
 
-  const selectedRecords = contextStoreTargetedRecords.selectedRecordIds;
-
   const actionMenuId = useAvailableComponentInstanceIdOrThrow(
     ActionMenuComponentInstanceContext,
   );
@@ -29,21 +26,20 @@ export const ActionMenuEffect = () => {
   );
 
   useEffect(() => {
-    if (isOneRecordOrMoreSelected(selectedRecords) && !isDropdownOpen) {
+    if (contextStoreNumberOfSelectedRecords > 0 && !isDropdownOpen) {
       // We only handle opening the ActionMenuBar here, not the Dropdown.
       // The Dropdown is already managed by sync handlers for events like
       // right-click to open and click outside to close.
       openActionBar();
     }
-    if (!isOneRecordOrMoreSelected(selectedRecords) && isDropdownOpen) {
+    if (contextStoreNumberOfSelectedRecords === 0 && isDropdownOpen) {
       closeActionBar();
     }
   }, [
-    contextStoreTargetedRecords,
+    contextStoreNumberOfSelectedRecords,
     openActionBar,
     closeActionBar,
     isDropdownOpen,
-    selectedRecords,
   ]);
 
   return null;

diff --git a/...ges/twenty-front/src/modules/action-menu/components/__stories__/ActionMenuBar.stories.tsx b/...ges/twenty-front/src/modules/action-menu/components/__stories__/ActionMenuBar.stories.tsx
@@ -5,7 +5,7 @@ import { RecoilRoot } from 'recoil';
 import { ActionMenuBar } from '@/action-menu/components/ActionMenuBar';
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { contextStoreTargetedRecordsState } from '@/context-store/states/contextStoreTargetedRecordsState';
+import { contextStoreTargetedRecordsRuleState } from '@/context-store/states/contextStoreTargetedRecordsState';
 import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
 import { userEvent, waitFor, within } from '@storybook/test';
 import { IconCheckbox, IconTrash } from 'twenty-ui';
@@ -20,9 +20,9 @@ const meta: Meta<typeof ActionMenuBar> = {
     (Story) => (
       <RecoilRoot
         initializeState={({ set }) => {
-          set(contextStoreTargetedRecordsState, {
+          set(contextStoreTargetedRecordsRuleState, {
+            mode: 'selection',
             selectedRecordIds: ['1', '2', '3'],
-            excludedRecordIds: [],
           });
           set(
             actionMenuEntriesComponentState.atomFamily({

diff --git a/packages/twenty-front/src/modules/context-store/hooks/useContextStoreSelectedRecords.ts b/packages/twenty-front/src/modules/context-store/hooks/useContextStoreSelectedRecords.ts
diff --git a/...twenty-front/src/modules/context-store/states/contextStoreNumberOfSelectedRecordsState.ts b/...twenty-front/src/modules/context-store/states/contextStoreNumberOfSelectedRecordsState.ts
@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const contextStoreNumberOfSelectedRecordsState = createState<number>({
+  key: 'contextStoreNumberOfSelectedRecordsState',
+  defaultValue: 0,
+});
diff --git a/packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordsFilters.ts b/packages/twenty-front/src/modules/context-store/states/contextStoreTargetedRecordsFilters.ts