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
+129
-128
@@ -10,12 +10,13 @@ import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
|
||||
import { searchRecordStoreFamilyState } from '@/object-record/record-picker/multiple-record-picker/states/searchRecordStoreComponentFamilyState';
|
||||
import { type RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem';
|
||||
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
||||
import { useSetFamilyRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetFamilyRecoilStateV2';
|
||||
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
||||
import { useRecoilCallback, useSetRecoilState } from 'recoil';
|
||||
import { useCallback } from 'react';
|
||||
import { useStore } from 'jotai';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { v4 } from 'uuid';
|
||||
import { FeatureFlagKey } from '~/generated-metadata/graphql';
|
||||
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
|
||||
|
||||
type UpdateActivityTargetFromCellProps = {
|
||||
recordPickerInstanceId: string;
|
||||
@@ -64,148 +65,148 @@ export const useUpdateActivityTargetFromCell = ({
|
||||
? isTaskTargetMigrated
|
||||
: isNoteTargetMigrated;
|
||||
|
||||
const setActivityFromStore = useSetRecoilState(
|
||||
recordStoreFamilyState(activityId),
|
||||
const store = useStore();
|
||||
const setActivityFromStore = useSetFamilyRecoilStateV2(
|
||||
recordStoreFamilyState,
|
||||
activityId,
|
||||
);
|
||||
|
||||
const updateActivityTargetFromCell = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
async ({
|
||||
morphItem,
|
||||
activityTargetWithTargetRecords,
|
||||
}: UpdateActivityTargetFromCellProps) => {
|
||||
const targetObjectName =
|
||||
activityObjectNameSingular === CoreObjectNameSingular.Task
|
||||
? 'task'
|
||||
: 'note';
|
||||
const updateActivityTargetFromCell = useCallback(
|
||||
async ({
|
||||
morphItem,
|
||||
activityTargetWithTargetRecords,
|
||||
}: UpdateActivityTargetFromCellProps) => {
|
||||
const targetObjectName =
|
||||
activityObjectNameSingular === CoreObjectNameSingular.Task
|
||||
? 'task'
|
||||
: 'note';
|
||||
|
||||
const objectMetadataItems = jotaiStore.get(
|
||||
objectMetadataItemsState.atom,
|
||||
const objectMetadataItems = store.get(objectMetadataItemsState.atom);
|
||||
|
||||
const pickedObjectMetadataItem = objectMetadataItems.find(
|
||||
(objectMetadataItem) =>
|
||||
objectMetadataItem.id === morphItem.objectMetadataId,
|
||||
);
|
||||
|
||||
if (!isDefined(pickedObjectMetadataItem)) {
|
||||
throw new Error('Could not find object metadata item');
|
||||
}
|
||||
|
||||
const targetFieldName = getActivityTargetFieldNameForObject({
|
||||
activityObjectNameSingular,
|
||||
targetObjectMetadataId: morphItem.objectMetadataId,
|
||||
objectMetadataItems,
|
||||
isMorphRelation,
|
||||
});
|
||||
|
||||
if (!isDefined(targetFieldName)) {
|
||||
throw new Error(
|
||||
`Could not find field on activity target for object ${pickedObjectMetadataItem.nameSingular}`,
|
||||
);
|
||||
}
|
||||
|
||||
const pickedObjectMetadataItem = objectMetadataItems.find(
|
||||
(objectMetadataItem) =>
|
||||
objectMetadataItem.id === morphItem.objectMetadataId,
|
||||
);
|
||||
let activityTargetsAfterUpdate: (TaskTarget | NoteTarget)[] = [];
|
||||
|
||||
if (!isDefined(pickedObjectMetadataItem)) {
|
||||
throw new Error('Could not find object metadata item');
|
||||
}
|
||||
const existingActivityTarget = activityTargetWithTargetRecords.find(
|
||||
(activityTarget) =>
|
||||
activityTarget.targetObject.id === morphItem.recordId,
|
||||
);
|
||||
|
||||
const targetFieldName = getActivityTargetFieldNameForObject({
|
||||
activityObjectNameSingular,
|
||||
targetObjectMetadataId: morphItem.objectMetadataId,
|
||||
objectMetadataItems,
|
||||
isMorphRelation,
|
||||
});
|
||||
if (isDefined(existingActivityTarget)) {
|
||||
activityTargetsAfterUpdate = activityTargetWithTargetRecords
|
||||
.map((activityTarget) => {
|
||||
if (
|
||||
activityTarget.targetObject.id === morphItem.recordId &&
|
||||
!morphItem.isSelected
|
||||
) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (!isDefined(targetFieldName)) {
|
||||
throw new Error(
|
||||
`Could not find field on activity target for object ${pickedObjectMetadataItem.nameSingular}`,
|
||||
return activityTarget.activityTarget;
|
||||
})
|
||||
.filter(isDefined);
|
||||
|
||||
if (!morphItem.isSelected) {
|
||||
await deleteOneActivityTarget(
|
||||
existingActivityTarget.activityTarget.id,
|
||||
);
|
||||
}
|
||||
|
||||
let activityTargetsAfterUpdate: (TaskTarget | NoteTarget)[] = [];
|
||||
|
||||
const existingActivityTarget = activityTargetWithTargetRecords.find(
|
||||
(activityTarget) =>
|
||||
activityTarget.targetObject.id === morphItem.recordId,
|
||||
} else {
|
||||
const searchRecord = store.get(
|
||||
searchRecordStoreFamilyState.atomFamily(morphItem.recordId),
|
||||
);
|
||||
|
||||
if (isDefined(existingActivityTarget)) {
|
||||
activityTargetsAfterUpdate = activityTargetWithTargetRecords
|
||||
.map((activityTarget) => {
|
||||
if (
|
||||
activityTarget.targetObject.id === morphItem.recordId &&
|
||||
!morphItem.isSelected
|
||||
) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return activityTarget.activityTarget;
|
||||
})
|
||||
.filter(isDefined);
|
||||
|
||||
if (!morphItem.isSelected) {
|
||||
await deleteOneActivityTarget(
|
||||
existingActivityTarget.activityTarget.id,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
const searchRecord = snapshot
|
||||
.getLoadable(searchRecordStoreFamilyState(morphItem.recordId))
|
||||
.getValue();
|
||||
|
||||
if (!isDefined(searchRecord) || !isDefined(searchRecord?.record)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!morphItem.isSelected) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetRecord = searchRecord.record;
|
||||
|
||||
const activityTarget: NoteTarget | TaskTarget =
|
||||
activityObjectNameSingular === CoreObjectNameSingular.Task
|
||||
? {
|
||||
id: v4(),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
__typename: 'TaskTarget',
|
||||
taskId: activityId,
|
||||
task: {
|
||||
id: activityId,
|
||||
__typename: 'Task',
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
[targetFieldName]: targetRecord,
|
||||
}
|
||||
: {
|
||||
id: v4(),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
__typename: 'NoteTarget',
|
||||
noteId: activityId,
|
||||
note: {
|
||||
id: activityId,
|
||||
__typename: 'Note',
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
[targetFieldName]: targetRecord,
|
||||
};
|
||||
|
||||
activityTargetsAfterUpdate = [
|
||||
...activityTargetWithTargetRecords.map((activityTarget) => {
|
||||
return activityTarget.activityTarget;
|
||||
}),
|
||||
activityTarget,
|
||||
];
|
||||
|
||||
const activityTargetInput: Partial<NoteTarget | TaskTarget> = {
|
||||
...activityTarget,
|
||||
[targetObjectName]: undefined,
|
||||
[targetFieldName]: undefined,
|
||||
[`${targetFieldName}Id`]: morphItem.recordId,
|
||||
};
|
||||
|
||||
await createOneActivityTarget(activityTargetInput);
|
||||
if (!isDefined(searchRecord) || !isDefined(searchRecord?.record)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setActivityFromStore((currentActivity) => {
|
||||
if (!isDefined(currentActivity)) {
|
||||
return null;
|
||||
}
|
||||
if (!morphItem.isSelected) {
|
||||
return;
|
||||
}
|
||||
|
||||
return {
|
||||
...currentActivity,
|
||||
[`${targetObjectName}Targets`]: activityTargetsAfterUpdate,
|
||||
};
|
||||
});
|
||||
},
|
||||
const targetRecord = searchRecord.record;
|
||||
|
||||
const activityTarget: NoteTarget | TaskTarget =
|
||||
activityObjectNameSingular === CoreObjectNameSingular.Task
|
||||
? {
|
||||
id: v4(),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
__typename: 'TaskTarget',
|
||||
taskId: activityId,
|
||||
task: {
|
||||
id: activityId,
|
||||
__typename: 'Task',
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
[targetFieldName]: targetRecord,
|
||||
}
|
||||
: {
|
||||
id: v4(),
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
__typename: 'NoteTarget',
|
||||
noteId: activityId,
|
||||
note: {
|
||||
id: activityId,
|
||||
__typename: 'Note',
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString(),
|
||||
},
|
||||
[targetFieldName]: targetRecord,
|
||||
};
|
||||
|
||||
activityTargetsAfterUpdate = [
|
||||
...activityTargetWithTargetRecords.map((activityTarget) => {
|
||||
return activityTarget.activityTarget;
|
||||
}),
|
||||
activityTarget,
|
||||
];
|
||||
|
||||
const activityTargetInput: Partial<NoteTarget | TaskTarget> = {
|
||||
...activityTarget,
|
||||
[targetObjectName]: undefined,
|
||||
[targetFieldName]: undefined,
|
||||
[`${targetFieldName}Id`]: morphItem.recordId,
|
||||
};
|
||||
|
||||
await createOneActivityTarget(activityTargetInput);
|
||||
}
|
||||
|
||||
setActivityFromStore((currentActivity) => {
|
||||
if (!isDefined(currentActivity)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
...currentActivity,
|
||||
[`${targetObjectName}Targets`]: activityTargetsAfterUpdate,
|
||||
};
|
||||
});
|
||||
},
|
||||
[
|
||||
store,
|
||||
activityId,
|
||||
activityObjectNameSingular,
|
||||
createOneActivityTarget,
|
||||
|
||||
Reference in New Issue
Block a user