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

Refactor recoil scope states (#3097)

Browse Source 
* Refactor recoil scope states

* Complete refactoring

* Fix
This commit is contained in:
Charles Bochet
2023-12-21 14:25:18 +01:00
committed by GitHub
parent b416b0f98f
commit e9bc13b5fa
30 changed files with 347 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
View File

@ -1,3 +1,5 @@
import { useRecoilValue } from 'recoil';
import { IconArrowUpRight } from '@/ui/display/icon';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@ -30,7 +32,8 @@ export const CommandMenuItem = ({
Icon = IconArrowUpRight;
}
const { isSelectedItemId } = useSelectableList({ itemId: id });
const { isSelectedItemIdFamilyState } = useSelectableList();
const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(id));
return (
<MenuItemCommand

4
packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
View File

@ -15,9 +15,7 @@ export const useCommandMenu = () => {
const navigate = useNavigate();
const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
const setCommands = useSetRecoilState(commandMenuCommandsState);
const { resetSelectedItem } = useSelectableList({
selectableListId: 'command-menu-list',
});
const { resetSelectedItem } = useSelectableList('command-menu-list');
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,

26
packages/twenty-front/src/modules/object-record/record-board/utils/getRecordBoardScopedStates.ts
View File

@ -14,69 +14,69 @@ import { hiddenRecordBoardCardFieldsScopedSelector } from '@/object-record/recor
import { recordBoardCardFieldsByKeyScopedSelector } from '@/object-record/record-board/states/selectors/recordBoardCardFieldsByKeyScopedSelector';
import { selectedRecordBoardCardIdsScopedSelector } from '@/object-record/record-board/states/selectors/selectedRecordBoardCardIdsScopedSelector';
import { visibleRecordBoardCardFieldsScopedSelector } from '@/object-record/record-board/states/selectors/visibleRecordBoardCardFieldsScopedSelector';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
export const getRecordBoardScopedStates = ({
recordBoardScopeId,
}: {
recordBoardScopeId: string;
}) => {
const activeCardIdsState = getScopedState(
const activeCardIdsState = getScopedStateDeprecated(
activeRecordBoardCardIdsScopedState,
recordBoardScopeId,
);
const availableBoardCardFieldsState = getScopedState(
const availableBoardCardFieldsState = getScopedStateDeprecated(
availableRecordBoardCardFieldsScopedState,
recordBoardScopeId,
);
const boardColumnsState = getScopedState(
const boardColumnsState = getScopedStateDeprecated(
recordBoardColumnsScopedState,
recordBoardScopeId,
);
const isBoardLoadedState = getScopedState(
const isBoardLoadedState = getScopedStateDeprecated(
isRecordBoardLoadedScopedState,
recordBoardScopeId,
);
const isCompactViewEnabledState = getScopedState(
const isCompactViewEnabledState = getScopedStateDeprecated(
isCompactViewEnabledScopedState,
recordBoardScopeId,
);
const savedBoardColumnsState = getScopedState(
const savedBoardColumnsState = getScopedStateDeprecated(
savedRecordBoardColumnsScopedState,
recordBoardScopeId,
);
const boardFiltersState = getScopedState(
const boardFiltersState = getScopedStateDeprecated(
recordBoardFiltersScopedState,
recordBoardScopeId,
);
const boardSortsState = getScopedState(
const boardSortsState = getScopedStateDeprecated(
recordBoardSortsScopedState,
recordBoardScopeId,
);
const savedCompaniesState = getScopedState(
const savedCompaniesState = getScopedStateDeprecated(
savedRecordsScopedState,
recordBoardScopeId,
);
const savedOpportunitiesState = getScopedState(
const savedOpportunitiesState = getScopedStateDeprecated(
savedOpportunitiesScopedState,
recordBoardScopeId,
);
const savedPipelineStepsState = getScopedState(
const savedPipelineStepsState = getScopedStateDeprecated(
savedPipelineStepsScopedState,
recordBoardScopeId,
);
const onFieldsChangeState = getScopedState(
const onFieldsChangeState = getScopedStateDeprecated(
onFieldsChangeScopedState,
recordBoardScopeId,
);

6
packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
View File

@ -6,7 +6,7 @@ import { onColumnsChangeScopedState } from '@/object-record/record-table/states/
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { FieldMetadata } from '../../field/types/FieldMetadata';
@ -63,7 +63,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
const onColumnsChange = useRecoilCallback(
({ snapshot }) =>
(columns: ColumnDefinition<FieldMetadata>[]) => {
const onColumnsChangeState = getScopedState(
const onColumnsChangeState = getScopedStateDeprecated(
onColumnsChangeScopedState,
scopeId,
);
@ -80,7 +80,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
const onEntityCountChange = useRecoilCallback(
({ snapshot }) =>
(count: number) => {
const onEntityCountChangeState = getScopedState(
const onEntityCountChangeState = getScopedStateDeprecated(
onEntityCountChangeScopedState,
scopeId,
);

18
packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopedStates.ts
View File

@ -1,6 +1,6 @@
import { objectMetadataConfigScopedState } from '@/object-record/record-table/states/objectMetadataConfigScopedState';
import { tableLastRowVisibleScopedState } from '@/object-record/record-table/states/tableLastRowVisibleScopedState';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState';
@ -17,27 +17,27 @@ export const getRecordTableScopedStates = ({
}: {
recordTableScopeId: string;
}) => {
const availableTableColumnsState = getScopedState(
const availableTableColumnsState = getScopedStateDeprecated(
availableTableColumnsScopedState,
recordTableScopeId,
);
const tableFiltersState = getScopedState(
const tableFiltersState = getScopedStateDeprecated(
tableFiltersScopedState,
recordTableScopeId,
);
const tableSortsState = getScopedState(
const tableSortsState = getScopedStateDeprecated(
tableSortsScopedState,
recordTableScopeId,
);
const tableColumnsState = getScopedState(
const tableColumnsState = getScopedStateDeprecated(
tableColumnsScopedState,
recordTableScopeId,
);
const objectMetadataConfigState = getScopedState(
const objectMetadataConfigState = getScopedStateDeprecated(
objectMetadataConfigScopedState,
recordTableScopeId,
);
@ -51,17 +51,17 @@ export const getRecordTableScopedStates = ({
const visibleTableColumnsSelector =
visibleTableColumnsScopedSelector(recordTableScopeId);
const onColumnsChangeState = getScopedState(
const onColumnsChangeState = getScopedStateDeprecated(
onColumnsChangeScopedState,
recordTableScopeId,
);
const onEntityCountChangeState = getScopedState(
const onEntityCountChangeState = getScopedStateDeprecated(
onEntityCountChangeScopedState,
recordTableScopeId,
);
const tableLastRowVisibleState = getScopedState(
const tableLastRowVisibleState = getScopedStateDeprecated(
tableLastRowVisibleScopedState,
recordTableScopeId,
);

12
packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx
View File

@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
@ -21,10 +22,13 @@ export const SelectableMenuItemSelect = ({
onEntitySelected,
selectedEntity,
}: SelectableMenuItemSelectProps) => {
const { isSelectedItemId } = useSelectableList({
selectableListId: 'single-entity-select-base-list',
itemId: entity.id,
});
const { isSelectedItemIdFamilyState } = useSelectableList(
'single-entity-select-base-list',
);
const isSelectedItemId = useRecoilValue(
isSelectedItemIdFamilyState(entity.id),
);
return (
<StyledSelectableItem itemId={entity.id} key={entity.id}>

10
packages/twenty-front/src/modules/object-record/relation-picker/utils/getRelationPickerScopedStates.ts
View File

@ -2,29 +2,29 @@ import { identifiersMapperScopedState } from '@/object-record/relation-picker/st
import { relationPickerPreselectedIdScopedState } from '@/object-record/relation-picker/states/relationPickerPreselectedIdScopedState';
import { relationPickerSearchFilterScopedState } from '@/object-record/relation-picker/states/relationPickerSearchFilterScopedState';
import { searchQueryScopedState } from '@/object-record/relation-picker/states/searchQueryScopedState';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
export const getRelationPickerScopedStates = ({
relationPickerScopeId,
}: {
relationPickerScopeId: string;
}) => {
const identifiersMapperState = getScopedState(
const identifiersMapperState = getScopedStateDeprecated(
identifiersMapperScopedState,
relationPickerScopeId,
);
const searchQueryState = getScopedState(
const searchQueryState = getScopedStateDeprecated(
searchQueryScopedState,
relationPickerScopeId,
);
const relationPickerPreselectedIdState = getScopedState(
const relationPickerPreselectedIdState = getScopedStateDeprecated(
relationPickerPreselectedIdScopedState,
relationPickerScopeId,
);
const relationPickerSearchFilterState = getScopedState(
const relationPickerSearchFilterState = getScopedStateDeprecated(
relationPickerSearchFilterScopedState,
relationPickerScopeId,
);

5
packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
View File

@ -1,5 +1,6 @@
import { useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconApps } from '@/ui/display/icon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
@ -60,7 +61,9 @@ const IconPickerIcon = ({
selectedIconKey,
Icon,
}: IconPickerIconProps) => {
const { isSelectedItemId } = useSelectableList({ itemId: iconKey });
const { isSelectedItemIdFamilyState } = useSelectableList();
const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(iconKey));
return (
<StyledLightIconButton

8
packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableItem.tsx
View File

@ -1,7 +1,7 @@
import { ReactNode, useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
export type SelectableItemProps = {
itemId: string;
@ -14,11 +14,9 @@ export const SelectableItem = ({
children,
className,
}: SelectableItemProps) => {
const { isSelectedItemIdSelector } = useSelectableListScopedStates({
itemId: itemId,
});
const { isSelectedItemIdFamilyState } = useSelectableList();
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(itemId));
const scrollRef = useRef<HTMLDivElement>(null);

5
packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableList.tsx
View File

@ -25,9 +25,8 @@ export const SelectableList = ({
}: SelectableListProps) => {
useSelectableListHotKeys(selectableListId, hotkeyScope);
const { setSelectableItemIds, setSelectableListOnEnter } = useSelectableList({
selectableListId,
});
const { setSelectableItemIds, setSelectableListOnEnter } =
useSelectableList(selectableListId);
useEffect(() => {
setSelectableListOnEnter(() => onEnter);

66
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx
View File

@ -1,9 +1,9 @@
import { useRecoilCallback } from 'recoil';
import { Key } from 'ts-key-enum';
import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
type Direction = 'up' | 'down' | 'left' | 'right';
@ -27,17 +27,28 @@ export const useSelectableListHotKeys = (
}
};
const { getSelectableListScopedSnapshotValue } = useSelectableListScopedState(
{
selectableListScopeId: scopeId,
},
);
const handleSelect = useRecoilCallback(
({ snapshot, set }) =>
(direction: Direction) => {
const { selectedItemIdState, selectableItemIdsState } =
getSelectableListScopedStates({
selectableListScopeId: scopeId,
});
const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
const selectableItemIds = getSnapshotValue(
const {
selectedItemIdScopeInjector,
selectableItemIdsScopeInjector,
isSelectedItemIdFamilyScopeInjector,
} = getSelectableListScopeInjectors();
const selectedItemId = getSelectableListScopedSnapshotValue(
snapshot,
selectableItemIdsState,
selectedItemIdScopeInjector,
);
const selectableItemIds = getSelectableListScopedSnapshotValue(
snapshot,
selectableItemIdsScopeInjector,
);
const currentPosition = findPosition(selectableItemIds, selectedItemId);
@ -97,24 +108,19 @@ export const useSelectableListHotKeys = (
if (selectedItemId !== nextId) {
if (nextId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: nextId,
});
set(isSelectedItemIdSelector, true);
set(selectedItemIdState, nextId);
set(isSelectedItemIdFamilyScopeInjector(scopeId, nextId), true);
set(selectedItemIdScopeInjector(scopeId), nextId);
}
if (selectedItemId) {
const { isSelectedItemIdSelector } = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: selectedItemId,
});
set(isSelectedItemIdSelector, false);
set(
isSelectedItemIdFamilyScopeInjector(scopeId, selectedItemId),
false,
);
}
}
},
[scopeId],
[getSelectableListScopedSnapshotValue, scopeId],
);
useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []);
@ -135,25 +141,25 @@ export const useSelectableListHotKeys = (
useRecoilCallback(
({ snapshot }) =>
() => {
const { selectedItemIdState, selectableListOnEnterState } =
getSelectableListScopedStates({
selectableListScopeId: scopeId,
});
const selectedItemId = getSnapshotValue(
const {
selectedItemIdScopeInjector,
selectableListOnEnterScopeInjector,
} = getSelectableListScopeInjectors();
const selectedItemId = getSelectableListScopedSnapshotValue(
snapshot,
selectedItemIdState,
selectedItemIdScopeInjector,
);
const onEnter = getSnapshotValue(
const onEnter = getSelectableListScopedSnapshotValue(
snapshot,
selectableListOnEnterState,
selectableListOnEnterScopeInjector,
);
if (selectedItemId) {
onEnter?.(selectedItemId);
}
},
[scopeId],
[getSelectableListScopedSnapshotValue],
),
hotkeyScope,
[],

31
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState.ts Normal file
View File

@ -0,0 +1,31 @@
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState';
type UseSelectableListScopedStatesProps = {
selectableListScopeId?: string;
};
export const useSelectableListScopedState = ({
selectableListScopeId,
}: UseSelectableListScopedStatesProps) => {
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
selectableListScopeId,
);
const {
getScopedState,
getScopedFamilyState,
getScopedSnapshotValue,
getScopedFamilySnapshotValue,
} = useScopedState(scopeId);
return {
scopeId,
getSelectableListScopedState: getScopedState,
getSelectableListScopedFamilyState: getScopedFamilyState,
getSelectableListScopedSnapshotValue: getScopedSnapshotValue,
getSelectableListScopedFamilySnapshotValue: getScopedFamilySnapshotValue,
};
};

36
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates.ts
View File

@ -1,36 +0,0 @@
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type UseSelectableListScopedStatesProps = {
selectableListScopeId?: string;
itemId?: string;
};
export const useSelectableListScopedStates = (
args?: UseSelectableListScopedStatesProps,
) => {
const { selectableListScopeId, itemId } = args ?? {};
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
selectableListScopeId,
);
const {
selectedItemIdState,
selectableItemIdsState,
isSelectedItemIdSelector,
selectableListOnEnterState,
} = getSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: itemId,
});
return {
scopeId,
isSelectedItemIdSelector,
selectableItemIdsState,
selectedItemIdState,
selectableListOnEnterState,
};
};

66
packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts
View File

@ -1,52 +1,48 @@
import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
import { useResetRecoilState, useSetRecoilState } from 'recoil';
import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
type UseSelectableListProps = {
selectableListId?: string;
itemId?: string;
};
export const useSelectableList = (props?: UseSelectableListProps) => {
const scopeId = useAvailableScopeIdOrThrow(
SelectableListScopeInternalContext,
props?.selectableListId,
);
import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
export const useSelectableList = (selectableListScopeId?: string) => {
const {
selectableItemIdsState,
isSelectedItemIdSelector,
selectableListOnEnterState,
selectedItemIdState,
} = useSelectableListScopedStates({
selectableListScopeId: scopeId,
itemId: props?.itemId,
getSelectableListScopedState,
getSelectableListScopedFamilyState,
scopeId,
} = useSelectableListScopedState({
selectableListScopeId,
});
const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
const setSelectableListOnEnter = useSetRecoilState(
selectableListOnEnterState,
);
const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
const {
selectedItemIdScopeInjector,
selectableItemIdsScopeInjector,
selectableListOnEnterScopeInjector,
isSelectedItemIdFamilyScopeInjector,
} = getSelectableListScopeInjectors();
const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
const resetIsSelectedItemIdSelector = useResetRecoilState(
isSelectedItemIdSelector,
const setSelectableItemIds = useSetRecoilState(
getSelectableListScopedState(selectableItemIdsScopeInjector),
);
const setSelectableListOnEnter = useSetRecoilState(
getSelectableListScopedState(selectableListOnEnterScopeInjector),
);
const isSelectedItemIdFamilyState = getSelectableListScopedFamilyState(
isSelectedItemIdFamilyScopeInjector,
);
const resetSelectedItemIdState = useResetRecoilState(
getSelectableListScopedState(selectedItemIdScopeInjector),
);
const resetSelectedItem = () => {
resetSelectedItemIdState();
resetIsSelectedItemIdSelector();
};
return {
setSelectableItemIds,
isSelectedItemId,
setSelectableListOnEnter,
selectableListId: scopeId,
isSelectedItemIdSelector,
setSelectableItemIds,
isSelectedItemIdFamilyState,
setSelectableListOnEnter,
resetSelectedItem,
};
};

16
packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector.ts
View File

@ -1,25 +1,27 @@
import { selectorFamily } from 'recoil';
import { isSelectedItemIdMapScopedFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdMapScopedFamilyState';
import { createScopedFamilySelector } from '@/ui/utilities/recoil-scope/utils/createScopedFamilySelector';
export const isSelectedItemIdScopedFamilySelector = selectorFamily({
export const isSelectedItemIdScopedFamilySelector = createScopedFamilySelector<
boolean,
string
>({
key: 'isSelectedItemIdScopedFamilySelector',
get:
({ scopeId, itemId }: { scopeId: string; itemId: string }) =>
({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
({ get }) =>
get(
isSelectedItemIdMapScopedFamilyState({
scopeId: scopeId,
familyKey: itemId,
familyKey: familyKey,
}),
),
set:
({ scopeId, itemId }: { scopeId: string; itemId: string }) =>
({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
({ set }, newValue) =>
set(
isSelectedItemIdMapScopedFamilyState({
scopeId: scopeId,
familyKey: itemId,
familyKey: familyKey,
}),
newValue,
),

28
packages/twenty-front/src/modules/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors.ts Normal file
View File

@ -0,0 +1,28 @@
import { selectableItemIdsScopedState } from '@/ui/layout/selectable-list/states/selectableItemIdsScopedState';
import { selectableListOnEnterScopedState } from '@/ui/layout/selectable-list/states/selectableListOnEnterScopedState';
import { selectedItemIdScopedState } from '@/ui/layout/selectable-list/states/selectedItemIdScopedState';
import { isSelectedItemIdScopedFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector';
import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
export const getSelectableListScopeInjectors = () => {
const selectedItemIdScopeInjector = getScopeInjector(
selectedItemIdScopedState,
);
const selectableItemIdsScopeInjector = getScopeInjector(
selectableItemIdsScopedState,
);
const selectableListOnEnterScopeInjector = getScopeInjector(
selectableListOnEnterScopedState,
);
const isSelectedItemIdFamilyScopeInjector = getFamilyScopeInjector(
isSelectedItemIdScopedFamilySelector,
);
return {
selectedItemIdScopeInjector,
selectableItemIdsScopeInjector,
selectableListOnEnterScopeInjector,
isSelectedItemIdFamilyScopeInjector,
};
};

42
packages/twenty-front/src/modules/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates.ts
View File

@ -1,42 +0,0 @@
import { selectableItemIdsScopedState } from '@/ui/layout/selectable-list/states/selectableItemIdsScopedState';
import { selectableListOnEnterScopedState } from '@/ui/layout/selectable-list/states/selectableListOnEnterScopedState';
import { selectedItemIdScopedState } from '@/ui/layout/selectable-list/states/selectedItemIdScopedState';
import { isSelectedItemIdScopedFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
const UNDEFINED_SELECTABLE_ITEM_ID = 'UNDEFINED_SELECTABLE_ITEM_ID';
export const getSelectableListScopedStates = ({
selectableListScopeId,
itemId,
}: {
selectableListScopeId: string;
itemId?: string;
}) => {
const isSelectedItemIdSelector = isSelectedItemIdScopedFamilySelector({
scopeId: selectableListScopeId,
itemId: itemId ?? UNDEFINED_SELECTABLE_ITEM_ID,
});
const selectedItemIdState = getScopedState(
selectedItemIdScopedState,
selectableListScopeId,
);
const selectableItemIdsState = getScopedState(
selectableItemIdsScopedState,
selectableListScopeId,
);
const selectableListOnEnterState = getScopedState(
selectableListOnEnterScopedState,
selectableListScopeId,
);
return {
isSelectedItemIdSelector,
selectableItemIdsState,
selectedItemIdState,
selectableListOnEnterState,
};
};

38
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts Normal file
View File

@ -0,0 +1,38 @@
import { SerializableParam, Snapshot } from 'recoil';
import { FamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
import { ScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
export const useScopedState = (scopeId: string) => {
const getScopedState = <StateType>(scopeInjector: ScopeInjector<StateType>) =>
scopeInjector(scopeId);
const getScopedFamilyState =
<StateType, FamilyKey extends SerializableParam>(
familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
) =>
(familyKey: FamilyKey) =>
familyScopeInjector(scopeId, familyKey);
const getScopedSnapshotValue = <StateType>(
snashot: Snapshot,
scopeInjector: ScopeInjector<StateType>,
) => getSnapshotValue(snashot, scopeInjector(scopeId));
const getScopedFamilySnapshotValue =
<StateType, FamilyKey extends SerializableParam>(
snashot: Snapshot,
familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
) =>
(familyKey: FamilyKey) =>
getSnapshotValue(snashot, familyScopeInjector(scopeId, familyKey));
return {
scopeId,
getScopedState,
getScopedFamilyState,
getScopedSnapshotValue,
getScopedFamilySnapshotValue,
};
};

47
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createScopedFamilySelector.ts Normal file
View File

@ -0,0 +1,47 @@
import {
DefaultValue,
GetCallback,
GetRecoilValue,
Loadable,
RecoilValue,
ResetRecoilState,
selectorFamily,
SerializableParam,
SetRecoilState,
WrappedValue,
} from 'recoil';
import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
type SelectorGetter<T, P> = (
param: P,
) => (opts: {
get: GetRecoilValue;
getCallback: GetCallback;
}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
type SelectorSetter<T, P> = (
param: P,
) => (
opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },
newValue: T | DefaultValue,
) => void;
export const createScopedFamilySelector = <
ValueType,
FamilyKey extends SerializableParam,
>({
key,
get,
set,
}: {
key: string;
get: SelectorGetter<ValueType, ScopedFamilyStateKey<FamilyKey>>;
set: SelectorSetter<ValueType, ScopedFamilyStateKey<FamilyKey>>;
}) => {
return selectorFamily<ValueType, ScopedFamilyStateKey<FamilyKey>>({
key,
get,
set,
});
};

23
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts Normal file
View File

@ -0,0 +1,23 @@
import { RecoilState, SerializableParam } from 'recoil';
import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
export type FamilyScopeInjector<
StateType,
FamilyKey extends SerializableParam,
> = (scopeId: string, familyKey: FamilyKey) => RecoilState<StateType>;
export const getFamilyScopeInjector = <
StateType,
FamilyKey extends SerializableParam,
>(
scopedFamilyState: (
scopedFamilyKey: ScopedFamilyStateKey<FamilyKey>,
) => RecoilState<StateType>,
) => {
return (scopeId: string, familyKey: FamilyKey) =>
scopedFamilyState({
scopeId,
familyKey: familyKey || ('' as FamilyKey),
});
};

16
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts Normal file
View File

@ -0,0 +1,16 @@
import { RecoilState } from 'recoil';
import { RecoilScopedState } from '../types/RecoilScopedState';
export type ScopeInjector<StateType> = (
scopeId: string,
) => RecoilState<StateType>;
export const getScopeInjector = <StateType>(
scopedState: RecoilScopedState<StateType>,
) => {
return (scopeId: string) =>
scopedState({
scopeId,
});
};

2
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyState.ts → packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts
View File

@ -2,7 +2,7 @@ import { RecoilState, SerializableParam } from 'recoil';
import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
export const getScopedFamilyState = <
export const getScopedFamilyStateDeprecated = <
StateType,
FamilyKey extends SerializableParam,
>(

2
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedSelector.ts → packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedSelectorDeprecated.ts
View File

@ -1,6 +1,6 @@
import { RecoilScopedSelector } from '../types/RecoilScopedSelector';
export const getScopedSelector = <StateType>(
export const getScopedSelectorDeprecated = <StateType>(
recoilScopedState: RecoilScopedSelector<StateType>,
scopeId: string,
) => {

2
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedState.ts → packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedStateDeprecated.ts
View File

@ -1,6 +1,6 @@
import { RecoilScopedState } from '../types/RecoilScopedState';
export const getScopedState = <StateType>(
export const getScopedStateDeprecated = <StateType>(
recoilScopedState: RecoilScopedState<StateType>,
scopeId: string,
) => {

15
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedSelector.ts
View File

@ -1,15 +0,0 @@
import { Snapshot } from 'recoil';
import { RecoilScopedSelector } from '../types/RecoilScopedSelector';
import { getScopedSelector } from './getScopedSelector';
export const getSnapshotScopedSelector = <StateType>(
snapshot: Snapshot,
scopedState: RecoilScopedSelector<StateType>,
scopeId: string,
) => {
return snapshot
.getLoadable(getScopedSelector(scopedState, scopeId))
.getValue();
};

13
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedValue.ts
View File

@ -1,13 +0,0 @@
import { Snapshot } from 'recoil';
import { RecoilScopedState } from '../types/RecoilScopedState';
import { getScopedState } from './getScopedState';
export const getSnapshotScopedValue = <StateType>(
snapshot: Snapshot,
scopedState: RecoilScopedState<StateType>,
scopeId: string,
) => {
return snapshot.getLoadable(getScopedState(scopedState, scopeId)).getValue();
};

4
packages/twenty-front/src/modules/views/hooks/internal/useViewScopedStates.ts
View File

@ -1,7 +1,7 @@
import { useRecoilState } from 'recoil';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
import { UNDEFINED_FAMILY_ITEM_ID } from '../../constants';
import { ViewScopeInternalContext } from '../../scopes/scope-internal-context/ViewScopeInternalContext';
@ -18,7 +18,7 @@ export const useViewScopedStates = (args?: { viewScopeId?: string }) => {
// View
const [currentViewId] = useRecoilState(
getScopedState(currentViewIdScopedState, scopeId),
getScopedStateDeprecated(currentViewIdScopedState, scopeId),
);
const viewId = currentViewId ?? UNDEFINED_FAMILY_ITEM_ID;

4
packages/twenty-front/src/modules/views/utils/getViewScopedStateValuesFromSnapshot.ts
View File

@ -1,6 +1,6 @@
import { Snapshot } from 'recoil';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { UNDEFINED_FAMILY_ITEM_ID } from '../constants';
@ -19,7 +19,7 @@ export const getViewScopedStateValuesFromSnapshot = ({
}) => {
const currentViewId = getSnapshotValue(
snapshot,
getScopedState(currentViewIdScopedState, viewScopeId),
getScopedStateDeprecated(currentViewIdScopedState, viewScopeId),
);
const familyItemId = viewId ?? currentViewId ?? UNDEFINED_FAMILY_ITEM_ID;

4
packages/twenty-front/src/modules/views/utils/getViewScopedStatesFromSnapshot.ts
View File

@ -1,6 +1,6 @@
import { Snapshot } from 'recoil';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { UNDEFINED_FAMILY_ITEM_ID } from '../constants';
@ -19,7 +19,7 @@ export const getViewScopedStatesFromSnapshot = ({
}) => {
const currentViewId = getSnapshotValue(
snapshot,
getScopedState(currentViewIdScopedState, viewScopeId),
getScopedStateDeprecated(currentViewIdScopedState, viewScopeId),
);
const usedViewId = viewId ?? currentViewId ?? UNDEFINED_FAMILY_ITEM_ID;

51
packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts
View File

@ -1,6 +1,6 @@
import { getScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/getScopedFamilyState';
import { getScopedSelector } from '@/ui/utilities/recoil-scope/utils/getScopedSelector';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getScopedFamilyStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated';
import { getScopedSelectorDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedSelectorDeprecated';
import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
import { isPersistingViewScopedState } from '@/views/states/isPersistingViewScopedState';
import { currentViewScopedSelector } from '@/views/states/selectors/currentViewScopedSelector';
@ -36,43 +36,46 @@ export const getViewScopedStates = ({
viewScopeId: string;
viewId: string;
}) => {
const viewEditModeState = getScopedState(
const viewEditModeState = getScopedStateDeprecated(
viewEditModeScopedState,
viewScopeId,
);
const viewsState = getScopedState(viewsScopedState, viewScopeId);
const viewsState = getScopedStateDeprecated(viewsScopedState, viewScopeId);
const viewObjectMetadataIdState = getScopedState(
const viewObjectMetadataIdState = getScopedStateDeprecated(
viewObjectMetadataIdScopeState,
viewScopeId,
);
const viewTypeState = getScopedState(viewTypeScopedState, viewScopeId);
const viewTypeState = getScopedStateDeprecated(
viewTypeScopedState,
viewScopeId,
);
const entityCountInCurrentViewState = getScopedState(
const entityCountInCurrentViewState = getScopedStateDeprecated(
entityCountInCurrentViewScopedState,
viewScopeId,
);
const isViewBarExpandedState = getScopedState(
const isViewBarExpandedState = getScopedStateDeprecated(
isViewBarExpandedScopedState,
viewScopeId,
);
const isPersistingViewState = getScopedState(
const isPersistingViewState = getScopedStateDeprecated(
isPersistingViewScopedState,
viewScopeId,
);
// ViewSorts
const currentViewSortsState = getScopedFamilyState(
const currentViewSortsState = getScopedFamilyStateDeprecated(
currentViewSortsScopedFamilyState,
viewScopeId,
viewId,
);
const savedViewSortsState = getScopedFamilyState(
const savedViewSortsState = getScopedFamilyStateDeprecated(
savedViewSortsScopedFamilyState,
viewScopeId,
viewId,
@ -83,7 +86,7 @@ export const getViewScopedStates = ({
viewId: viewId,
});
const availableSortDefinitionsState = getScopedState(
const availableSortDefinitionsState = getScopedStateDeprecated(
availableSortDefinitionsScopedState,
viewScopeId,
);
@ -94,13 +97,13 @@ export const getViewScopedStates = ({
});
// ViewFilters
const currentViewFiltersState = getScopedFamilyState(
const currentViewFiltersState = getScopedFamilyStateDeprecated(
currentViewFiltersScopedFamilyState,
viewScopeId,
viewId,
);
const savedViewFiltersState = getScopedFamilyState(
const savedViewFiltersState = getScopedFamilyStateDeprecated(
savedViewFiltersScopedFamilyState,
viewScopeId,
viewId,
@ -112,7 +115,7 @@ export const getViewScopedStates = ({
viewId: viewId,
});
const availableFilterDefinitionsState = getScopedState(
const availableFilterDefinitionsState = getScopedStateDeprecated(
availableFilterDefinitionsScopedState,
viewScopeId,
);
@ -123,18 +126,18 @@ export const getViewScopedStates = ({
});
// ViewFields
const availableFieldDefinitionsState = getScopedState(
const availableFieldDefinitionsState = getScopedStateDeprecated(
availableFieldDefinitionsScopedState,
viewScopeId,
);
const currentViewFieldsState = getScopedFamilyState(
const currentViewFieldsState = getScopedFamilyStateDeprecated(
currentViewFieldsScopedFamilyState,
viewScopeId,
viewId,
);
const savedViewFieldsState = getScopedFamilyState(
const savedViewFieldsState = getScopedFamilyStateDeprecated(
savedViewFieldsScopedFamilyState,
viewScopeId,
viewId,
@ -146,27 +149,27 @@ export const getViewScopedStates = ({
});
// ViewChangeHandlers
const onViewSortsChangeState = getScopedState(
const onViewSortsChangeState = getScopedStateDeprecated(
onViewSortsChangeScopedState,
viewScopeId,
);
const onViewFiltersChangeState = getScopedState(
const onViewFiltersChangeState = getScopedStateDeprecated(
onViewFiltersChangeScopedState,
viewScopeId,
);
const onViewFieldsChangeState = getScopedState(
const onViewFieldsChangeState = getScopedStateDeprecated(
onViewFieldsChangeScopedState,
viewScopeId,
);
const currentViewIdState = getScopedState(
const currentViewIdState = getScopedStateDeprecated(
currentViewIdScopedState,
viewScopeId,
);
const currentViewSelector = getScopedSelector(
const currentViewSelector = getScopedSelectorDeprecated(
currentViewScopedSelector,
viewScopeId,
);