Jotai 12 (#18160)

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/twenty-front/src/modules/command-menu/pages/navigation-menu-item/components/CommandMenuObjectMenuItem.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from '@emotion/react';
-import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
 
@@ -10,6 +9,7 @@ import { NavigationMenuItemType } from '@/navigation-menu-item/constants/Navigat
 import { getNavigationMenuItemIconColors } from '@/navigation-menu-item/utils/getNavigationMenuItemIconColors';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
 import { coreIndexViewIdFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreIndexViewIdFromObjectMetadataItemFamilySelector';
 
 type CommandMenuObjectMenuItemProps = {
@@ -31,10 +31,9 @@ export const CommandMenuObjectMenuItem = ({
   const theme = useTheme();
   const { getIcon } = useIcons();
   const iconColors = getNavigationMenuItemIconColors(theme);
-  const defaultViewId = useRecoilValue(
-    coreIndexViewIdFromObjectMetadataItemFamilySelector({
-      objectMetadataItemId: objectMetadataItem.id,
-    }),
+  const defaultViewId = useFamilySelectorValueV2(
+    coreIndexViewIdFromObjectMetadataItemFamilySelector,
+    { objectMetadataItemId: objectMetadataItem.id },
   );
   const Icon = getIcon(objectMetadataItem.icon);
   const isDisabled = !isDefined(defaultViewId);

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphFilter.tsx

@@ -5,7 +5,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { isDefined } from 'twenty-shared/utils';
 
 export const CommandMenuPageLayoutGraphFilter = () => {
@@ -25,7 +25,7 @@ export const CommandMenuPageLayoutGraphFilter = () => {
     .flatMap((tab) => tab.widgets)
     .find((widget) => widget.id === pageLayoutEditingWidgetId);
 
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
 
   if (
     !isDefined(widgetInEditMode) ||

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/__tests__/useChartSettingsValues.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import { Provider as JotaiProvider } from 'jotai';
 import { RecoilRoot } from 'recoil';
 
 import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration';
@@ -16,6 +17,7 @@ import {
   WidgetConfigurationType,
 } from '~/generated-metadata/graphql';
 import { useChartSettingsValues } from '@/command-menu/pages/page-layout/hooks/useChartSettingsValues';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 
 const mockObjectMetadataItem: ObjectMetadataItem = {
   id: 'obj-1',
@@ -79,6 +81,8 @@ const buildBarChartConfiguration = (
   }) as TypedBarChartConfiguration;
 
 const renderUseChartSettingsValues = (configuration: ChartConfiguration) => {
+  jotaiStore.set(objectMetadataItemsState.atom, [mockObjectMetadataItem]);
+
   return renderHook(
     () =>
       useChartSettingsValues({
@@ -87,13 +91,9 @@ const renderUseChartSettingsValues = (configuration: ChartConfiguration) => {
       }),
     {
       wrapper: ({ children }) => (
-        <RecoilRoot
-          initializeState={({ set }) => {
-            set(objectMetadataItemsState, [mockObjectMetadataItem]);
-          }}
-        >
-          {children}
-        </RecoilRoot>
+        <JotaiProvider store={jotaiStore}>
+          <RecoilRoot>{children}</RecoilRoot>
+        </JotaiProvider>
       ),
     },
   );
@@ -414,6 +414,8 @@ describe('useChartSettingsValues', () => {
     it('should handle missing objectMetadataItem gracefully', () => {
       const config = buildBarChartConfiguration({});
 
+      jotaiStore.set(objectMetadataItemsState.atom, [mockObjectMetadataItem]);
+
       const { result } = renderHook(
         () =>
           useChartSettingsValues({
@@ -422,13 +424,9 @@ describe('useChartSettingsValues', () => {
           }),
         {
           wrapper: ({ children }) => (
-            <RecoilRoot
-              initializeState={({ set }) => {
-                set(objectMetadataItemsState, [mockObjectMetadataItem]);
-              }}
-            >
-              {children}
-            </RecoilRoot>
+            <JotaiProvider store={jotaiStore}>
+              <RecoilRoot>{children}</RecoilRoot>
+            </JotaiProvider>
           ),
         },
       );

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useChartSettingsValues.ts

@@ -10,7 +10,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
 import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
 import { convertAggregateOperationToExtendedAggregateOperation } from '@/object-record/utils/convertAggregateOperationToExtendedAggregateOperation';
 import { plural, t } from '@lingui/core/macro';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
 import { capitalize, isDefined } from 'twenty-shared/utils';
 import { type GraphOrderBy } from '~/generated-metadata/graphql';
@@ -22,7 +22,7 @@ export const useChartSettingsValues = ({
   objectMetadataId: string;
   configuration?: ChartConfiguration;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
 
   const objectMetadataItem = objectMetadataItems.find(
     (objectMetadataItem) => objectMetadataItem.id === objectMetadataId,

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphGroupBySortOptionLabels.ts

@@ -2,7 +2,7 @@ import { getFieldLabelWithSubField } from '@/command-menu/pages/page-layout/util
 import { getSortLabelSuffixForFieldType } from '@/command-menu/pages/page-layout/utils/getSortLabelSuffixForFieldType';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { t } from '@lingui/core/macro';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
 import { assertUnreachable } from 'twenty-shared/utils';
 import { GraphOrderBy } from '~/generated-metadata/graphql';
@@ -12,7 +12,7 @@ export const useGraphGroupBySortOptionLabels = ({
 }: {
   objectMetadataId: string;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
 
   const objectMetadataItem = objectMetadataItems.find(
     (objectMetadataItem) => objectMetadataItem.id === objectMetadataId,

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useGraphXSortOptionLabels.ts

@@ -4,7 +4,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
 import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
 import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
 import { t } from '@lingui/core/macro';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
 import { assertUnreachable, isDefined } from 'twenty-shared/utils';
 import { GraphOrderBy } from '~/generated-metadata/graphql';
@@ -14,7 +14,7 @@ export const useGraphXSortOptionLabels = ({
 }: {
   objectMetadataId: string;
 }) => {
-  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
 
   const objectMetadataItem = objectMetadataItems.find(
     (objectMetadataItem) => objectMetadataItem.id === objectMetadataId,