Jotai 12 (#18160)

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

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx

@@ -4,11 +4,11 @@ import { SETTINGS_ADMIN_TABS } from '@/settings/admin-panel/constants/SettingsAd
 import { SETTINGS_ADMIN_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminTabsId';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { t } from '@lingui/core/macro';
-import { useRecoilValue } from 'recoil';
 import { IconHeart, IconSettings2, IconVariable } from 'twenty-ui/display';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 
 export const SettingsAdminContent = () => {
-  const currentUser = useRecoilValue(currentUserState);
+  const currentUser = useRecoilValueV2(currentUserState);
 
   const canAccessFullAdminPanel = currentUser?.canAccessFullAdminPanel;
   const canImpersonate = currentUser?.canImpersonate;

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx

@@ -10,11 +10,11 @@ import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useUserLookupAdminPanelMutation } from '~/generated-metadata/graphql';
 
 import { currentUserState } from '@/auth/states/currentUserState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { SettingsAdminTableCard } from '@/settings/admin-panel/components/SettingsAdminTableCard';
 import { SettingsAdminVersionContainer } from '@/settings/admin-panel/components/SettingsAdminVersionContainer';
 import { SETTINGS_ADMIN_USER_LOOKUP_WORKSPACE_TABS_ID } from '@/settings/admin-panel/constants/SettingsAdminUserLookupWorkspaceTabsId';
@@ -53,13 +53,13 @@ export const SettingsAdminGeneral = () => {
 
   const [userLookup] = useUserLookupAdminPanelMutation();
 
-  const currentUser = useRecoilValue(currentUserState);
+  const currentUser = useRecoilValueV2(currentUserState);
 
   const canAccessFullAdminPanel = currentUser?.canAccessFullAdminPanel;
 
   const canImpersonate = currentUser?.canImpersonate;
 
-  const canManageFeatureFlags = useRecoilValue(canManageFeatureFlagsState);
+  const canManageFeatureFlags = useRecoilValueV2(canManageFeatureFlagsState);
 
   const handleSearch = async () => {
     setActiveTabId('');

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx

@@ -20,8 +20,8 @@ import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { useState } from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
 import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 import { AvatarChip, Chip } from 'twenty-ui/components';
 import {
   H2Title,
@@ -58,10 +58,10 @@ const StyledButtonContainer = styled.div`
 export const SettingsAdminWorkspaceContent = ({
   activeWorkspace,
 }: SettingsAdminWorkspaceContentProps) => {
-  const canManageFeatureFlags = useRecoilValue(canManageFeatureFlagsState);
+  const canManageFeatureFlags = useRecoilValueV2(canManageFeatureFlagsState);
   const { enqueueErrorSnackBar } = useSnackBar();
-  const [currentUser] = useRecoilState(currentUserState);
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const [currentUser] = useRecoilStateV2(currentUserState);
+  const currentWorkspace = useRecoilValueV2(currentWorkspaceState);
 
   const [updateFeatureFlag] = useUpdateWorkspaceFeatureFlagMutation();
   const [isImpersonateLoading, setIsImpersonationLoading] = useState(false);

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableActionButtons.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from '@lingui/react/macro';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 
 import { isConfigVariablesInDbEnabledState } from '@/client-config/states/isConfigVariablesInDbEnabledState';
 import {
@@ -29,7 +29,7 @@ export const ConfigVariableActionButtons = ({
   onReset,
 }: ConfigVariableActionButtonsProps) => {
   const { t } = useLingui();
-  const isConfigVariablesInDbEnabled = useRecoilValue(
+  const isConfigVariablesInDbEnabled = useRecoilValueV2(
     isConfigVariablesInDbEnabledState,
   );
   const isFromDatabase = variable.source === ConfigSource.DATABASE;

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableHelpText.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 
 import { isConfigVariablesInDbEnabledState } from '@/client-config/states/isConfigVariablesInDbEnabledState';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import {
   ConfigSource,
   type ConfigVariable,
@@ -24,7 +24,7 @@ export const ConfigVariableHelpText = ({
   variable,
   hasValueChanged,
 }: ConfigVariableHelpTextProps) => {
-  const isConfigVariablesInDbEnabled = useRecoilValue(
+  const isConfigVariablesInDbEnabled = useRecoilValueV2(
     isConfigVariablesInDbEnabledState,
   );
   const { t } = useLingui();

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableOptionsDropdownContent.tsx

@@ -10,7 +10,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { IconChevronLeft, IconEye, IconEyeOff } from 'twenty-ui/display';
 import { MenuItem, MenuItemSelectTag } from 'twenty-ui/navigation';
 
@@ -39,7 +39,7 @@ export const ConfigVariableOptionsDropdownContent = ({
 }: ConfigVariableOptionsDropdownContentProps) => {
   const theme = useTheme();
 
-  const isConfigVariablesInDbEnabled = useRecoilValue(
+  const isConfigVariablesInDbEnabled = useRecoilValueV2(
     isConfigVariablesInDbEnabledState,
   );
 

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableValueInput.tsx

@@ -3,7 +3,7 @@ import { useLingui } from '@lingui/react/macro';
 import { isConfigVariablesInDbEnabledState } from '@/client-config/states/isConfigVariablesInDbEnabledState';
 import { TextInput } from '@/ui/input/components/TextInput';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { type ConfigVariableValue } from 'twenty-shared/types';
 import { type ConfigVariable } from '~/generated-metadata/graphql';
 import { ConfigVariableDatabaseInput } from './ConfigVariableDatabaseInput';
@@ -26,7 +26,7 @@ export const ConfigVariableValueInput = ({
   disabled,
 }: ConfigVariableValueInputProps) => {
   const { t } = useLingui();
-  const isConfigVariablesInDbEnabled = useRecoilValue(
+  const isConfigVariablesInDbEnabled = useRecoilValueV2(
     isConfigVariablesInDbEnabledState,
   );
 

packages/twenty-front/src/modules/settings/admin-panel/hooks/useImpersonationAuth.ts

@@ -1,12 +1,12 @@
 import { isAppEffectRedirectEnabledState } from '@/app/states/isAppEffectRedirectEnabledState';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { shouldAppBeLoadingState } from '@/object-metadata/states/shouldAppBeLoadingState';
-import { useSetRecoilState } from 'recoil';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 
 export const useImpersonationAuth = () => {
   const { getAuthTokensFromLoginToken } = useAuth();
-  const setShouldAppBeLoading = useSetRecoilState(shouldAppBeLoadingState);
-  const setIsAppEffectRedirectEnabled = useSetRecoilState(
+  const setShouldAppBeLoading = useSetRecoilStateV2(shouldAppBeLoadingState);
+  const setIsAppEffectRedirectEnabled = useSetRecoilStateV2(
     isAppEffectRedirectEnabledState,
   );