Jotai 13 (#18178)
## Recoil to Jotai Migration — PR 13: Workflow, Page Layout, AI, Activities, Settings, SSE & Remaining Modules ### Summary This is the 13th PR in the [14-PR migration series](packages/twenty-front/src/modules/ui/utilities/state/jotai/MIGRATION_PLAN.md) to replace Recoil with Jotai as the state management library in `twenty-front`. This PR migrates the remaining consumer code across all modules — updating ~1,076 files with ~10k insertions/deletions. ### What changed **New Jotai infrastructure (13 new files):** - `createComponentSelectorV2` and `createComponentFamilySelectorV2` — instance-scoped derived atoms, replacing Recoil's component selectors - 6 new hooks: `useRecoilComponentSelectorValueV2`, `useRecoilComponentFamilySelectorValueV2`, `useRecoilComponentSelectorCallbackStateV2`, `useRecoilComponentFamilySelectorCallbackStateV2`, `useRecoilComponentStateCallbackStateV2`, `useRecoilComponentFamilyStateCallbackStateV2` - New types: `ComponentSelectorV2`, `ComponentFamilySelectorV2`, `SelectorCallbacksV2` - Extended `buildGetHelper` to support the new selector patterns **State definition migrations:** - `createState()` → `createStateV2()` (Jotai `atom()`) - `createFamilyState()` → `createFamilyStateV2()` (Jotai `atom()` with family cache) - Recoil `selector`/`selectorFamily` → Jotai derived `atom()` via V2 utilities **Hook migrations (~2,400 removed, ~1,545 added V2 equivalents):** - `useRecoilValue` → `useRecoilValueV2` - `useRecoilState` → `useRecoilStateV2` - `useSetRecoilState` → `useSetRecoilStateV2` - `useRecoilCallback` → `useCallback` + `jotaiStore.get/set` - `useRecoilComponentValue` → `useRecoilComponentValueV2` - `useSetRecoilComponentState` → `useSetRecoilComponentStateV2` - `useRecoilComponentFamilyValue` → `useRecoilComponentFamilyValueV2` / `useFamilySelectorValueV2` - ~397 direct `import from 'recoil'` removed **Deleted files (9 files):** - `dateLocaleState.ts` — consolidated - `currentAIChatThreadTitleStateV2.ts` — renamed to replace the original - `isCommandMenuOpenedState.ts` — removed - `filesFieldUploadState.ts` — replaced by V2 - `recordStoreFamilySelector.ts`, `recordStoreFieldValueSelector.ts`, `recordStoreRecordsSelector.ts` — replaced by V2 equivalents - `settingsAllRolesSelector.ts` — replaced by `useSettingsAllRoles` hook - `settingsRoleIdsStateV2.ts` — consolidated **Modules migrated:** - Workflow (diagram, steps, variables, filters) - Page Layout (widgets, fields, graph, tabs) - AI (chat, agents, browsing context) - Activities (rich text editor, targets, timeline) - Action Menu (single/multiple record actions) - Command Menu (navigation, history, pages, workflow) - Context Store - Record Board, Record Table, Record Calendar, Record Index - Record Field, Record Filter, Record Sort, Record Group - Record Drag, Record Picker, Record Store - Views (view bar, view picker, filters, sorts) - Settings (roles, permissions, SSO, security, data model, developers, domains) - SSE (event streams, subscriptions) - Spreadsheet Import - Auth, Favorites, Front Components, Information Banner
This commit is contained in:
Charles Bochet
@@ -1,10 +1,6 @@
|
||||
import { ApolloError, useApolloClient } from '@apollo/client';
|
||||
import { useCallback } from 'react';
|
||||
import {
|
||||
snapshot_UNSTABLE,
|
||||
useGotoRecoilSnapshot,
|
||||
useRecoilCallback,
|
||||
} from 'recoil';
|
||||
import { snapshot_UNSTABLE, useGotoRecoilSnapshot } from 'recoil';
|
||||
import { AppPath } from 'twenty-shared/types';
|
||||
|
||||
import { REACT_APP_SERVER_BASE_URL } from '~/config';
|
||||
@@ -59,7 +55,6 @@ import { useRedirect } from '@/domain-manager/hooks/useRedirect';
|
||||
import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
|
||||
import { domainConfigurationState } from '@/domain-manager/states/domainConfigurationState';
|
||||
import { sseClientState } from '@/sse-db-event/states/sseClientState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
|
||||
import { useLoadCurrentUser } from '@/users/hooks/useLoadCurrentUser';
|
||||
import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
|
||||
import { i18n } from '@lingui/core';
|
||||
@@ -123,81 +118,69 @@ export const useAuth = () => {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const clearSession = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async () => {
|
||||
const sseClient = getSnapshotValue(snapshot, sseClientState);
|
||||
const clearSession = useCallback(async () => {
|
||||
const sseClient = jotaiStore.get(sseClientState.atom);
|
||||
|
||||
sseClient?.dispose();
|
||||
sseClient?.dispose();
|
||||
|
||||
const emptySnapshot = snapshot_UNSTABLE();
|
||||
const emptySnapshot = snapshot_UNSTABLE();
|
||||
|
||||
const authProvidersValue = jotaiStore.get(
|
||||
workspaceAuthProvidersState.atom,
|
||||
);
|
||||
const domainConfigurationValue = jotaiStore.get(
|
||||
domainConfigurationState.atom,
|
||||
);
|
||||
const workspacePublicDataValue = jotaiStore.get(
|
||||
workspacePublicDataState.atom,
|
||||
);
|
||||
const lastAuthenticatedMethod = jotaiStore.get(
|
||||
lastAuthenticatedMethodState.atom,
|
||||
);
|
||||
const isCaptchaScriptLoadedValue = jotaiStore.get(
|
||||
isCaptchaScriptLoadedState.atom,
|
||||
);
|
||||
const authProvidersValue = jotaiStore.get(workspaceAuthProvidersState.atom);
|
||||
const domainConfigurationValue = jotaiStore.get(
|
||||
domainConfigurationState.atom,
|
||||
);
|
||||
const workspacePublicDataValue = jotaiStore.get(
|
||||
workspacePublicDataState.atom,
|
||||
);
|
||||
const lastAuthenticatedMethod = jotaiStore.get(
|
||||
lastAuthenticatedMethodState.atom,
|
||||
);
|
||||
const isCaptchaScriptLoadedValue = jotaiStore.get(
|
||||
isCaptchaScriptLoadedState.atom,
|
||||
);
|
||||
|
||||
const initialSnapshot = emptySnapshot.map(() => {
|
||||
return undefined;
|
||||
});
|
||||
const initialSnapshot = emptySnapshot.map(() => {
|
||||
return undefined;
|
||||
});
|
||||
|
||||
sessionStorage.clear();
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
localStorage.clear();
|
||||
|
||||
goToRecoilSnapshot(initialSnapshot);
|
||||
goToRecoilSnapshot(initialSnapshot);
|
||||
|
||||
jotaiStore.set(workspaceAuthProvidersState.atom, authProvidersValue);
|
||||
jotaiStore.set(workspacePublicDataState.atom, workspacePublicDataValue);
|
||||
jotaiStore.set(domainConfigurationState.atom, domainConfigurationValue);
|
||||
jotaiStore.set(
|
||||
isCaptchaScriptLoadedState.atom,
|
||||
isCaptchaScriptLoadedValue,
|
||||
);
|
||||
jotaiStore.set(
|
||||
lastAuthenticatedMethodState.atom,
|
||||
lastAuthenticatedMethod,
|
||||
);
|
||||
jotaiStore.set(workspaceAuthProvidersState.atom, authProvidersValue);
|
||||
jotaiStore.set(workspacePublicDataState.atom, workspacePublicDataValue);
|
||||
jotaiStore.set(domainConfigurationState.atom, domainConfigurationValue);
|
||||
jotaiStore.set(isCaptchaScriptLoadedState.atom, isCaptchaScriptLoadedValue);
|
||||
jotaiStore.set(lastAuthenticatedMethodState.atom, lastAuthenticatedMethod);
|
||||
|
||||
// Reset user-data Jotai states that were migrated from Recoil
|
||||
// (Recoil snapshot reset no longer handles these since they are Jotai V2)
|
||||
jotaiStore.set(tokenPairState.atom, null);
|
||||
jotaiStore.set(currentUserState.atom, null);
|
||||
jotaiStore.set(currentWorkspaceState.atom, null);
|
||||
jotaiStore.set(currentUserWorkspaceState.atom, null);
|
||||
jotaiStore.set(currentWorkspaceMemberState.atom, null);
|
||||
jotaiStore.set(currentWorkspaceMembersState.atom, []);
|
||||
jotaiStore.set(availableWorkspacesState.atom, {
|
||||
availableWorkspacesForSignIn: [],
|
||||
availableWorkspacesForSignUp: [],
|
||||
});
|
||||
jotaiStore.set(loginTokenState.atom, null);
|
||||
jotaiStore.set(signInUpStepState.atom, SignInUpStep.Init);
|
||||
jotaiStore.set(coreViewsState.atom, []);
|
||||
// Reset user-data Jotai states that were migrated from Recoil
|
||||
// (Recoil snapshot reset no longer handles these since they are Jotai V2)
|
||||
jotaiStore.set(tokenPairState.atom, null);
|
||||
jotaiStore.set(currentUserState.atom, null);
|
||||
jotaiStore.set(currentWorkspaceState.atom, null);
|
||||
jotaiStore.set(currentUserWorkspaceState.atom, null);
|
||||
jotaiStore.set(currentWorkspaceMemberState.atom, null);
|
||||
jotaiStore.set(currentWorkspaceMembersState.atom, []);
|
||||
jotaiStore.set(availableWorkspacesState.atom, {
|
||||
availableWorkspacesForSignIn: [],
|
||||
availableWorkspacesForSignUp: [],
|
||||
});
|
||||
jotaiStore.set(loginTokenState.atom, null);
|
||||
jotaiStore.set(signInUpStepState.atom, SignInUpStep.Init);
|
||||
jotaiStore.set(coreViewsState.atom, []);
|
||||
|
||||
await client.clearStore();
|
||||
setLastAuthenticateWorkspaceDomain(null);
|
||||
await resetToMockedMetadata();
|
||||
navigate(AppPath.SignInUp);
|
||||
},
|
||||
[
|
||||
goToRecoilSnapshot,
|
||||
client,
|
||||
setLastAuthenticateWorkspaceDomain,
|
||||
resetToMockedMetadata,
|
||||
navigate,
|
||||
],
|
||||
);
|
||||
await client.clearStore();
|
||||
setLastAuthenticateWorkspaceDomain(null);
|
||||
await resetToMockedMetadata();
|
||||
navigate(AppPath.SignInUp);
|
||||
}, [
|
||||
goToRecoilSnapshot,
|
||||
client,
|
||||
setLastAuthenticateWorkspaceDomain,
|
||||
resetToMockedMetadata,
|
||||
navigate,
|
||||
]);
|
||||
|
||||
const handleSetAuthTokens = useCallback(
|
||||
(tokens: AuthTokenPair) => {
|
||||
|
||||
Reference in New Issue
Block a user