houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Jotai 13 (#18178)

Browse Source 
## 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
2026-02-24 17:37:01 +01:00
committed by GitHub
parent c6ec764b23
commit 0f2af6a6cb
1326 changed files with 19248 additions and 19389 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/views/components/AnyFieldSearchChip.tsx
+3 -4
View File
@@ -1,6 +1,6 @@
import { anyFieldFilterValueComponentState } from '@/object-record/record-filter/states/anyFieldFilterValueComponentState';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
import { useLingui } from '@lingui/react/macro';
@@ -11,9 +11,8 @@ export const AnyFieldSearchChip = () => {
const { closeDropdown } = useCloseDropdown();
const [anyFieldFilterValue, setAnyFieldFilterValue] = useRecoilComponentState(
anyFieldFilterValueComponentState,
);
const [anyFieldFilterValue, setAnyFieldFilterValue] =
useRecoilComponentStateV2(anyFieldFilterValueComponentState);
const handleRemoveClick = () => {
closeDropdown();
packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useFiltersFromQueryParams } from '@/views/hooks/internal/useFiltersFromQueryParams';
import { useHasFiltersInQueryParams } from '@/views/hooks/internal/useHasFiltersInQueryParams';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@@ -31,11 +31,11 @@ export const QueryParamsFiltersEffect = () => {
const { mapViewFiltersToRecordFilters } = useMapViewFiltersToFilters();
const { recordIndexId } = useRecordIndexContextOrThrow();
const setCurrentRecordFilters = useSetRecoilComponentState(
const setCurrentRecordFilters = useSetRecoilComponentStateV2(
currentRecordFiltersComponentState,
recordIndexId,
);
const setCurrentRecordFilterGroups = useSetRecoilComponentState(
const setCurrentRecordFilterGroups = useSetRecoilComponentStateV2(
currentRecordFilterGroupsComponentState,
recordIndexId,
);
packages/twenty-front/src/modules/views/components/SoftDeleteFilterChip.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
import { useIcons } from 'twenty-ui/display';
@@ -14,7 +14,7 @@ export const SoftDeleteFilterChip = ({
recordFilter,
viewBarId,
}: SoftDeleteFilterChipProps) => {
const setIsSoftDeleteFilterActive = useSetRecoilComponentState(
const setIsSoftDeleteFilterActive = useSetRecoilComponentStateV2(
isSoftDeleteFilterActiveComponentState,
viewBarId,
);
packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
+4 -4
View File
@@ -7,8 +7,8 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { UPDATE_VIEW_BUTTON_DROPDOWN_ID } from '@/views/constants/UpdateViewButtonDropdownId';
import { useHasFiltersInQueryParams } from '@/views/hooks/internal/useHasFiltersInQueryParams';
import { useAreViewFilterGroupsDifferentFromRecordFilterGroups } from '@/views/hooks/useAreViewFilterGroupsDifferentFromRecordFilterGroups';
@@ -45,7 +45,7 @@ export const UpdateViewButtonGroup = () => {
const { setViewPickerMode } = useViewPickerMode();
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
@@ -53,7 +53,7 @@ export const UpdateViewButtonGroup = () => {
const { openDropdown: openViewPickerDropdown } = useOpenDropdown();
const { currentView } = useGetCurrentViewOnly();
const setViewPickerReferenceViewId = useSetRecoilComponentState(
const setViewPickerReferenceViewId = useSetRecoilComponentStateV2(
viewPickerReferenceViewIdComponentState,
);
packages/twenty-front/src/modules/views/components/ViewBarAnyFieldFilterEffect.tsx
+8 -7
View File
@@ -1,9 +1,9 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { anyFieldFilterValueComponentState } from '@/object-record/record-filter/states/anyFieldFilterValueComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { hasInitializedAnyFieldFilterComponentFamilyState } from '@/views/states/hasInitializedAnyFieldFilterComponentFamilyState';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
@@ -11,11 +11,11 @@ import { useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const ViewBarAnyFieldFilterEffect = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const { objectMetadataItem, recordIndexId } = useRecordIndexContextOrThrow();
const currentView = useFamilySelectorValueV2(
coreViewFromViewIdFamilySelector,
@@ -23,15 +23,16 @@ export const ViewBarAnyFieldFilterEffect = () => {
);
const [hasInitializedAnyFieldFilter, setHasInitializedAnyFieldFilter] =
useRecoilComponentFamilyState(
useRecoilComponentFamilyStateV2(
hasInitializedAnyFieldFilterComponentFamilyState,
{
viewId: currentViewId ?? undefined,
},
);
const setAnyFieldFilterValue = useSetRecoilComponentState(
const setAnyFieldFilterValue = useSetRecoilComponentStateV2(
anyFieldFilterValueComponentState,
recordIndexId,
);
useEffect(() => {
packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
+9 -6
View File
@@ -4,7 +4,6 @@ import { type ReactNode, useMemo } from 'react';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { AdvancedFilterDropdownButton } from '@/views/advanced-filter-chip/components/AdvancedFilterDropdownButton';
import { ViewBarDetailsAddFilterButton } from '@/views/components/ViewBarDetailsAddFilterButton';
@@ -107,26 +106,30 @@ export const ViewBarDetails = ({
viewBarId,
objectNamePlural,
}: ViewBarDetailsProps) => {
const isViewBarExpanded = useRecoilComponentValue(
const isViewBarExpanded = useRecoilComponentValueV2(
isViewBarExpandedComponentState,
);
const { hasFiltersQueryParams } = useHasFiltersInQueryParams();
const currentRecordFilterGroups = useRecoilComponentValue(
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
viewBarId,
);
const currentRecordFilters = useRecoilComponentValue(
const currentRecordFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
viewBarId,
);
const currentRecordSorts = useRecoilComponentValue(
const currentRecordSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
viewBarId,
);
const anyFieldFilterValue = useRecoilComponentValue(
const anyFieldFilterValue = useRecoilComponentValueV2(
anyFieldFilterValueComponentState,
viewBarId,
);
const { objectNameSingular } = useObjectNameSingularFromPlural({
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdow
import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { ViewBarFilterDropdownContent } from '@/views/components/ViewBarFilterDropdownContent';
import { isDefined } from 'twenty-shared/utils';
import { ViewBarFilterButton } from './ViewBarFilterButton';
@@ -14,7 +14,7 @@ export const ViewBarFilterDropdown = () => {
const { resetFilterDropdown } = useResetFilterDropdown();
const { removeRecordFilter } = useRemoveRecordFilter();
const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValue(
const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValueV2(
objectFilterDropdownCurrentRecordFilterComponentState,
);
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-reco
import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import styled from '@emotion/styled';
@@ -67,7 +67,7 @@ export const ViewBarFilterDropdownAdvancedFilterButton = () => {
},
);
const currentRecordFilterGroups = useRecoilComponentValue(
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
);
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAnyFieldSearchButtonMenuItem.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyValueV2';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
import { IconSearch } from 'twenty-ui/display';
@@ -25,7 +25,7 @@ export const ViewBarFilterDropdownAnyFieldSearchButtonMenuItem = ({
}: ViewBarFilterDropdownAnyFieldSearchButtonMenuItemProps) => {
const { t } = useLingui();
const objectFilterDropdownSearchInput = useRecoilComponentValue(
const objectFilterDropdownSearchInput = useRecoilComponentValueV2(
objectFilterDropdownSearchInputComponentState,
);
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownContent.tsx
+7 -6
View File
@@ -1,21 +1,22 @@
import { objectFilterDropdownAnyFieldSearchIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownAnyFieldSearchIsSelectedComponentState';
import { objectFilterDropdownFilterIsSelectedComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownFilterIsSelectedComponentState';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { ViewBarFilterDropdownAnyFieldSearchInput } from '@/views/components/ViewBarFilterDropdownAnyFieldSearchInput';
import { ViewBarFilterDropdownFieldSelectMenu } from '@/views/components/ViewBarFilterDropdownFieldSelectMenu';
import { ViewBarFilterDropdownFilterInput } from '@/views/components/ViewBarFilterDropdownFilterInput';
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
export const ViewBarFilterDropdownContent = () => {
const [objectFilterDropdownFilterIsSelected] = useRecoilComponentState(
const [objectFilterDropdownFilterIsSelected] = useRecoilComponentStateV2(
objectFilterDropdownFilterIsSelectedComponentState,
ViewBarFilterDropdownIds.MAIN,
);
const objectFilterDropdownAnyFieldSearchIsSelected = useRecoilComponentValue(
objectFilterDropdownAnyFieldSearchIsSelectedComponentState,
);
const objectFilterDropdownAnyFieldSearchIsSelected =
useRecoilComponentValueV2(
objectFilterDropdownAnyFieldSearchIsSelectedComponentState,
);
const isAnyFieldSearchFilter = objectFilterDropdownAnyFieldSearchIsSelected;
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import { FILTER_FIELD_LIST_ID } from '@/object-record/object-filter-dropdown/con
import { useFilterDropdownSelectableFieldMetadataItems } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdownSelectableFieldMetadataItems';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel';
import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
import { ViewBarFilterDropdownBottomMenu } from '@/views/components/ViewBarFilterDropdownBottomMenu';
import { ViewBarFilterDropdownFieldSelectMenuItem } from '@/views/components/ViewBarFilterDropdownFieldSelectMenuItem';
@@ -53,7 +53,7 @@ export const StyledInput = styled.input`
export const ViewBarFilterDropdownFieldSelectMenu = () => {
const [objectFilterDropdownSearchInput, setObjectFilterDropdownSearchInput] =
useRecoilComponentState(objectFilterDropdownSearchInputComponentState);
useRecoilComponentStateV2(objectFilterDropdownSearchInputComponentState);
const {
selectableHiddenFieldMetadataItems,
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFilterInputMenuHeader.tsx
+2 -2
View File
@@ -2,11 +2,11 @@ import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/h
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentSelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentSelectorValueV2';
import { IconChevronLeft } from 'twenty-ui/display';
export const ViewBarFilterDropdownFilterInputMenuHeader = () => {
const fieldMetadataItemUsedInDropdown = useRecoilComponentValue(
const fieldMetadataItemUsedInDropdown = useRecoilComponentSelectorValueV2(
fieldMetadataItemUsedInDropdownComponentSelector,
);
packages/twenty-front/src/modules/views/components/ViewBarRecordFieldEffect.tsx
+6 -6
View File
@@ -1,9 +1,9 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { hasInitializedCurrentRecordFieldsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFieldsComponentFamilyState';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
@@ -12,7 +12,7 @@ import { useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const ViewBarRecordFieldEffect = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
@@ -26,14 +26,14 @@ export const ViewBarRecordFieldEffect = () => {
const [
hasInitializedCurrentRecordFields,
setHasInitializedCurrentRecordFields,
] = useRecoilComponentFamilyState(
] = useRecoilComponentFamilyStateV2(
hasInitializedCurrentRecordFieldsComponentFamilyState,
{
viewId: currentViewId ?? undefined,
},
);
const setCurrentRecordFields = useSetRecoilComponentState(
const setCurrentRecordFields = useSetRecoilComponentStateV2(
currentRecordFieldsComponentState,
);
packages/twenty-front/src/modules/views/components/ViewBarRecordFilterEffect.tsx
+8 -7
View File
@@ -1,9 +1,9 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { useMapViewFiltersToFilters } from '@/views/hooks/useMapViewFiltersToFilters';
import { hasInitializedCurrentRecordFiltersComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFiltersComponentFamilyState';
@@ -12,11 +12,11 @@ import { useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const ViewBarRecordFilterEffect = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const { objectMetadataItem, recordIndexId } = useRecordIndexContextOrThrow();
const currentView = useFamilySelectorValueV2(
coreViewFromViewIdFamilySelector,
@@ -26,15 +26,16 @@ export const ViewBarRecordFilterEffect = () => {
const [
hasInitializedCurrentRecordFilters,
setHasInitializedCurrentRecordFilters,
] = useRecoilComponentFamilyState(
] = useRecoilComponentFamilyStateV2(
hasInitializedCurrentRecordFiltersComponentFamilyState,
{
viewId: currentViewId ?? undefined,
},
);
const setCurrentRecordFilters = useSetRecoilComponentState(
const setCurrentRecordFilters = useSetRecoilComponentStateV2(
currentRecordFiltersComponentState,
recordIndexId,
);
const { mapViewFiltersToRecordFilters } = useMapViewFiltersToFilters();
packages/twenty-front/src/modules/views/components/ViewBarRecordFilterGroupEffect.tsx
+8 -7
View File
@@ -1,9 +1,9 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { hasInitializedCurrentRecordFilterGroupsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordFilterGroupsComponentFamilyState';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
@@ -12,11 +12,11 @@ import { useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const ViewBarRecordFilterGroupEffect = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const { objectMetadataItem, recordIndexId } = useRecordIndexContextOrThrow();
const currentView = useFamilySelectorValueV2(
coreViewFromViewIdFamilySelector,
@@ -26,15 +26,16 @@ export const ViewBarRecordFilterGroupEffect = () => {
const [
hasInitializedCurrentRecordFilterGroups,
setHasInitializedCurrentRecordFilterGroups,
] = useRecoilComponentFamilyState(
] = useRecoilComponentFamilyStateV2(
hasInitializedCurrentRecordFilterGroupsComponentFamilyState,
{
viewId: currentViewId ?? undefined,
},
);
const setCurrentRecordFilterGroups = useSetRecoilComponentState(
const setCurrentRecordFilterGroups = useSetRecoilComponentStateV2(
currentRecordFilterGroupsComponentState,
recordIndexId,
);
useEffect(() => {
packages/twenty-front/src/modules/views/components/ViewBarRecordSortEffect.tsx
+8 -7
View File
@@ -1,9 +1,9 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { hasInitializedCurrentRecordSortsComponentFamilyState } from '@/views/states/hasInitializedCurrentRecordSortsComponentFamilyState';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
@@ -11,11 +11,11 @@ import { useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const ViewBarRecordSortEffect = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const { objectMetadataItem, recordIndexId } = useRecordIndexContextOrThrow();
const currentView = useFamilySelectorValueV2(
coreViewFromViewIdFamilySelector,
@@ -25,15 +25,16 @@ export const ViewBarRecordSortEffect = () => {
const [
hasInitializedCurrentRecordSorts,
setHasInitializedCurrentRecordSorts,
] = useRecoilComponentFamilyState(
] = useRecoilComponentFamilyStateV2(
hasInitializedCurrentRecordSortsComponentFamilyState,
{
viewId: currentViewId ?? undefined,
},
);
const setCurrentRecordSorts = useSetRecoilComponentState(
const setCurrentRecordSorts = useSetRecoilComponentStateV2(
currentRecordSortsComponentState,
recordIndexId,
);
useEffect(() => {
packages/twenty-front/src/modules/views/components/ViewFieldsHiddenDropdownSection.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { ObjectOptionsDropdownContext } from '@/object-record/object-options-dro
import { useChangeRecordFieldVisibility } from '@/object-record/record-field/hooks/useChangeRecordFieldVisibility';
import { currentRecordFieldsComponentState } from '@/object-record/record-field/states/currentRecordFieldsComponentState';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { ViewType } from '@/views/types/ViewType';
import { useContext } from 'react';
import { IconEye, useIcons } from 'twenty-ui/display';
@@ -29,7 +29,7 @@ export const ViewFieldsHiddenDropdownSection = () => {
? handleBoardFieldVisibilityChange
: changeRecordFieldVisibility;
const currentRecordFields = useRecoilComponentValue(
const currentRecordFields = useRecoilComponentValueV2(
currentRecordFieldsComponentState,
);
packages/twenty-front/src/modules/views/components/ViewFieldsVisibleDropdownSection.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { dropdownYPositionComponentState } from '@/ui/layout/dropdown/states/internal/dropdownYPositionComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentSelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentSelectorValueV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { ViewType } from '@/views/types/ViewType';
import { useContext } from 'react';
@@ -60,7 +60,7 @@ export const ViewFieldsVisibleDropdownSection = () => {
const fieldMetadataItemLabelIdentifier =
getLabelIdentifierFieldMetadataItem(objectMetadataItem);
const visibleRecordFields = useRecoilComponentValue(
const visibleRecordFields = useRecoilComponentSelectorValueV2(
visibleRecordFieldsComponentSelector,
);
packages/twenty-front/src/modules/views/components/__stories__/ViewBarFilterDropdown.stories.tsx
+35 -17
View File
@@ -1,4 +1,5 @@
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { useEffect, useMemo, useState } from 'react';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
@@ -6,7 +7,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { ViewBarFilterDropdown } from '@/views/components/ViewBarFilterDropdown';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
@@ -37,7 +38,7 @@ const meta: Meta<typeof ViewBarFilterDropdown> = {
)!;
const instanceId = companyObjectMetadataItem.id;
const setCurrentRecordFields = useSetRecoilComponentState(
const setCurrentRecordFields = useSetRecoilComponentStateV2(
currentRecordFieldsComponentState,
instanceId,
);
@@ -46,27 +47,40 @@ const meta: Meta<typeof ViewBarFilterDropdown> = {
const mockCoreView = mockedCoreViewsData[0];
setCoreViews([mockCoreView]);
const setCurrentViewId = useSetRecoilComponentState(
const setCurrentViewId = useSetRecoilComponentStateV2(
contextStoreCurrentViewIdComponentState,
MAIN_CONTEXT_STORE_INSTANCE_ID,
);
setCurrentViewId(mockCoreView.id);
const columns = companyObjectMetadataItem.fields.map(
(fieldMetadataItem, index) =>
({
id: fieldMetadataItem.id,
fieldMetadataItemId: fieldMetadataItem.id,
isVisible: true,
position: index,
size: 100,
}) satisfies RecordField,
const columns = useMemo(
() =>
companyObjectMetadataItem.fields.map(
(fieldMetadataItem, index) =>
({
id: fieldMetadataItem.id,
fieldMetadataItemId: fieldMetadataItem.id,
isVisible: true,
position: index,
size: 100,
}) satisfies RecordField,
),
[companyObjectMetadataItem.fields],
);
setCurrentRecordFields(columns);
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
setCoreViews([mockCoreView]);
setCurrentViewId(mockCoreView.id);
setCurrentRecordFields(columns);
setIsLoaded(true);
}, [
setCoreViews,
setCurrentViewId,
setCurrentRecordFields,
mockCoreView,
columns,
]);
const {
fieldDefinitionByFieldMetadataItemId,
@@ -78,6 +92,10 @@ const meta: Meta<typeof ViewBarFilterDropdown> = {
instanceId,
);
if (!isLoaded) {
return <></>;
}
return (
<RecordIndexContextProvider
value={{