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/hooks/__tests__/useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups.test.tsx
+19 -9
View File
@@ -3,8 +3,11 @@ import { renderHook } from '@testing-library/react';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { type RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import {
jotaiStore,
resetJotaiStore,
} from '@/ui/utilities/state/jotai/jotaiStore';
import { useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups } from '@/views/hooks/useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups';
import { coreViewsState } from '@/views/states/coreViewState';
import { type CoreViewWithRelations } from '@/views/types/CoreViewWithRelations';
@@ -35,6 +38,10 @@ describe('useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups', () => {
);
}
beforeEach(() => {
resetJotaiStore();
});
afterEach(() => {
jotaiStore.set(coreViewsState.atom, []);
});
@@ -79,8 +86,9 @@ describe('useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups', () => {
const { applyCurrentViewFilterGroupsToCurrentRecordFilterGroups } =
useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups();
const currentRecordFilterGroups = useRecoilComponentValue(
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
'recordIndexId',
);
return {
@@ -129,8 +137,9 @@ describe('useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups', () => {
const { applyCurrentViewFilterGroupsToCurrentRecordFilterGroups } =
useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups();
const currentRecordFilterGroups = useRecoilComponentValue(
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
'recordIndexId',
);
return {
@@ -144,8 +153,8 @@ describe('useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups', () => {
componentInstanceId: 'instanceId',
contextStoreCurrentObjectMetadataNameSingular:
mockObjectMetadataItemNameSingular,
onInitializeRecoilSnapshot: (snapshot) => {
snapshot.set(
onInitializeJotaiStore: (store) => {
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: 'instanceId',
}),
@@ -173,8 +182,9 @@ describe('useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups', () => {
const { applyCurrentViewFilterGroupsToCurrentRecordFilterGroups } =
useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups();
const currentRecordFilterGroups = useRecoilComponentValue(
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
'recordIndexId',
);
return {
@@ -188,8 +198,8 @@ describe('useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups', () => {
componentInstanceId: 'instanceId',
contextStoreCurrentObjectMetadataNameSingular:
mockObjectMetadataItemNameSingular,
onInitializeRecoilSnapshot: (snapshot) => {
snapshot.set(
onInitializeJotaiStore: (store) => {
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: 'instanceId',
}),
packages/twenty-front/src/modules/views/hooks/__tests__/useApplyCurrentViewFiltersToCurrentRecordFilters.test.tsx
+19 -9
View File
@@ -3,8 +3,11 @@ import { renderHook } from '@testing-library/react';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import {
jotaiStore,
resetJotaiStore,
} from '@/ui/utilities/state/jotai/jotaiStore';
import { coreViewsState } from '@/views/states/coreViewState';
import { type CoreViewWithRelations } from '@/views/types/CoreViewWithRelations';
import { type View } from '@/views/types/View';
@@ -37,6 +40,10 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
);
}
beforeEach(() => {
resetJotaiStore();
});
afterEach(() => {
jotaiStore.set(coreViewsState.atom, []);
});
@@ -90,8 +97,9 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
const { applyCurrentViewFiltersToCurrentRecordFilters } =
useApplyCurrentViewFiltersToCurrentRecordFilters();
const currentFilters = useRecoilComponentValue(
const currentFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
'recordIndexId',
);
return {
@@ -138,8 +146,9 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
const { applyCurrentViewFiltersToCurrentRecordFilters } =
useApplyCurrentViewFiltersToCurrentRecordFilters();
const currentFilters = useRecoilComponentValue(
const currentFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
'recordIndexId',
);
return {
@@ -153,8 +162,8 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
componentInstanceId: 'instanceId',
contextStoreCurrentObjectMetadataNameSingular:
mockObjectMetadataItemNameSingular,
onInitializeRecoilSnapshot: (snapshot) => {
snapshot.set(
onInitializeJotaiStore: (store) => {
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: 'instanceId',
}),
@@ -180,8 +189,9 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
const { applyCurrentViewFiltersToCurrentRecordFilters } =
useApplyCurrentViewFiltersToCurrentRecordFilters();
const currentFilters = useRecoilComponentValue(
const currentFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
'recordIndexId',
);
return {
@@ -195,8 +205,8 @@ describe('useApplyCurrentViewFiltersToCurrentRecordFilters', () => {
componentInstanceId: 'instanceId',
contextStoreCurrentObjectMetadataNameSingular:
mockObjectMetadataItemNameSingular,
onInitializeRecoilSnapshot: (snapshot) => {
snapshot.set(
onInitializeJotaiStore: (store) => {
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: 'instanceId',
}),
packages/twenty-front/src/modules/views/hooks/__tests__/useApplyCurrentViewSortsToCurrentRecordSorts.test.tsx
+11 -8
View File
@@ -2,7 +2,7 @@ import { act, renderHook } from '@testing-library/react';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
@@ -81,8 +81,9 @@ describe('useApplyCurrentViewSortsToCurrentRecordSorts', () => {
const { applyCurrentViewSortsToCurrentRecordSorts } =
useApplyCurrentViewSortsToCurrentRecordSorts();
const currentSorts = useRecoilComponentValue(
const currentSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
'recordIndexId',
);
return {
@@ -122,8 +123,9 @@ describe('useApplyCurrentViewSortsToCurrentRecordSorts', () => {
const { applyCurrentViewSortsToCurrentRecordSorts } =
useApplyCurrentViewSortsToCurrentRecordSorts();
const currentSorts = useRecoilComponentValue(
const currentSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
'recordIndexId',
);
return {
@@ -137,8 +139,8 @@ describe('useApplyCurrentViewSortsToCurrentRecordSorts', () => {
componentInstanceId: 'instanceId',
contextStoreCurrentObjectMetadataNameSingular:
mockObjectMetadataItemNameSingular,
onInitializeRecoilSnapshot: (snapshot) => {
snapshot.set(
onInitializeJotaiStore: (store) => {
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: 'instanceId',
}),
@@ -169,8 +171,9 @@ describe('useApplyCurrentViewSortsToCurrentRecordSorts', () => {
const { applyCurrentViewSortsToCurrentRecordSorts } =
useApplyCurrentViewSortsToCurrentRecordSorts();
const currentSorts = useRecoilComponentValue(
const currentSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
'recordIndexId',
);
return {
@@ -184,8 +187,8 @@ describe('useApplyCurrentViewSortsToCurrentRecordSorts', () => {
componentInstanceId: 'instanceId',
contextStoreCurrentObjectMetadataNameSingular:
mockObjectMetadataItemNameSingular,
onInitializeRecoilSnapshot: (snapshot) => {
snapshot.set(
onInitializeJotaiStore: (store) => {
store.set(
contextStoreCurrentViewIdComponentState.atomFamily({
instanceId: 'instanceId',
}),
packages/twenty-front/src/modules/views/hooks/__tests__/useApplyViewFiltersToCurrentRecordFilters.test.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import { act, renderHook } from '@testing-library/react';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { type ViewFilter } from '@/views/types/ViewFilter';
import { ViewFilterOperand } from 'twenty-shared/types';
import { getFilterTypeFromFieldType, isDefined } from 'twenty-shared/utils';
@@ -42,7 +42,7 @@ describe('useApplyViewFiltersToCurrentRecordFilters', () => {
const { applyViewFiltersToCurrentRecordFilters } =
useApplyViewFiltersToCurrentRecordFilters();
const currentFilters = useRecoilComponentValue(
const currentFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
);
@@ -83,7 +83,7 @@ describe('useApplyViewFiltersToCurrentRecordFilters', () => {
const { applyViewFiltersToCurrentRecordFilters } =
useApplyViewFiltersToCurrentRecordFilters();
const currentFilters = useRecoilComponentValue(
const currentFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
);
packages/twenty-front/src/modules/views/hooks/__tests__/useApplyViewSortsToCurrentRecordSorts.test.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { act, renderHook } from '@testing-library/react';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
@@ -45,7 +45,7 @@ describe('useApplyViewSortsToCurrentRecordSorts', () => {
const { applyViewSortsToCurrentRecordSorts } =
useApplyViewSortsToCurrentRecordSorts();
const currentSorts = useRecoilComponentValue(
const currentSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
);
@@ -80,7 +80,7 @@ describe('useApplyViewSortsToCurrentRecordSorts', () => {
const { applyViewSortsToCurrentRecordSorts } =
useApplyViewSortsToCurrentRecordSorts();
const currentSorts = useRecoilComponentValue(
const currentSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
);
packages/twenty-front/src/modules/views/hooks/__tests__/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.test.tsx
+52 -37
View File
@@ -8,7 +8,10 @@ import { selectedOperandInDropdownComponentState } from '@/object-record/object-
import { useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown } from '@/views/hooks/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import {
jotaiStore,
resetJotaiStore,
} from '@/ui/utilities/state/jotai/jotaiStore';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
@@ -17,8 +20,9 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentSelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentSelectorValueV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
import { getFilterTypeFromFieldType } from 'twenty-shared/utils';
import { getMockPersonObjectMetadataItem } from '~/testing/mock-data/people';
@@ -66,6 +70,7 @@ const wrapper = ({ children }: { children: React.ReactNode }) => {
describe('useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown', () => {
beforeEach(() => {
resetJotaiStore();
jest.clearAllMocks();
});
@@ -75,13 +80,14 @@ describe('useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown', () =
const { initializeFilterOnFieldMetataItemFromViewBarFilterDropdown } =
useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown();
const fieldMetadataItemUsedInDropdown = useRecoilComponentValue(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const objectFilterDropdownFilterIsSelected = useRecoilComponentValue(
const fieldMetadataItemUsedInDropdown =
useRecoilComponentSelectorValueV2(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const objectFilterDropdownFilterIsSelected = useRecoilComponentValueV2(
objectFilterDropdownFilterIsSelectedComponentState,
);
const selectedOperandInDropdown = useRecoilComponentValue(
const selectedOperandInDropdown = useRecoilComponentValueV2(
selectedOperandInDropdownComponentState,
);
@@ -127,13 +133,14 @@ describe('useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown', () =
const { initializeFilterOnFieldMetataItemFromViewBarFilterDropdown } =
useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown();
const fieldMetadataItemUsedInDropdown = useRecoilComponentValue(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const objectFilterDropdownFilterIsSelected = useRecoilComponentValue(
const fieldMetadataItemUsedInDropdown =
useRecoilComponentSelectorValueV2(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const objectFilterDropdownFilterIsSelected = useRecoilComponentValueV2(
objectFilterDropdownFilterIsSelectedComponentState,
);
const selectedOperandInDropdown = useRecoilComponentValue(
const selectedOperandInDropdown = useRecoilComponentValueV2(
selectedOperandInDropdownComponentState,
);
@@ -188,26 +195,30 @@ describe('useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown', () =
const { initializeFilterOnFieldMetataItemFromViewBarFilterDropdown } =
useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown();
const fieldMetadataItemUsedInDropdown = useRecoilComponentValue(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const objectFilterDropdownFilterIsSelected = useRecoilComponentValue(
const fieldMetadataItemUsedInDropdown =
useRecoilComponentSelectorValueV2(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const objectFilterDropdownFilterIsSelected = useRecoilComponentValueV2(
objectFilterDropdownFilterIsSelectedComponentState,
);
const selectedOperandInDropdown = useRecoilComponentValue(
const selectedOperandInDropdown = useRecoilComponentValueV2(
selectedOperandInDropdownComponentState,
);
const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValue(
objectFilterDropdownCurrentRecordFilterComponentState,
const objectFilterDropdownCurrentRecordFilter =
useRecoilComponentValueV2(
objectFilterDropdownCurrentRecordFilterComponentState,
);
const setCurrentRecordFilters = useSetRecoilComponentStateV2(
currentRecordFiltersComponentState,
'test',
);
const setCurrentRecordFilters = useSetRecoilComponentState(
currentRecordFiltersComponentState,
);
const currentRecordFilters = useRecoilComponentValue(
const currentRecordFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
'test',
);
return {
@@ -268,26 +279,30 @@ describe('useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown', () =
const { initializeFilterOnFieldMetataItemFromViewBarFilterDropdown } =
useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown();
const fieldMetadataItemUsedInDropdown = useRecoilComponentValue(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const objectFilterDropdownFilterIsSelected = useRecoilComponentValue(
const fieldMetadataItemUsedInDropdown =
useRecoilComponentSelectorValueV2(
fieldMetadataItemUsedInDropdownComponentSelector,
);
const objectFilterDropdownFilterIsSelected = useRecoilComponentValueV2(
objectFilterDropdownFilterIsSelectedComponentState,
);
const selectedOperandInDropdown = useRecoilComponentValue(
const selectedOperandInDropdown = useRecoilComponentValueV2(
selectedOperandInDropdownComponentState,
);
const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValue(
objectFilterDropdownCurrentRecordFilterComponentState,
const objectFilterDropdownCurrentRecordFilter =
useRecoilComponentValueV2(
objectFilterDropdownCurrentRecordFilterComponentState,
);
const setCurrentRecordFilters = useSetRecoilComponentStateV2(
currentRecordFiltersComponentState,
'test',
);
const setCurrentRecordFilters = useSetRecoilComponentState(
currentRecordFiltersComponentState,
);
const currentRecordFilters = useRecoilComponentValue(
const currentRecordFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
'test',
);
return {
packages/twenty-front/src/modules/views/hooks/internal/useGetRecordIndexTotalCount.ts
+4 -4
View File
@@ -5,7 +5,7 @@ import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/
import { anyFieldFilterValueComponentState } from '@/object-record/record-filter/states/anyFieldFilterValueComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { AggregateOperations } from '@/object-record/record-table/constants/AggregateOperations';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useGetViewGroupsFilters } from '@/views/hooks/useGetViewGroupsFilters';
import {
computeRecordGqlOperationFilter,
@@ -15,11 +15,11 @@ import {
export const useGetRecordIndexTotalCount = () => {
const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
const currentRecordFilterGroups = useRecoilComponentValue(
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
);
const currentRecordFilters = useRecoilComponentValue(
const currentRecordFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
);
@@ -34,7 +34,7 @@ export const useGetRecordIndexTotalCount = () => {
fields: objectMetadataItem.fields,
});
const anyFieldFilterValue = useRecoilComponentValue(
const anyFieldFilterValue = useRecoilComponentValueV2(
anyFieldFilterValueComponentState,
);
packages/twenty-front/src/modules/views/hooks/useApplyCurrentViewAnyFieldFilterToAnyFieldFilter.ts
+4 -4
View File
@@ -1,18 +1,18 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { anyFieldFilterValueComponentState } from '@/object-record/record-filter/states/anyFieldFilterValueComponentState';
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 { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useApplyCurrentViewAnyFieldFilterToAnyFieldFilter = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const setAnyFieldFilterValue = useSetRecoilComponentState(
const setAnyFieldFilterValue = useSetRecoilComponentStateV2(
anyFieldFilterValueComponentState,
);
packages/twenty-front/src/modules/views/hooks/useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups.ts
+35 -38
View File
@@ -1,64 +1,61 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
import { mapViewFilterGroupsToRecordFilterGroups } from '@/views/utils/mapViewFilterGroupsToRecordFilterGroups';
import { useStore } from 'jotai';
import { useRecoilCallback } from 'recoil';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
export const useApplyCurrentViewFilterGroupsToCurrentRecordFilterGroups =
() => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const setCurrentRecordFilterGroups = useSetRecoilComponentState(
const setCurrentRecordFilterGroups = useSetRecoilComponentStateV2(
currentRecordFilterGroupsComponentState,
);
const currentRecordFilterGroupsCallbackState =
useRecoilComponentCallbackState(currentRecordFilterGroupsComponentState);
const currentRecordFilterGroupsAtom =
useRecoilComponentStateCallbackStateV2(
currentRecordFilterGroupsComponentState,
);
const store = useStore();
const applyCurrentViewFilterGroupsToCurrentRecordFilterGroups =
useRecoilCallback(
({ snapshot }) =>
() => {
const currentView = store.get(
coreViewFromViewIdFamilySelector.selectorFamily({
viewId: currentViewId ?? '',
}),
);
useCallback(() => {
const currentView = store.get(
coreViewFromViewIdFamilySelector.selectorFamily({
viewId: currentViewId ?? '',
}),
);
if (isDefined(currentView)) {
const currentRecordFilterGroups = snapshot
.getLoadable(currentRecordFilterGroupsCallbackState)
.getValue();
if (isDefined(currentView)) {
const currentRecordFilterGroups = store.get(
currentRecordFilterGroupsAtom,
);
const newRecordFilterGroups =
mapViewFilterGroupsToRecordFilterGroups(
currentView.viewFilterGroups ?? [],
);
const newRecordFilterGroups = mapViewFilterGroupsToRecordFilterGroups(
currentView.viewFilterGroups ?? [],
);
if (
!isDeeplyEqual(currentRecordFilterGroups, newRecordFilterGroups)
) {
setCurrentRecordFilterGroups(newRecordFilterGroups);
}
}
},
[
currentViewId,
setCurrentRecordFilterGroups,
currentRecordFilterGroupsCallbackState,
store,
],
);
if (
!isDeeplyEqual(currentRecordFilterGroups, newRecordFilterGroups)
) {
setCurrentRecordFilterGroups(newRecordFilterGroups);
}
}
}, [
currentViewId,
setCurrentRecordFilterGroups,
currentRecordFilterGroupsAtom,
store,
]);
return {
applyCurrentViewFilterGroupsToCurrentRecordFilterGroups,
packages/twenty-front/src/modules/views/hooks/useApplyCurrentViewFiltersToCurrentRecordFilters.ts
+4 -4
View File
@@ -1,7 +1,7 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
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 { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
import { useStore } from 'jotai';
import { useCallback } from 'react';
@@ -9,11 +9,11 @@ import { isDefined } from 'twenty-shared/utils';
import { useMapViewFiltersToFilters } from './useMapViewFiltersToFilters';
export const useApplyCurrentViewFiltersToCurrentRecordFilters = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const setCurrentRecordFilters = useSetRecoilComponentState(
const setCurrentRecordFilters = useSetRecoilComponentStateV2(
currentRecordFiltersComponentState,
);
packages/twenty-front/src/modules/views/hooks/useApplyCurrentViewSortsToCurrentRecordSorts.ts
+4 -4
View File
@@ -1,13 +1,13 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
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 { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
import { isDefined } from 'twenty-shared/utils';
export const useApplyCurrentViewSortsToCurrentRecordSorts = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
@@ -16,7 +16,7 @@ export const useApplyCurrentViewSortsToCurrentRecordSorts = () => {
{ viewId: currentViewId ?? '' },
);
const setCurrentRecordSorts = useSetRecoilComponentState(
const setCurrentRecordSorts = useSetRecoilComponentStateV2(
currentRecordSortsComponentState,
);
packages/twenty-front/src/modules/views/hooks/useApplyViewFiltersToCurrentRecordFilters.ts
+2 -2
View File
@@ -1,10 +1,10 @@
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { type ViewFilter } from '@/views/types/ViewFilter';
import { useMapViewFiltersToFilters } from './useMapViewFiltersToFilters';
export const useApplyViewFiltersToCurrentRecordFilters = () => {
const setCurrentRecordFilters = useSetRecoilComponentState(
const setCurrentRecordFilters = useSetRecoilComponentStateV2(
currentRecordFiltersComponentState,
);
packages/twenty-front/src/modules/views/hooks/useApplyViewSortsToCurrentRecordSorts.ts
+2 -2
View File
@@ -1,9 +1,9 @@
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { type CoreViewSortEssential } from '@/views/types/CoreViewSortEssential';
export const useApplyViewSortsToCurrentRecordSorts = () => {
const setCurrentRecordSorts = useSetRecoilComponentState(
const setCurrentRecordSorts = useSetRecoilComponentStateV2(
currentRecordSortsComponentState,
);
packages/twenty-front/src/modules/views/hooks/useAreViewFilterGroupsDifferentFromRecordFilterGroups.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { getViewFilterGroupsToCreate } from '@/views/utils/getViewFilterGroupsToCreate';
import { getViewFilterGroupsToDelete } from '@/views/utils/getViewFilterGroupsToDelete';
@@ -10,7 +10,7 @@ import { isDefined } from 'twenty-shared/utils';
export const useAreViewFilterGroupsDifferentFromRecordFilterGroups = () => {
const { currentView } = useGetCurrentViewOnly();
const currentRecordFilterGroups = useRecoilComponentValue(
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
);
packages/twenty-front/src/modules/views/hooks/useAreViewFiltersDifferentFromRecordFilters.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { getViewFiltersToCreate } from '@/views/utils/getViewFiltersToCreate';
import { getViewFiltersToDelete } from '@/views/utils/getViewFiltersToDelete';
@@ -9,7 +9,7 @@ import { useMemo } from 'react';
export const useAreViewFiltersDifferentFromRecordFilters = () => {
const { currentView } = useGetCurrentViewOnly();
const currentRecordFilters = useRecoilComponentValue(
const currentRecordFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
);
packages/twenty-front/src/modules/views/hooks/useAreViewSortsDifferentFromRecordSorts.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { getViewSortsToCreate } from '@/views/utils/getViewSortsToCreate';
import { getViewSortsToDelete } from '@/views/utils/getViewSortsToDelete';
@@ -10,7 +10,7 @@ import { isDefined } from 'twenty-shared/utils';
export const useAreViewSortsDifferentFromRecordSorts = () => {
const { currentView } = useGetCurrentViewOnly();
const currentRecordSorts = useRecoilComponentValue(
const currentRecordSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
);
packages/twenty-front/src/modules/views/hooks/useCreateViewFromCurrentView.ts
+166 -167
View File
@@ -4,9 +4,8 @@ import { anyFieldFilterValueComponentState } from '@/object-record/record-filter
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { usePerformViewAPIPersist } from '@/views/hooks/internal/usePerformViewAPIPersist';
import { usePerformViewFieldAPIPersist } from '@/views/hooks/internal/usePerformViewFieldAPIPersist';
import { usePerformViewFilterAPIPersist } from '@/views/hooks/internal/usePerformViewFilterAPIPersist';
@@ -23,7 +22,7 @@ import { mapRecordFilterGroupToViewFilterGroup } from '@/views/utils/mapRecordFi
import { mapRecordFilterToViewFilter } from '@/views/utils/mapRecordFilterToViewFilter';
import { mapRecordSortToViewSort } from '@/views/utils/mapRecordSortToViewSort';
import { useStore } from 'jotai';
import { useRecoilCallback } from 'recoil';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
import { ViewCalendarLayout } from '~/generated-metadata/graphql';
@@ -32,13 +31,16 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
const { performViewAPICreate } = usePerformViewAPIPersist();
const currentViewIdCallbackState = useRecoilComponentCallbackState(
const { objectMetadataItem, recordIndexId } = useRecordIndexContextOrThrow();
const currentViewIdAtom = useRecoilComponentStateCallbackStateV2(
contextStoreCurrentViewIdComponentState,
viewBarComponentId,
);
const anyFieldFilterValue = useRecoilComponentValue(
const anyFieldFilterValue = useRecoilComponentValueV2(
anyFieldFilterValueComponentState,
recordIndexId,
);
const { performViewFieldAPICreate } = usePerformViewFieldAPIPersist();
@@ -50,196 +52,193 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
const { performViewFilterGroupAPICreate } =
usePerformViewFilterGroupAPIPersist();
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const store = useStore();
const { refreshCoreViewsByObjectMetadataId } =
useRefreshCoreViewsByObjectMetadataId();
const currentRecordFilterGroups = useRecoilComponentValue(
const currentRecordFilterGroups = useRecoilComponentValueV2(
currentRecordFilterGroupsComponentState,
recordIndexId,
);
const currentRecordSorts = useRecoilComponentValue(
const currentRecordSorts = useRecoilComponentValueV2(
currentRecordSortsComponentState,
recordIndexId,
);
const currentRecordFilters = useRecoilComponentValue(
const currentRecordFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
recordIndexId,
);
const createViewFromCurrentView = useRecoilCallback(
({ snapshot }) =>
async (
const createViewFromCurrentView = useCallback(
async (
{
id,
name,
icon,
mainGroupByFieldMetadataId,
calendarFieldMetadataId,
type,
visibility,
}: Partial<
Pick<
GraphQLView,
| 'id'
| 'name'
| 'icon'
| 'mainGroupByFieldMetadataId'
| 'calendarFieldMetadataId'
| 'type'
| 'visibility'
>
>,
shouldCopyFiltersAndSortsAndAggregate?: boolean,
): Promise<string | undefined> => {
const currentViewId = store.get(currentViewIdAtom);
if (!isDefined(currentViewId)) {
return undefined;
}
const sourceView = store.get(
coreViewFromViewIdFamilySelector.selectorFamily({
viewId: currentViewId,
}),
);
if (!isDefined(sourceView)) {
return undefined;
}
const viewType = type ?? sourceView.type;
const result = await performViewAPICreate(
{
id,
name,
icon,
mainGroupByFieldMetadataId,
calendarFieldMetadataId,
type,
visibility,
}: Partial<
Pick<
GraphQLView,
| 'id'
| 'name'
| 'icon'
| 'mainGroupByFieldMetadataId'
| 'calendarFieldMetadataId'
| 'type'
| 'visibility'
>
>,
shouldCopyFiltersAndSortsAndAggregate?: boolean,
): Promise<string | undefined> => {
const currentViewId = getSnapshotValue(
snapshot,
currentViewIdCallbackState,
input: {
id: id ?? v4(),
name: name ?? sourceView.name,
icon: icon ?? sourceView.icon,
key: null,
kanbanAggregateOperation: shouldCopyFiltersAndSortsAndAggregate
? sourceView.kanbanAggregateOperation
: undefined,
kanbanAggregateOperationFieldMetadataId:
shouldCopyFiltersAndSortsAndAggregate
? sourceView.kanbanAggregateOperationFieldMetadataId
: undefined,
mainGroupByFieldMetadataId: shouldCopyFiltersAndSortsAndAggregate
? sourceView.mainGroupByFieldMetadataId
: mainGroupByFieldMetadataId,
type: convertViewTypeToCore(viewType),
objectMetadataId: sourceView.objectMetadataId,
openRecordIn: convertViewOpenRecordInToCore(
sourceView.openRecordIn,
),
anyFieldFilterValue: anyFieldFilterValue,
calendarLayout:
viewType === ViewType.Calendar
? ViewCalendarLayout.MONTH
: undefined,
calendarFieldMetadataId:
viewType === ViewType.Calendar
? calendarFieldMetadataId
: undefined,
visibility,
},
},
objectMetadataItem.id,
);
if (result.status === 'failed') {
return undefined;
}
const newViewId = result.response.data?.createCoreView.id;
if (isUndefinedOrNull(newViewId)) {
throw new Error('Failed to create view');
}
const fieldResult = await performViewFieldAPICreate({
inputs: sourceView.viewFields.map(
({ __typename, id: _id, ...viewField }) => ({
...viewField,
id: v4(),
viewId: newViewId,
}),
),
});
if (fieldResult.status === 'failed') {
return undefined;
}
if (shouldCopyFiltersAndSortsAndAggregate === true) {
const viewFilterGroupsToCopy = currentRecordFilterGroups.map(
(recordFilterGroup) =>
mapRecordFilterGroupToViewFilterGroup({
recordFilterGroup,
view: { id: newViewId },
}),
);
if (!isDefined(currentViewId)) {
return undefined;
}
const viewFiltersToCopy = currentRecordFilters.map(
mapRecordFilterToViewFilter,
);
const sourceView = store.get(
coreViewFromViewIdFamilySelector.selectorFamily({
viewId: currentViewId,
const {
duplicatedViewFilterGroups: viewFilterGroupsToCreate,
duplicatedViewFilters: viewFiltersToCreate,
} = duplicateViewFiltersAndViewFilterGroups({
viewFilterGroupsToDuplicate: viewFilterGroupsToCopy,
viewFiltersToDuplicate: viewFiltersToCopy,
});
const viewSortsToCreate = currentRecordSorts
.map((recordSort) => mapRecordSortToViewSort(recordSort, newViewId))
.map((viewSort) => ({
...viewSort,
id: v4(),
}));
await performViewFilterGroupAPICreate(viewFilterGroupsToCreate, {
id: newViewId,
});
const createViewFilterInputs = viewFiltersToCreate.map(
(viewFilter) => ({
input: {
id: viewFilter.id,
fieldMetadataId: viewFilter.fieldMetadataId,
viewId: newViewId,
value: viewFilter.value,
operand: viewFilter.operand,
viewFilterGroupId: viewFilter.viewFilterGroupId,
positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
subFieldName: viewFilter.subFieldName ?? null,
},
}),
);
if (!isDefined(sourceView)) {
return undefined;
}
const viewType = type ?? sourceView.type;
const result = await performViewAPICreate(
{
input: {
id: id ?? v4(),
name: name ?? sourceView.name,
icon: icon ?? sourceView.icon,
key: null,
kanbanAggregateOperation: shouldCopyFiltersAndSortsAndAggregate
? sourceView.kanbanAggregateOperation
: undefined,
kanbanAggregateOperationFieldMetadataId:
shouldCopyFiltersAndSortsAndAggregate
? sourceView.kanbanAggregateOperationFieldMetadataId
: undefined,
mainGroupByFieldMetadataId: shouldCopyFiltersAndSortsAndAggregate
? sourceView.mainGroupByFieldMetadataId
: mainGroupByFieldMetadataId,
type: convertViewTypeToCore(viewType),
objectMetadataId: sourceView.objectMetadataId,
openRecordIn: convertViewOpenRecordInToCore(
sourceView.openRecordIn,
),
anyFieldFilterValue: anyFieldFilterValue,
calendarLayout:
viewType === ViewType.Calendar
? ViewCalendarLayout.MONTH
: undefined,
calendarFieldMetadataId:
viewType === ViewType.Calendar
? calendarFieldMetadataId
: undefined,
visibility,
},
},
objectMetadataItem.id,
const filterResult = await performViewFilterAPICreate(
createViewFilterInputs,
);
if (result.status === 'failed') {
if (filterResult.status === 'failed') {
return undefined;
}
const newViewId = result.response.data?.createCoreView.id;
await performViewSortAPICreate(viewSortsToCreate, { id: newViewId });
}
if (isUndefinedOrNull(newViewId)) {
throw new Error('Failed to create view');
}
await refreshCoreViewsByObjectMetadataId(objectMetadataItem.id);
const fieldResult = await performViewFieldAPICreate({
inputs: sourceView.viewFields.map(
({ __typename, id: _id, ...viewField }) => ({
...viewField,
id: v4(),
viewId: newViewId,
}),
),
});
if (fieldResult.status === 'failed') {
return undefined;
}
if (shouldCopyFiltersAndSortsAndAggregate === true) {
const viewFilterGroupsToCopy = currentRecordFilterGroups.map(
(recordFilterGroup) =>
mapRecordFilterGroupToViewFilterGroup({
recordFilterGroup,
view: { id: newViewId },
}),
);
const viewFiltersToCopy = currentRecordFilters.map(
mapRecordFilterToViewFilter,
);
const {
duplicatedViewFilterGroups: viewFilterGroupsToCreate,
duplicatedViewFilters: viewFiltersToCreate,
} = duplicateViewFiltersAndViewFilterGroups({
viewFilterGroupsToDuplicate: viewFilterGroupsToCopy,
viewFiltersToDuplicate: viewFiltersToCopy,
});
const viewSortsToCreate = currentRecordSorts
.map((recordSort) => mapRecordSortToViewSort(recordSort, newViewId))
.map((viewSort) => ({
...viewSort,
id: v4(),
}));
await performViewFilterGroupAPICreate(viewFilterGroupsToCreate, {
id: newViewId,
});
const createViewFilterInputs = viewFiltersToCreate.map(
(viewFilter) => ({
input: {
id: viewFilter.id,
fieldMetadataId: viewFilter.fieldMetadataId,
viewId: newViewId,
value: viewFilter.value,
operand: viewFilter.operand,
viewFilterGroupId: viewFilter.viewFilterGroupId,
positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
subFieldName: viewFilter.subFieldName ?? null,
},
}),
);
const filterResult = await performViewFilterAPICreate(
createViewFilterInputs,
);
if (filterResult.status === 'failed') {
return undefined;
}
await performViewSortAPICreate(viewSortsToCreate, { id: newViewId });
}
await refreshCoreViewsByObjectMetadataId(objectMetadataItem.id);
return newViewId;
},
return newViewId;
},
[
currentViewIdCallbackState,
currentViewIdAtom,
performViewAPICreate,
anyFieldFilterValue,
objectMetadataItem,
packages/twenty-front/src/modules/views/hooks/useGetCurrentViewOnly.ts
+2 -2
View File
@@ -1,10 +1,10 @@
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
export const useGetCurrentViewOnly = () => {
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
packages/twenty-front/src/modules/views/hooks/useInitViewBar.ts
+3 -3
View File
@@ -1,14 +1,14 @@
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { availableFieldDefinitionsComponentState } from '@/views/states/availableFieldDefinitionsComponentState';
import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
export const useInitViewBar = (viewBarInstanceId?: string) => {
const setAvailableFieldDefinitions = useSetRecoilComponentState(
const setAvailableFieldDefinitions = useSetRecoilComponentStateV2(
availableFieldDefinitionsComponentState,
viewBarInstanceId,
);
const setViewObjectMetadataId = useSetRecoilComponentState(
const setViewObjectMetadataId = useSetRecoilComponentStateV2(
viewObjectMetadataIdComponentState,
viewBarInstanceId,
);
packages/twenty-front/src/modules/views/hooks/useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown.ts
+83 -81
View File
@@ -12,34 +12,38 @@ import { findDuplicateRecordFilterInNonAdvancedRecordFilters } from '@/object-re
import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
import { useRecoilCallback } from 'recoil';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { getFilterTypeFromFieldType, isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
export const useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown =
() => {
const selectedOperandInDropdownCallbackState =
useRecoilComponentCallbackState(selectedOperandInDropdownComponentState);
useRecoilComponentStateCallbackStateV2(
selectedOperandInDropdownComponentState,
);
const currentRecordFiltersCallbackState = useRecoilComponentCallbackState(
currentRecordFiltersComponentState,
);
const currentRecordFiltersCallbackState =
useRecoilComponentStateCallbackStateV2(
currentRecordFiltersComponentState,
);
const objectFilterDropdownCurrentRecordFilterCallbackState =
useRecoilComponentCallbackState(
useRecoilComponentStateCallbackStateV2(
objectFilterDropdownCurrentRecordFilterComponentState,
);
const fieldMetadataItemUsedInDropdownCallbackState =
useRecoilComponentCallbackState(
useRecoilComponentStateCallbackStateV2(
fieldMetadataItemIdUsedInDropdownComponentState,
);
const objectFilterDropdownFilterIsSelectedCallbackState =
useRecoilComponentCallbackState(
useRecoilComponentStateCallbackStateV2(
objectFilterDropdownFilterIsSelectedComponentState,
);
@@ -49,93 +53,91 @@ export const useInitializeFilterOnFieldMetadataItemFromViewBarFilterDropdown =
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
const { getInitialFilterValue } = useGetInitialFilterValue();
const store = useStore();
const initializeFilterOnFieldMetataItemFromViewBarFilterDropdown =
useRecoilCallback(
({ set, snapshot }) =>
(fieldMetadataItem: FieldMetadataItem) => {
set(
fieldMetadataItemUsedInDropdownCallbackState,
fieldMetadataItem.id,
);
useCallback(
(fieldMetadataItem: FieldMetadataItem) => {
store.set(
fieldMetadataItemUsedInDropdownCallbackState,
fieldMetadataItem.id,
);
const currentRecordFilters = snapshot
.getLoadable(currentRecordFiltersCallbackState)
.getValue();
const currentRecordFilters = store.get(
currentRecordFiltersCallbackState,
);
const filterType = getFilterTypeFromFieldType(
fieldMetadataItem.type,
);
const filterType = getFilterTypeFromFieldType(fieldMetadataItem.type);
if (filterType === 'RELATION' || filterType === 'SELECT') {
pushFocusItemToFocusStack({
focusId: ViewBarFilterDropdownIds.MAIN,
component: {
type: FocusComponentType.DROPDOWN,
instanceId: fieldMetadataItem.id,
},
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
});
}
if (filterType === 'RELATION' || filterType === 'SELECT') {
pushFocusItemToFocusStack({
focusId: ViewBarFilterDropdownIds.MAIN,
component: {
type: FocusComponentType.DROPDOWN,
instanceId: fieldMetadataItem.id,
},
globalHotkeysConfig: {
enableGlobalHotkeysConflictingWithKeyboard: false,
},
});
}
set(objectFilterDropdownFilterIsSelectedCallbackState, true);
store.set(objectFilterDropdownFilterIsSelectedCallbackState, true);
const defaultOperand = getRecordFilterOperands({
filterType,
})[0];
const defaultOperand = getRecordFilterOperands({
filterType,
})[0];
const duplicateFilterInCurrentRecordFilters =
findDuplicateRecordFilterInNonAdvancedRecordFilters({
recordFilters: currentRecordFilters,
fieldMetadataItemId: fieldMetadataItem.id,
});
const duplicateFilterInCurrentRecordFilters =
findDuplicateRecordFilterInNonAdvancedRecordFilters({
recordFilters: currentRecordFilters,
fieldMetadataItemId: fieldMetadataItem.id,
});
const filterIsAlreadyInCurrentRecordFilters = isDefined(
const filterIsAlreadyInCurrentRecordFilters = isDefined(
duplicateFilterInCurrentRecordFilters,
);
if (filterIsAlreadyInCurrentRecordFilters) {
store.set(
objectFilterDropdownCurrentRecordFilterCallbackState,
duplicateFilterInCurrentRecordFilters,
);
if (filterIsAlreadyInCurrentRecordFilters) {
set(
store.set(
selectedOperandInDropdownCallbackState,
duplicateFilterInCurrentRecordFilters.operand,
);
} else {
store.set(selectedOperandInDropdownCallbackState, defaultOperand);
if (filterType === 'DATE' || filterType === 'DATE_TIME') {
const { displayValue, value } = getInitialFilterValue(
filterType,
defaultOperand,
);
const initialDateRecordFilter: RecordFilter = {
id: v4(),
fieldMetadataId: fieldMetadataItem.id,
operand: defaultOperand,
displayValue,
label: fieldMetadataItem.label,
type: filterType,
value,
};
upsertObjectFilterDropdownCurrentFilter(initialDateRecordFilter);
store.set(
objectFilterDropdownCurrentRecordFilterCallbackState,
duplicateFilterInCurrentRecordFilters,
initialDateRecordFilter,
);
set(
selectedOperandInDropdownCallbackState,
duplicateFilterInCurrentRecordFilters.operand,
);
} else {
set(selectedOperandInDropdownCallbackState, defaultOperand);
if (filterType === 'DATE' || filterType === 'DATE_TIME') {
const { displayValue, value } = getInitialFilterValue(
filterType,
defaultOperand,
);
const initialDateRecordFilter: RecordFilter = {
id: v4(),
fieldMetadataId: fieldMetadataItem.id,
operand: defaultOperand,
displayValue,
label: fieldMetadataItem.label,
type: filterType,
value,
};
upsertObjectFilterDropdownCurrentFilter(
initialDateRecordFilter,
);
set(
objectFilterDropdownCurrentRecordFilterCallbackState,
initialDateRecordFilter,
);
}
}
},
}
},
[
store,
fieldMetadataItemUsedInDropdownCallbackState,
currentRecordFiltersCallbackState,
objectFilterDropdownFilterIsSelectedCallbackState,
packages/twenty-front/src/modules/views/hooks/useIsViewAnyFieldFilterDifferentFromCurrentAnyFieldFilter.ts
+2 -2
View File
@@ -1,12 +1,12 @@
import { anyFieldFilterValueComponentState } from '@/object-record/record-filter/states/anyFieldFilterValueComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { isNonEmptyString } from '@sniptt/guards';
import { compareNonEmptyStrings } from '~/utils/compareNonEmptyStrings';
export const useIsViewAnyFieldFilterDifferentFromCurrentAnyFieldFilter = () => {
const { currentView } = useGetCurrentViewOnly();
const anyFieldFilterValue = useRecoilComponentValue(
const anyFieldFilterValue = useRecoilComponentValueV2(
anyFieldFilterValueComponentState,
);
packages/twenty-front/src/modules/views/hooks/useOpenAnyFieldSearchFilterFromViewBar.ts
+5 -5
View File
@@ -2,24 +2,24 @@ import { objectFilterDropdownAnyFieldSearchIsSelectedComponentState } from '@/ob
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
import { anyFieldFilterValueComponentState } from '@/object-record/record-filter/states/anyFieldFilterValueComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
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 { t } from '@lingui/core/macro';
import { isNonEmptyString } from '@sniptt/guards';
export const useOpenAnyFieldSearchFilterFromViewBar = () => {
const setAnyFieldFilterValue = useSetRecoilComponentState(
const setAnyFieldFilterValue = useSetRecoilComponentStateV2(
anyFieldFilterValueComponentState,
);
const { objectMetadataItem } = useRecordIndexContextOrThrow();
const setObjectFilterDropdownAnyFieldSearchIsSelectedComponentState =
useSetRecoilComponentState(
useSetRecoilComponentStateV2(
objectFilterDropdownAnyFieldSearchIsSelectedComponentState,
);
const objectFilterDropdownSearchInput = useRecoilComponentValue(
const objectFilterDropdownSearchInput = useRecoilComponentValueV2(
objectFilterDropdownSearchInputComponentState,
);
packages/twenty-front/src/modules/views/hooks/useOpenCreateViewDropown.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
import { type View } from '@/views/types/View';
import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
@@ -8,7 +8,7 @@ import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/sta
import { isDefined } from 'twenty-shared/utils';
export const useOpenCreateViewDropdown = (viewBardId?: string) => {
const setViewPickerReferenceViewId = useSetRecoilComponentState(
const setViewPickerReferenceViewId = useSetRecoilComponentStateV2(
viewPickerReferenceViewIdComponentState,
viewBardId,
);
packages/twenty-front/src/modules/views/hooks/useQueryVariablesFromParentView.ts
+2 -2
View File
@@ -3,7 +3,7 @@ import { contextStoreRecordShowParentViewComponentState } from '@/context-store/
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useFilterValueDependencies } from '@/object-record/record-filter/hooks/useFilterValueDependencies';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { getQueryVariablesFromFiltersAndSorts } from '@/views/utils/getQueryVariablesFromFiltersAndSorts';
export const useQueryVariablesFromParentView = ({
@@ -13,7 +13,7 @@ export const useQueryVariablesFromParentView = ({
}) => {
const { objectMetadataItems } = useObjectMetadataItems();
const recordShowParentView = useRecoilComponentValue(
const recordShowParentView = useRecoilComponentValueV2(
contextStoreRecordShowParentViewComponentState,
MAIN_CONTEXT_STORE_INSTANCE_ID,
);
packages/twenty-front/src/modules/views/hooks/useRefreshCoreViewsByObjectMetadataId.ts
+125 -132
View File
@@ -11,7 +11,7 @@ import { getFilterableFields } from '@/views/utils/getFilterableFields';
import { mapViewFieldToRecordField } from '@/views/utils/mapViewFieldToRecordField';
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
import { useRecoilCallback } from 'recoil';
import { useCallback } from 'react';
import { isDefined, removePropertiesFromRecord } from 'twenty-shared/utils';
import { useFindManyCoreViewsLazyQuery } from '~/generated-metadata/graphql';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@@ -19,142 +19,135 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
export const useRefreshCoreViewsByObjectMetadataId = () => {
const [findManyCoreViewsLazy] = useFindManyCoreViewsLazyQuery();
const refreshCoreViewsByObjectMetadataId = useRecoilCallback(
({ set }) =>
async (objectMetadataId: string) => {
const result = await findManyCoreViewsLazy({
variables: {
objectMetadataId,
},
fetchPolicy: 'network-only',
});
const refreshCoreViewsByObjectMetadataId = useCallback(
async (objectMetadataId: string) => {
const result = await findManyCoreViewsLazy({
variables: {
objectMetadataId,
},
fetchPolicy: 'network-only',
});
if (!isDefined(result.data?.getCoreViews)) {
return;
if (!isDefined(result.data?.getCoreViews)) {
return;
}
const objectMetadataItems = jotaiStore.get(objectMetadataItemsState.atom);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) => objectMetadataItem.id === objectMetadataId,
);
if (!isDefined(objectMetadataItem)) {
return;
}
const coreViewsForObjectMetadataId = jotaiStore.get(
coreViewsByObjectMetadataIdFamilySelector.selectorFamily(
objectMetadataId,
),
);
const coreViewsFromResult = result.data.getCoreViews;
if (isDeeplyEqual(coreViewsForObjectMetadataId, coreViewsFromResult)) {
return;
}
jotaiStore.set(
coreViewsByObjectMetadataIdFamilySelector.selectorFamily(
objectMetadataId,
),
coreViewsFromResult,
);
for (const coreView of coreViewsFromResult) {
const existingView = coreViewsForObjectMetadataId.find(
(coreViewForObjectMetadata) =>
coreViewForObjectMetadata.id === coreView.id,
);
if (!isDefined(existingView)) {
continue;
}
const objectMetadataItems = jotaiStore.get(
objectMetadataItemsState.atom,
);
const objectMetadataItem = objectMetadataItems.find(
(objectMetadataItem) => objectMetadataItem.id === objectMetadataId,
);
if (!isDefined(objectMetadataItem)) {
return;
}
const coreViewsForObjectMetadataId = jotaiStore.get(
coreViewsByObjectMetadataIdFamilySelector.selectorFamily(
objectMetadataId,
),
);
const coreViewsFromResult = result.data.getCoreViews;
if (isDeeplyEqual(coreViewsForObjectMetadataId, coreViewsFromResult)) {
return;
}
jotaiStore.set(
coreViewsByObjectMetadataIdFamilySelector.selectorFamily(
objectMetadataId,
),
coreViewsFromResult,
);
for (const coreView of coreViewsFromResult) {
const existingView = coreViewsForObjectMetadataId.find(
(coreViewForObjectMetadata) =>
coreViewForObjectMetadata.id === coreView.id,
if (
!isDeeplyEqual(
coreView.viewFields.map((viewField) =>
removePropertiesFromRecord(viewField, ['updatedAt', 'createdAt']),
),
existingView.viewFields,
)
) {
const view = convertCoreViewToView(coreView);
jotaiStore.set(
currentRecordFieldsComponentState.atomFamily({
instanceId: getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
view.id,
),
}),
view.viewFields
.filter(isDefined)
.map((viewField) => mapViewFieldToRecordField(viewField)),
);
if (!isDefined(existingView)) {
continue;
}
if (
!isDeeplyEqual(
coreView.viewFields.map((viewField) =>
removePropertiesFromRecord(viewField, [
'updatedAt',
'createdAt',
]),
),
existingView.viewFields,
)
) {
const view = convertCoreViewToView(coreView);
set(
currentRecordFieldsComponentState.atomFamily({
instanceId: getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
view.id,
),
}),
view.viewFields
.filter(isDefined)
.map((viewField) => mapViewFieldToRecordField(viewField)),
);
}
if (
!isDeeplyEqual(
coreView.viewFilters.map((viewFilter) =>
removePropertiesFromRecord(viewFilter, [
'createdAt',
'updatedAt',
]),
),
existingView.viewFilters,
)
) {
const view = convertCoreViewToView(coreView);
set(
currentRecordFiltersComponentState.atomFamily({
instanceId: getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
view.id,
),
}),
mapViewFiltersToFilters(
view.viewFilters,
getFilterableFields(objectMetadataItem),
),
);
}
if (!isDeeplyEqual(coreView.viewSorts, existingView.viewSorts)) {
const view = convertCoreViewToView(coreView);
set(
currentRecordSortsComponentState.atomFamily({
instanceId: getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
view.id,
),
}),
view.viewSorts,
);
}
if (
coreView.shouldHideEmptyGroups !==
existingView.shouldHideEmptyGroups
) {
const view = convertCoreViewToView(coreView);
set(
recordIndexShouldHideEmptyRecordGroupsComponentState.atomFamily({
instanceId: getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
view.id,
),
}),
view.shouldHideEmptyGroups,
);
}
}
},
if (
!isDeeplyEqual(
coreView.viewFilters.map((viewFilter) =>
removePropertiesFromRecord(viewFilter, [
'createdAt',
'updatedAt',
]),
),
existingView.viewFilters,
)
) {
const view = convertCoreViewToView(coreView);
jotaiStore.set(
currentRecordFiltersComponentState.atomFamily({
instanceId: getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
view.id,
),
}),
mapViewFiltersToFilters(
view.viewFilters,
getFilterableFields(objectMetadataItem),
),
);
}
if (!isDeeplyEqual(coreView.viewSorts, existingView.viewSorts)) {
const view = convertCoreViewToView(coreView);
jotaiStore.set(
currentRecordSortsComponentState.atomFamily({
instanceId: getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
view.id,
),
}),
view.viewSorts,
);
}
if (
coreView.shouldHideEmptyGroups !== existingView.shouldHideEmptyGroups
) {
const view = convertCoreViewToView(coreView);
jotaiStore.set(
recordIndexShouldHideEmptyRecordGroupsComponentState.atomFamily({
instanceId: getRecordIndexIdFromObjectNamePluralAndViewId(
objectMetadataItem.namePlural,
view.id,
),
}),
view.shouldHideEmptyGroups,
);
}
}
},
[findManyCoreViewsLazy],
);
packages/twenty-front/src/modules/views/hooks/useSaveAnyFieldFilterToView.ts
+30 -31
View File
@@ -1,10 +1,11 @@
import { anyFieldFilterValueComponentState } from '@/object-record/record-filter/states/anyFieldFilterValueComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { usePerformViewAPIUpdate } from '@/views/hooks/internal/usePerformViewAPIUpdate';
import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import { convertUpdateViewInputToCore } from '@/views/utils/convertUpdateViewInputToCore';
import { useRecoilCallback } from 'recoil';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useSaveAnyFieldFilterToView = () => {
@@ -13,40 +14,38 @@ export const useSaveAnyFieldFilterToView = () => {
const { currentView } = useGetCurrentViewOnly();
const anyFieldFilterValueCallbackState = useRecoilComponentCallbackState(
anyFieldFilterValueComponentState,
);
const anyFieldFilterValueCallbackState =
useRecoilComponentStateCallbackStateV2(anyFieldFilterValueComponentState);
const saveAnyFieldFilterToView = useRecoilCallback(
({ snapshot }) =>
async () => {
if (!canPersistChanges || !isDefined(currentView)) {
return;
}
const store = useStore();
const currentViewAnyFieldFilterValue = currentView.anyFieldFilterValue;
const saveAnyFieldFilterToView = useCallback(async () => {
if (!canPersistChanges || !isDefined(currentView)) {
return;
}
const currentAnyFieldFilterValue = snapshot
.getLoadable(anyFieldFilterValueCallbackState)
.getValue();
const currentViewAnyFieldFilterValue = currentView.anyFieldFilterValue;
if (currentAnyFieldFilterValue !== currentViewAnyFieldFilterValue) {
await performViewAPIUpdate({
id: currentView.id,
input: convertUpdateViewInputToCore({
...currentView,
anyFieldFilterValue: currentAnyFieldFilterValue,
}),
});
}
},
[
canPersistChanges,
performViewAPIUpdate,
const currentAnyFieldFilterValue = store.get(
anyFieldFilterValueCallbackState,
currentView,
],
);
);
if (currentAnyFieldFilterValue !== currentViewAnyFieldFilterValue) {
await performViewAPIUpdate({
id: currentView.id,
input: convertUpdateViewInputToCore({
...currentView,
anyFieldFilterValue: currentAnyFieldFilterValue,
}),
});
}
}, [
store,
canPersistChanges,
performViewAPIUpdate,
anyFieldFilterValueCallbackState,
currentView,
]);
return {
saveAnyFieldFilterToView,
packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewFields.ts
+95 -94
View File
@@ -1,7 +1,8 @@
import { useRecoilCallback } from 'recoil';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { usePerformViewFieldAPIPersist } from '@/views/hooks/internal/usePerformViewFieldAPIPersist';
import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
@@ -20,115 +21,115 @@ export const useSaveCurrentViewFields = () => {
const { getViewFromPrefetchState } = useGetViewFromPrefetchState();
const currentViewIdCallbackState = useRecoilComponentCallbackState(
const currentViewIdCallbackState = useRecoilComponentStateCallbackStateV2(
contextStoreCurrentViewIdComponentState,
);
const saveViewFields = useRecoilCallback(
({ snapshot }) =>
async (viewFieldsToSave: Omit<ViewField, 'definition'>[]) => {
if (!canPersistChanges) {
return;
}
const store = useStore();
const currentViewId = snapshot
.getLoadable(currentViewIdCallbackState)
.getValue();
const saveViewFields = useCallback(
async (viewFieldsToSave: Omit<ViewField, 'definition'>[]) => {
if (!canPersistChanges) {
return;
}
if (!currentViewId) {
return;
}
const currentViewId = store.get(currentViewIdCallbackState);
const view = getViewFromPrefetchState(currentViewId);
if (!currentViewId) {
return;
}
if (isUndefinedOrNull(view)) {
return;
}
const view = getViewFromPrefetchState(currentViewId);
const currentViewFields = view.viewFields;
if (isUndefinedOrNull(view)) {
return;
}
const { viewFieldsToCreate, viewFieldsToUpdate } =
viewFieldsToSave.reduce<{
viewFieldsToCreate: CreateViewFieldInput[];
viewFieldsToUpdate: UpdateCoreViewFieldMutationVariables[];
}>(
(
{ viewFieldsToCreate, viewFieldsToUpdate },
{ __typename, ...viewFieldToCreateOrUpdate },
) => {
const createViewFieldInput: CreateViewFieldInput = {
...viewFieldToCreateOrUpdate,
viewId: currentViewId,
const currentViewFields = view.viewFields;
const { viewFieldsToCreate, viewFieldsToUpdate } =
viewFieldsToSave.reduce<{
viewFieldsToCreate: CreateViewFieldInput[];
viewFieldsToUpdate: UpdateCoreViewFieldMutationVariables[];
}>(
(
{ viewFieldsToCreate, viewFieldsToUpdate },
{ __typename, ...viewFieldToCreateOrUpdate },
) => {
const createViewFieldInput: CreateViewFieldInput = {
...viewFieldToCreateOrUpdate,
viewId: currentViewId,
};
const existingField = currentViewFields.find(
(currentViewField) =>
currentViewField.fieldMetadataId ===
createViewFieldInput.fieldMetadataId,
);
if (isUndefinedOrNull(existingField)) {
return {
viewFieldsToCreate: [
...viewFieldsToCreate,
createViewFieldInput,
],
viewFieldsToUpdate,
};
const existingField = currentViewFields.find(
(currentViewField) =>
currentViewField.fieldMetadataId ===
createViewFieldInput.fieldMetadataId,
);
if (isUndefinedOrNull(existingField)) {
return {
viewFieldsToCreate: [
...viewFieldsToCreate,
createViewFieldInput,
],
viewFieldsToUpdate,
};
}
if (
isDeeplyEqual(
{
position: existingField.position,
size: existingField.size,
isVisible: existingField.isVisible,
aggregateOperation: existingField.aggregateOperation,
},
{
position: createViewFieldInput.position,
size: createViewFieldInput.size,
isVisible: createViewFieldInput.isVisible,
aggregateOperation: createViewFieldInput.aggregateOperation,
},
)
) {
return {
viewFieldsToCreate,
viewFieldsToUpdate,
};
}
}
if (
isDeeplyEqual(
{
position: existingField.position,
size: existingField.size,
isVisible: existingField.isVisible,
aggregateOperation: existingField.aggregateOperation,
},
{
position: createViewFieldInput.position,
size: createViewFieldInput.size,
isVisible: createViewFieldInput.isVisible,
aggregateOperation: createViewFieldInput.aggregateOperation,
},
)
) {
return {
viewFieldsToCreate,
viewFieldsToUpdate: [
...viewFieldsToUpdate,
{
input: {
id: existingField.id,
update: {
aggregateOperation:
createViewFieldInput.aggregateOperation,
isVisible: createViewFieldInput.isVisible,
position: createViewFieldInput.position,
size: createViewFieldInput.size,
},
viewFieldsToUpdate,
};
}
return {
viewFieldsToCreate,
viewFieldsToUpdate: [
...viewFieldsToUpdate,
{
input: {
id: existingField.id,
update: {
aggregateOperation:
createViewFieldInput.aggregateOperation,
isVisible: createViewFieldInput.isVisible,
position: createViewFieldInput.position,
size: createViewFieldInput.size,
},
},
],
};
},
{
viewFieldsToUpdate: [],
viewFieldsToCreate: [],
},
);
},
],
};
},
{
viewFieldsToUpdate: [],
viewFieldsToCreate: [],
},
);
await Promise.all([
performViewFieldAPICreate({ inputs: viewFieldsToCreate }),
performViewFieldAPIUpdate(viewFieldsToUpdate),
]);
},
await Promise.all([
performViewFieldAPICreate({ inputs: viewFieldsToCreate }),
performViewFieldAPIUpdate(viewFieldsToUpdate),
]);
},
[
store,
canPersistChanges,
performViewFieldAPICreate,
currentViewIdCallbackState,
packages/twenty-front/src/modules/views/hooks/useSaveCurrentViewGroups.ts
+120 -121
View File
@@ -1,7 +1,8 @@
import { useRecoilCallback } from 'recoil';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { usePerformViewGroupAPIPersist } from '@/views/hooks/internal/usePerformViewGroupAPIPersist';
import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
import { useGetViewFromPrefetchState } from '@/views/hooks/useGetViewFromPrefetchState';
@@ -16,59 +17,125 @@ export const useSaveCurrentViewGroups = () => {
const { getViewFromPrefetchState } = useGetViewFromPrefetchState();
const currentViewIdCallbackState = useRecoilComponentCallbackState(
const currentViewIdCallbackState = useRecoilComponentStateCallbackStateV2(
contextStoreCurrentViewIdComponentState,
);
const saveViewGroup = useRecoilCallback(
({ snapshot }) =>
async (viewGroupToSave: ViewGroup) => {
if (!canPersistChanges) {
return;
}
const store = useStore();
const currentViewId = snapshot
.getLoadable(currentViewIdCallbackState)
.getValue();
const saveViewGroup = useCallback(
async (viewGroupToSave: ViewGroup) => {
if (!canPersistChanges) {
return;
}
if (!currentViewId) {
return;
}
const currentViewId = store.get(currentViewIdCallbackState);
const view = getViewFromPrefetchState(currentViewId);
if (!currentViewId) {
return;
}
if (isUndefinedOrNull(view)) {
return;
}
const view = getViewFromPrefetchState(currentViewId);
const currentViewGroups = view.viewGroups;
if (isUndefinedOrNull(view)) {
return;
}
const existingField = currentViewGroups.find(
(currentViewGroup) =>
currentViewGroup.fieldValue === viewGroupToSave.fieldValue,
);
const currentViewGroups = view.viewGroups;
if (isUndefinedOrNull(existingField)) {
return;
}
const existingField = currentViewGroups.find(
(currentViewGroup) =>
currentViewGroup.fieldValue === viewGroupToSave.fieldValue,
);
if (
isDeeplyEqual(
{
position: existingField.position,
isVisible: existingField.isVisible,
},
{
position: viewGroupToSave.position,
isVisible: viewGroupToSave.isVisible,
},
)
) {
return;
}
if (isUndefinedOrNull(existingField)) {
return;
}
await performViewGroupAPIUpdate([
if (
isDeeplyEqual(
{
position: existingField.position,
isVisible: existingField.isVisible,
},
{
position: viewGroupToSave.position,
isVisible: viewGroupToSave.isVisible,
},
)
) {
return;
}
await performViewGroupAPIUpdate([
{
input: {
id: existingField.id,
update: {
isVisible: viewGroupToSave.isVisible,
position: viewGroupToSave.position,
fieldValue: viewGroupToSave.fieldValue,
},
},
},
]);
},
[
store,
canPersistChanges,
currentViewIdCallbackState,
getViewFromPrefetchState,
performViewGroupAPIUpdate,
],
);
const saveViewGroups = useCallback(
async (viewGroupsToSave: ViewGroup[]) => {
if (!canPersistChanges) {
return;
}
const currentViewId = store.get(currentViewIdCallbackState);
if (!currentViewId) {
return;
}
const view = getViewFromPrefetchState(currentViewId);
if (isUndefinedOrNull(view)) {
return;
}
const currentViewGroups = view.viewGroups;
const viewGroupsToUpdate = viewGroupsToSave
.map((viewGroupToSave) => {
const existingField = currentViewGroups.find(
(currentViewGroup) =>
currentViewGroup.fieldValue === viewGroupToSave.fieldValue,
);
if (isUndefinedOrNull(existingField)) {
return undefined;
}
if (
isDeeplyEqual(
{
position: existingField.position,
isVisible: existingField.isVisible,
},
{
position: viewGroupToSave.position,
isVisible: viewGroupToSave.isVisible,
},
)
) {
return undefined;
}
return {
input: {
id: existingField.id,
update: {
@@ -77,86 +144,18 @@ export const useSaveCurrentViewGroups = () => {
fieldValue: viewGroupToSave.fieldValue,
},
},
},
]);
},
[
canPersistChanges,
currentViewIdCallbackState,
getViewFromPrefetchState,
performViewGroupAPIUpdate,
],
);
const saveViewGroups = useRecoilCallback(
({ snapshot }) =>
async (viewGroupsToSave: ViewGroup[]) => {
if (!canPersistChanges) {
return;
}
const currentViewId = snapshot
.getLoadable(currentViewIdCallbackState)
.getValue();
if (!currentViewId) {
return;
}
const view = getViewFromPrefetchState(currentViewId);
if (isUndefinedOrNull(view)) {
return;
}
const currentViewGroups = view.viewGroups;
const viewGroupsToUpdate = viewGroupsToSave
.map((viewGroupToSave) => {
const existingField = currentViewGroups.find(
(currentViewGroup) =>
currentViewGroup.fieldValue === viewGroupToSave.fieldValue,
);
if (isUndefinedOrNull(existingField)) {
return undefined;
}
if (
isDeeplyEqual(
{
position: existingField.position,
isVisible: existingField.isVisible,
},
{
position: viewGroupToSave.position,
isVisible: viewGroupToSave.isVisible,
},
)
) {
return undefined;
}
return {
input: {
id: existingField.id,
update: {
isVisible: viewGroupToSave.isVisible,
position: viewGroupToSave.position,
fieldValue: viewGroupToSave.fieldValue,
},
},
};
})
.filter(isDefined);
if (!isDefined(view.mainGroupByFieldMetadataId)) {
throw new Error('mainGroupByFieldMetadataId is required');
}
await performViewGroupAPIUpdate(viewGroupsToUpdate);
},
};
})
.filter(isDefined);
if (!isDefined(view.mainGroupByFieldMetadataId)) {
throw new Error('mainGroupByFieldMetadataId is required');
}
await performViewGroupAPIUpdate(viewGroupsToUpdate);
},
[
store,
canPersistChanges,
currentViewIdCallbackState,
getViewFromPrefetchState,
packages/twenty-front/src/modules/views/hooks/useSaveRecordFilterGroupsToViewFilterGroups.ts
+57 -57
View File
@@ -1,6 +1,5 @@
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { usePerformViewFilterGroupAPIPersist } from '@/views/hooks/internal/usePerformViewFilterGroupAPIPersist';
import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@@ -8,7 +7,8 @@ import { getViewFilterGroupsToCreate } from '@/views/utils/getViewFilterGroupsTo
import { getViewFilterGroupsToDelete } from '@/views/utils/getViewFilterGroupsToDelete';
import { getViewFilterGroupsToUpdate } from '@/views/utils/getViewFilterGroupsToUpdate';
import { mapRecordFilterGroupToViewFilterGroup } from '@/views/utils/mapRecordFilterGroupToViewFilterGroup';
import { useRecoilCallback } from 'recoil';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useSaveRecordFilterGroupsToViewFilterGroups = () => {
@@ -22,65 +22,65 @@ export const useSaveRecordFilterGroupsToViewFilterGroups = () => {
const { currentView } = useGetCurrentViewOnly();
const currentRecordFilterGroupsCallbackState =
useRecoilComponentCallbackState(currentRecordFilterGroupsComponentState);
useRecoilComponentStateCallbackStateV2(
currentRecordFilterGroupsComponentState,
);
const saveRecordFilterGroupsToViewFilterGroups = useRecoilCallback(
({ snapshot }) =>
async () => {
if (!canPersistChanges || !isDefined(currentView)) {
return;
}
const store = useStore();
const currentViewFilterGroups = currentView?.viewFilterGroups ?? [];
const saveRecordFilterGroupsToViewFilterGroups = useCallback(async () => {
if (!canPersistChanges || !isDefined(currentView)) {
return;
}
const currentRecordFilterGroups = getSnapshotValue(
snapshot,
currentRecordFilterGroupsCallbackState,
);
const currentViewFilterGroups = currentView?.viewFilterGroups ?? [];
const newViewFilterGroups = currentRecordFilterGroups.map(
(recordFilterGroup) =>
mapRecordFilterGroupToViewFilterGroup({
recordFilterGroup,
view: currentView,
}),
);
const viewFilterGroupsToCreate = getViewFilterGroupsToCreate(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterGroupsToDelete = getViewFilterGroupsToDelete(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterGroupsToUpdate = getViewFilterGroupsToUpdate(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterGroupIdsToDelete = viewFilterGroupsToDelete.map(
(viewFilterGroup) => viewFilterGroup.id,
);
await performViewFilterGroupAPICreate(
viewFilterGroupsToCreate,
currentView,
);
await performViewFilterGroupAPIUpdate(viewFilterGroupsToUpdate);
await performViewFilterGroupAPIDelete(viewFilterGroupIdsToDelete);
},
[
canPersistChanges,
currentView,
const currentRecordFilterGroups = store.get(
currentRecordFilterGroupsCallbackState,
performViewFilterGroupAPICreate,
performViewFilterGroupAPIUpdate,
performViewFilterGroupAPIDelete,
],
);
);
const newViewFilterGroups = currentRecordFilterGroups.map(
(recordFilterGroup) =>
mapRecordFilterGroupToViewFilterGroup({
recordFilterGroup,
view: currentView,
}),
);
const viewFilterGroupsToCreate = getViewFilterGroupsToCreate(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterGroupsToDelete = getViewFilterGroupsToDelete(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterGroupsToUpdate = getViewFilterGroupsToUpdate(
currentViewFilterGroups,
newViewFilterGroups,
);
const viewFilterGroupIdsToDelete = viewFilterGroupsToDelete.map(
(viewFilterGroup) => viewFilterGroup.id,
);
await performViewFilterGroupAPICreate(
viewFilterGroupsToCreate,
currentView,
);
await performViewFilterGroupAPIUpdate(viewFilterGroupsToUpdate);
await performViewFilterGroupAPIDelete(viewFilterGroupIdsToDelete);
}, [
store,
canPersistChanges,
currentView,
currentRecordFilterGroupsCallbackState,
performViewFilterGroupAPICreate,
performViewFilterGroupAPIUpdate,
performViewFilterGroupAPIDelete,
]);
return {
saveRecordFilterGroupsToViewFilterGroups,
packages/twenty-front/src/modules/views/hooks/useSaveRecordFiltersToViewFilters.ts
+87 -98
View File
@@ -1,6 +1,5 @@
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { usePerformViewFilterAPIPersist } from '@/views/hooks/internal/usePerformViewFilterAPIPersist';
import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@@ -8,7 +7,8 @@ import { getViewFiltersToCreate } from '@/views/utils/getViewFiltersToCreate';
import { getViewFiltersToDelete } from '@/views/utils/getViewFiltersToDelete';
import { getViewFiltersToUpdate } from '@/views/utils/getViewFiltersToUpdate';
import { mapRecordFilterToViewFilter } from '@/views/utils/mapRecordFilterToViewFilter';
import { useRecoilCallback } from 'recoil';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useSaveRecordFiltersToViewFilters = () => {
@@ -21,111 +21,100 @@ export const useSaveRecordFiltersToViewFilters = () => {
const { currentView } = useGetCurrentViewOnly();
const currentRecordFiltersCallbackState = useRecoilComponentCallbackState(
currentRecordFiltersComponentState,
);
const currentRecordFiltersCallbackState =
useRecoilComponentStateCallbackStateV2(currentRecordFiltersComponentState);
const saveRecordFiltersToViewFilters = useRecoilCallback(
({ snapshot }) =>
async () => {
if (!canPersistChanges || !isDefined(currentView)) {
return;
}
const store = useStore();
const currentViewFilters = currentView?.viewFilters ?? [];
const saveRecordFiltersToViewFilters = useCallback(async () => {
if (!canPersistChanges || !isDefined(currentView)) {
return;
}
const currentRecordFilters = getSnapshotValue(
snapshot,
currentRecordFiltersCallbackState,
);
const currentViewFilters = currentView?.viewFilters ?? [];
const newViewFilters = currentRecordFilters.map(
mapRecordFilterToViewFilter,
);
const currentRecordFilters = store.get(currentRecordFiltersCallbackState);
const viewFiltersToCreate = getViewFiltersToCreate(
currentViewFilters,
newViewFilters,
);
const newViewFilters = currentRecordFilters.map(
mapRecordFilterToViewFilter,
);
const viewFiltersToDelete = getViewFiltersToDelete(
currentViewFilters,
newViewFilters,
);
const viewFiltersToCreate = getViewFiltersToCreate(
currentViewFilters,
newViewFilters,
);
const viewFiltersToUpdate = getViewFiltersToUpdate(
currentViewFilters,
newViewFilters,
);
const viewFiltersToDelete = getViewFiltersToDelete(
currentViewFilters,
newViewFilters,
);
const createViewFilterInputs = viewFiltersToCreate.map(
(viewFilter) => ({
input: {
id: viewFilter.id,
fieldMetadataId: viewFilter.fieldMetadataId,
viewId: currentView.id,
value: viewFilter.value,
operand: viewFilter.operand,
viewFilterGroupId: viewFilter.viewFilterGroupId,
positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
subFieldName: viewFilter.subFieldName ?? null,
},
}),
);
const viewFiltersToUpdate = getViewFiltersToUpdate(
currentViewFilters,
newViewFilters,
);
const updateViewFilterInputs = viewFiltersToUpdate.map(
(viewFilter) => ({
input: {
id: viewFilter.id,
update: {
value: viewFilter.value,
operand: viewFilter.operand,
positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
viewFilterGroupId: viewFilter.viewFilterGroupId,
subFieldName: viewFilter.subFieldName ?? null,
},
},
}),
);
const deleteViewFilterInputs = viewFiltersToDelete.map(
(viewFilter) => ({
input: {
id: viewFilter.id,
},
}),
);
const createResult = await performViewFilterAPICreate(
createViewFilterInputs,
);
if (createResult.status === 'failed') {
return;
}
const updateResult = await performViewFilterAPIUpdate(
updateViewFilterInputs,
);
if (updateResult.status === 'failed') {
return;
}
const deleteResult = await performViewFilterAPIDelete(
deleteViewFilterInputs,
);
if (deleteResult.status === 'failed') {
return;
}
const createViewFilterInputs = viewFiltersToCreate.map((viewFilter) => ({
input: {
id: viewFilter.id,
fieldMetadataId: viewFilter.fieldMetadataId,
viewId: currentView.id,
value: viewFilter.value,
operand: viewFilter.operand,
viewFilterGroupId: viewFilter.viewFilterGroupId,
positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
subFieldName: viewFilter.subFieldName ?? null,
},
[
canPersistChanges,
currentView,
currentRecordFiltersCallbackState,
performViewFilterAPICreate,
performViewFilterAPIUpdate,
performViewFilterAPIDelete,
],
);
}));
const updateViewFilterInputs = viewFiltersToUpdate.map((viewFilter) => ({
input: {
id: viewFilter.id,
update: {
value: viewFilter.value,
operand: viewFilter.operand,
positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
viewFilterGroupId: viewFilter.viewFilterGroupId,
subFieldName: viewFilter.subFieldName ?? null,
},
},
}));
const deleteViewFilterInputs = viewFiltersToDelete.map((viewFilter) => ({
input: {
id: viewFilter.id,
},
}));
const createResult = await performViewFilterAPICreate(
createViewFilterInputs,
);
if (createResult.status === 'failed') {
return;
}
const updateResult = await performViewFilterAPIUpdate(
updateViewFilterInputs,
);
if (updateResult.status === 'failed') {
return;
}
const deleteResult = await performViewFilterAPIDelete(
deleteViewFilterInputs,
);
if (deleteResult.status === 'failed') {
return;
}
}, [
store,
canPersistChanges,
currentView,
currentRecordFiltersCallbackState,
performViewFilterAPICreate,
performViewFilterAPIUpdate,
performViewFilterAPIDelete,
]);
return {
saveRecordFiltersToViewFilters,
packages/twenty-front/src/modules/views/hooks/useSaveRecordSortsToViewSorts.ts
+40 -45
View File
@@ -1,6 +1,5 @@
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { usePerformViewSortAPIPersist } from '@/views/hooks/internal/usePerformViewSortAPIPersist';
import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@@ -8,7 +7,8 @@ import { getViewSortsToCreate } from '@/views/utils/getViewSortsToCreate';
import { getViewSortsToDelete } from '@/views/utils/getViewSortsToDelete';
import { getViewSortsToUpdate } from '@/views/utils/getViewSortsToUpdate';
import { mapRecordSortToViewSort } from '@/views/utils/mapRecordSortToViewSort';
import { useRecoilCallback } from 'recoil';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useSaveRecordSortsToViewSorts = () => {
@@ -21,56 +21,51 @@ export const useSaveRecordSortsToViewSorts = () => {
const { currentView } = useGetCurrentViewOnly();
const currentRecordSortsCallbackState = useRecoilComponentCallbackState(
currentRecordSortsComponentState,
);
const currentRecordSortsCallbackState =
useRecoilComponentStateCallbackStateV2(currentRecordSortsComponentState);
const saveRecordSortsToViewSorts = useRecoilCallback(
({ snapshot }) =>
async () => {
if (!canPersistChanges || !isDefined(currentView)) {
return;
}
const store = useStore();
const currentViewSorts = currentView?.viewSorts ?? [];
const saveRecordSortsToViewSorts = useCallback(async () => {
if (!canPersistChanges || !isDefined(currentView)) {
return;
}
const currentRecordSorts = getSnapshotValue(
snapshot,
currentRecordSortsCallbackState,
);
const currentViewSorts = currentView?.viewSorts ?? [];
const newViewSorts = currentRecordSorts.map((recordSort) =>
mapRecordSortToViewSort(recordSort, currentView.id),
);
const currentRecordSorts = store.get(currentRecordSortsCallbackState);
const viewSortsToCreate = getViewSortsToCreate(
currentViewSorts,
newViewSorts,
);
const newViewSorts = currentRecordSorts.map((recordSort) =>
mapRecordSortToViewSort(recordSort, currentView.id),
);
const viewSortsToDelete = getViewSortsToDelete(
currentViewSorts,
newViewSorts,
);
const viewSortsToCreate = getViewSortsToCreate(
currentViewSorts,
newViewSorts,
);
const viewSortsToUpdate = getViewSortsToUpdate(
currentViewSorts,
newViewSorts,
);
const viewSortsToDelete = getViewSortsToDelete(
currentViewSorts,
newViewSorts,
);
await performViewSortAPICreate(viewSortsToCreate, currentView);
await performViewSortAPIUpdate(viewSortsToUpdate);
await performViewSortAPIDelete(viewSortsToDelete);
},
[
canPersistChanges,
currentView,
currentRecordSortsCallbackState,
performViewSortAPICreate,
performViewSortAPIUpdate,
performViewSortAPIDelete,
],
);
const viewSortsToUpdate = getViewSortsToUpdate(
currentViewSorts,
newViewSorts,
);
await performViewSortAPICreate(viewSortsToCreate, currentView);
await performViewSortAPIUpdate(viewSortsToUpdate);
await performViewSortAPIDelete(viewSortsToDelete);
}, [
store,
canPersistChanges,
currentView,
currentRecordSortsCallbackState,
performViewSortAPICreate,
performViewSortAPIUpdate,
performViewSortAPIDelete,
]);
return {
saveRecordSortsToViewSorts,
packages/twenty-front/src/modules/views/hooks/useSetEditableFilterChipDropdownStates.ts
+39 -38
View File
@@ -5,61 +5,62 @@ import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object
import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext';
import { type RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { getEditableChipObjectFilterDropdownComponentInstanceId } from '@/views/editable-chip/utils/getEditableChipObjectFilterDropdownComponentInstanceId';
import { useRecoilCallback } from 'recoil';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useSetEditableFilterChipDropdownStates = () => {
const { filterableFieldMetadataItems } =
useFilterableFieldMetadataItemsInRecordIndexContext();
const setEditableFilterChipDropdownStates = useRecoilCallback(
({ set }) =>
(recordFilter: RecordFilter) => {
const fieldMetadataItem = filterableFieldMetadataItems.find(
(fieldMetadataItem) =>
fieldMetadataItem.id === recordFilter.fieldMetadataId,
);
const store = useStore();
if (isDefined(fieldMetadataItem)) {
set(
fieldMetadataItemIdUsedInDropdownComponentState.atomFamily({
instanceId:
getEditableChipObjectFilterDropdownComponentInstanceId({
recordFilterId: recordFilter.id,
}),
}),
fieldMetadataItem.id,
);
}
const setEditableFilterChipDropdownStates = useCallback(
(recordFilter: RecordFilter) => {
const fieldMetadataItem = filterableFieldMetadataItems.find(
(fieldMetadataItem) =>
fieldMetadataItem.id === recordFilter.fieldMetadataId,
);
set(
selectedOperandInDropdownComponentState.atomFamily({
if (isDefined(fieldMetadataItem)) {
store.set(
fieldMetadataItemIdUsedInDropdownComponentState.atomFamily({
instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({
recordFilterId: recordFilter.id,
}),
}),
recordFilter.operand,
fieldMetadataItem.id,
);
}
set(
objectFilterDropdownCurrentRecordFilterComponentState.atomFamily({
instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({
recordFilterId: recordFilter.id,
}),
store.set(
selectedOperandInDropdownComponentState.atomFamily({
instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({
recordFilterId: recordFilter.id,
}),
recordFilter,
);
}),
recordFilter.operand,
);
set(
subFieldNameUsedInDropdownComponentState.atomFamily({
instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({
recordFilterId: recordFilter.id,
}),
store.set(
objectFilterDropdownCurrentRecordFilterComponentState.atomFamily({
instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({
recordFilterId: recordFilter.id,
}),
recordFilter.subFieldName,
);
},
[filterableFieldMetadataItems],
}),
recordFilter,
);
store.set(
subFieldNameUsedInDropdownComponentState.atomFamily({
instanceId: getEditableChipObjectFilterDropdownComponentInstanceId({
recordFilterId: recordFilter.id,
}),
}),
recordFilter.subFieldName,
);
},
[store, filterableFieldMetadataItems],
);
return {
packages/twenty-front/src/modules/views/hooks/useUpdateCurrentView.ts
+51 -56
View File
@@ -1,11 +1,11 @@
import { useStore } from 'jotai';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { useLoadRecordIndexStates } from '@/object-record/record-index/hooks/useLoadRecordIndexStates';
import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
import { useRefreshCoreViewsByObjectMetadataId } from '@/views/hooks/useRefreshCoreViewsByObjectMetadataId';
import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
@@ -14,19 +14,19 @@ import { type View } from '@/views/types/View';
import { type ViewGroup } from '@/views/types/ViewGroup';
import { type ViewType } from '@/views/types/ViewType';
import { convertUpdateViewInputToCore } from '@/views/utils/convertUpdateViewInputToCore';
import { useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { v4 } from 'uuid';
import { useUpdateCoreViewMutation } from '~/generated-metadata/graphql';
export const useUpdateCurrentView = () => {
const { canPersistChanges } = useCanPersistViewChanges();
const currentViewIdCallbackState = useRecoilComponentCallbackState(
const currentViewIdCallbackState = useRecoilComponentStateCallbackStateV2(
contextStoreCurrentViewIdComponentState,
);
const { objectMetadataItem } = useContextStoreObjectMetadataItemOrThrow();
const { loadRecordIndexStates } = useLoadRecordIndexStates();
const setRecordIndexViewType = useSetRecoilState(recordIndexViewTypeState);
const setRecordIndexViewType = useSetRecoilStateV2(recordIndexViewTypeState);
const store = useStore();
@@ -91,66 +91,61 @@ export const useUpdateCurrentView = () => {
};
}, [objectMetadataItem.fields]);
const updateCurrentView = useRecoilCallback(
({ snapshot }) =>
async (view: Partial<GraphQLView> & { type?: ViewType }) => {
if (!canPersistChanges) {
return;
}
const updateCurrentView = useCallback(
async (view: Partial<GraphQLView> & { type?: ViewType }) => {
if (!canPersistChanges) {
return;
}
const currentViewId = snapshot
.getLoadable(currentViewIdCallbackState)
.getValue();
const currentViewId = store.get(currentViewIdCallbackState);
const currentView = store.get(
coreViewFromViewIdFamilySelector.selectorFamily({
viewId: currentViewId ?? '',
}),
);
const currentView = store.get(
coreViewFromViewIdFamilySelector.selectorFamily({
viewId: currentViewId ?? '',
}),
);
if (!isDefined(currentView)) {
return;
}
if (!isDefined(currentView)) {
return;
}
if (isDefined(currentViewId)) {
const input = convertUpdateViewInputToCore(view);
if (isDefined(currentViewId)) {
const input = convertUpdateViewInputToCore(view);
await updateOneCoreView({
variables: {
id: currentViewId,
input,
},
await updateOneCoreView({
variables: {
id: currentViewId,
input,
},
});
if (
input.mainGroupByFieldMetadataId !== undefined &&
currentView.mainGroupByFieldMetadataId !==
input.mainGroupByFieldMetadataId
) {
const { viewGroupsToCreate } = getViewGroupsToCreateAtViewUpdate({
existingView: currentView,
newMainGroupByFieldMetadataId: input.mainGroupByFieldMetadataId,
});
if (
input.mainGroupByFieldMetadataId !== undefined &&
currentView.mainGroupByFieldMetadataId !==
input.mainGroupByFieldMetadataId
) {
const { viewGroupsToCreate } = getViewGroupsToCreateAtViewUpdate({
existingView: currentView,
newMainGroupByFieldMetadataId: input.mainGroupByFieldMetadataId,
});
loadRecordIndexStates(
{
...currentView,
mainGroupByFieldMetadataId: input.mainGroupByFieldMetadataId,
viewGroups: viewGroupsToCreate ?? [],
},
objectMetadataItem,
);
}
if (isDefined(view.type)) {
setRecordIndexViewType(view.type);
}
await refreshCoreViewsByObjectMetadataId(
currentView.objectMetadataId,
loadRecordIndexStates(
{
...currentView,
mainGroupByFieldMetadataId: input.mainGroupByFieldMetadataId,
viewGroups: viewGroupsToCreate ?? [],
},
objectMetadataItem,
);
}
},
if (isDefined(view.type)) {
setRecordIndexViewType(view.type);
}
await refreshCoreViewsByObjectMetadataId(currentView.objectMetadataId);
}
},
[
canPersistChanges,
currentViewIdCallbackState,
packages/twenty-front/src/modules/views/hooks/useUpdateViewAggregate.ts
+2 -2
View File
@@ -3,7 +3,7 @@ import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataI
import { useLoadRecordIndexStates } from '@/object-record/record-index/hooks/useLoadRecordIndexStates';
import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
import { convertExtendedAggregateOperationToAggregateOperation } from '@/object-record/utils/convertExtendedAggregateOperationToAggregateOperation';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
import { usePerformViewAPIUpdate } from '@/views/hooks/internal/usePerformViewAPIUpdate';
import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
@@ -18,7 +18,7 @@ import { type CoreView } from '~/generated-metadata/graphql';
export const useUpdateViewAggregate = () => {
const { canPersistChanges } = useCanPersistViewChanges();
const currentViewId = useRecoilComponentValue(
const currentViewId = useRecoilComponentValueV2(
contextStoreCurrentViewIdComponentState,
);
const { performViewAPIUpdate } = usePerformViewAPIUpdate();