Jotai 12 (#18160)

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

packages/twenty-front/src/modules/workspace/components/WorkspaceProviderEffect.tsx

@@ -1,9 +1,8 @@
-import { useRecoilValue } from 'recoil';
-
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { useReadWorkspaceUrlFromCurrentLocation } from '@/domain-manager/hooks/useReadWorkspaceUrlFromCurrentLocation';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { lastAuthenticatedWorkspaceDomainState } from '@/domain-manager/states/lastAuthenticatedWorkspaceDomainState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { useEffect, useCallback } from 'react';
 
 import { useInitializeQueryParamState } from '@/app/hooks/useInitializeQueryParamState';
@@ -16,7 +15,7 @@ import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 export const WorkspaceProviderEffect = () => {
   const { data: getPublicWorkspaceData } = useGetPublicWorkspaceDataByDomain();
 
-  const lastAuthenticatedWorkspaceDomain = useRecoilValue(
+  const lastAuthenticatedWorkspaceDomain = useRecoilValueV2(
     lastAuthenticatedWorkspaceDomainState,
   );
 
@@ -25,7 +24,9 @@ export const WorkspaceProviderEffect = () => {
 
   const { currentLocationHostname } = useReadWorkspaceUrlFromCurrentLocation();
 
-  const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
+  const isMultiWorkspaceEnabled = useRecoilValueV2(
+    isMultiWorkspaceEnabledState,
+  );
 
   const { initializeQueryParamState } = useInitializeQueryParamState();
 

packages/twenty-front/src/modules/workspace/hooks/__tests__/useSubscriptionStatus.test.ts

@@ -1,11 +1,15 @@
 import { act, renderHook } from '@testing-library/react';
-import { RecoilRoot, useSetRecoilState } from 'recoil';
+import { createElement } from 'react';
+import { Provider as JotaiProvider } from 'jotai';
+import { RecoilRoot } from 'recoil';
 import { v4 } from 'uuid';
 
 import {
   type CurrentWorkspace,
   currentWorkspaceState,
 } from '@/auth/states/currentWorkspaceState';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import {
   SubscriptionStatus,
@@ -19,11 +23,18 @@ const currentWorkspace = {
   allowImpersonation: true,
 } as CurrentWorkspace;
 
+const Wrapper = ({ children }: { children: React.ReactNode }) =>
+  createElement(
+    JotaiProvider,
+    { store: jotaiStore },
+    createElement(RecoilRoot, null, children),
+  );
+
 const renderHooks = () => {
   const { result } = renderHook(
     () => {
       const subscriptionStatus = useSubscriptionStatus();
-      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+      const setCurrentWorkspace = useSetRecoilStateV2(currentWorkspaceState);
 
       return {
         subscriptionStatus,
@@ -31,7 +42,7 @@ const renderHooks = () => {
       };
     },
     {
-      wrapper: RecoilRoot,
+      wrapper: Wrapper,
     },
   );
   return { result };

packages/twenty-front/src/modules/workspace/hooks/useFeatureFlagsMap.ts

@@ -1,10 +1,10 @@
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { extractFeatureFlagMapFromWorkspace } from '@/workspace/utils/extractFeatureFlagMapFromWorkspace';
-import { useRecoilValue } from 'recoil';
 import { type FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const useFeatureFlagsMap = (): Record<FeatureFlagKey, boolean> => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValueV2(currentWorkspaceState);
 
   return extractFeatureFlagMapFromWorkspace(currentWorkspace);
 };

packages/twenty-front/src/modules/workspace/hooks/useIsFeatureEnabled.ts

@@ -1,10 +1,9 @@
-import { useRecoilValue } from 'recoil';
-
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const useIsFeatureEnabled = (featureKey: FeatureFlagKey | null) => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValueV2(currentWorkspaceState);
 
   if (!featureKey) {
     return false;

packages/twenty-front/src/modules/workspace/hooks/useIsSomeMeteredProductCapReached.ts

@@ -1,9 +1,8 @@
-import { useRecoilValue } from 'recoil';
-
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 
 export const useIsSomeMeteredProductCapReached = (): boolean => {
-  const billingSubscriptionItems = useRecoilValue(currentWorkspaceState)
+  const billingSubscriptionItems = useRecoilValueV2(currentWorkspaceState)
     ?.currentBillingSubscription?.billingSubscriptionItems;
 
   if (!billingSubscriptionItems) {

packages/twenty-front/src/modules/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo.ts

@@ -1,11 +1,10 @@
-import { useRecoilValue } from 'recoil';
-
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type WorkspaceActivationStatus } from 'twenty-shared/workspace';
 
 export const useIsWorkspaceActivationStatusEqualsTo = (
   activationStatus: WorkspaceActivationStatus,
 ): boolean => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValueV2(currentWorkspaceState);
   return currentWorkspace?.activationStatus === activationStatus;
 };

packages/twenty-front/src/modules/workspace/hooks/useSubscriptionStatus.ts

@@ -1,9 +1,8 @@
-import { useRecoilValue } from 'recoil';
-
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type SubscriptionStatus } from '~/generated-metadata/graphql';
 
 export const useSubscriptionStatus = (): SubscriptionStatus | undefined => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspace = useRecoilValueV2(currentWorkspaceState);
   return currentWorkspace?.currentBillingSubscription?.status;
 };

packages/twenty-front/src/modules/workspace/states/workspaceAuthBypassProvidersState.ts

@@ -1,8 +1,8 @@
 import { type AuthBypassProviders } from '~/generated-metadata/graphql';
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
 export const workspaceAuthBypassProvidersState =
-  createState<AuthBypassProviders | null>({
+  createStateV2<AuthBypassProviders | null>({
     key: 'workspaceAuthBypassProvidersState',
     defaultValue: null,
   });

packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts

@@ -1,7 +1,7 @@
 import { type AuthProviders } from '~/generated-metadata/graphql';
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
-export const workspaceAuthProvidersState = createState<AuthProviders | null>({
+export const workspaceAuthProvidersState = createStateV2<AuthProviders | null>({
   key: 'workspaceAuthProvidersState',
   defaultValue: null,
 });

packages/twenty-front/src/modules/workspace/states/workspaceBypassModeState.ts

@@ -1,6 +1,6 @@
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
-export const workspaceBypassModeState = createState<boolean>({
+export const workspaceBypassModeState = createStateV2<boolean>({
   key: 'workspaceBypassModeState',
   defaultValue: false,
 });