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

Migrate record table to scope map (#3363)

Browse Source 
* Migrate record table to scope map

* Update record scope id to record id

* Remove todos and fix edit mode

* Fix perf

* Fix tests

* Fix tests

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-11 17:44:40 +01:00
committed by GitHub
parent 5f0c9f67c9
commit 6bae6fcdce
84 changed files with 713 additions and 1121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useInternalHotkeyScopeManagement.test.tsx
View File

@ -27,7 +27,7 @@ describe('useInternalHotkeyScopeManagement', () => {
const { dropdownHotkeyScopeState } = useDropdownStates({
dropdownScopeId,
});
const dropdownHotkeyScope = useRecoilValue(dropdownHotkeyScopeState);
const dropdownHotkeyScope = useRecoilValue(dropdownHotkeyScopeState());
return { dropdownHotkeyScope };
},
{

10
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
View File

@ -18,12 +18,14 @@ export const useDropdown = (dropdownId?: string) => {
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState);
const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState());
const [dropdownWidth, setDropdownWidth] = useRecoilState(dropdownWidthState);
const [dropdownWidth, setDropdownWidth] =
useRecoilState(dropdownWidthState());
const [isDropdownOpen, setIsDropdownOpen] =
useRecoilState(isDropdownOpenState);
const [isDropdownOpen, setIsDropdownOpen] = useRecoilState(
isDropdownOpenState(),
);
const closeDropdown = () => {
goBackToPreviousHotkeyScope();

2
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts
View File

@ -15,7 +15,7 @@ export const useInternalHotkeyScopeManagement = ({
const { dropdownHotkeyScopeState } = useDropdownStates({ dropdownScopeId });
const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
dropdownHotkeyScopeState,
dropdownHotkeyScopeState(),
);
useEffect(() => {

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

@ -21,7 +21,7 @@ describe('useSelectableList', () => {
selectableListScopeId,
});
const selectableItemIds = useRecoilValue(selectableItemIdsState);
const selectableItemIds = useRecoilValue(selectableItemIdsState());
return {
setSelectableItemIds,
@ -51,8 +51,9 @@ describe('useSelectableList', () => {
selectableListScopeId,
});
const [selectedItemId, setSelectedItemId] =
useRecoilState(selectedItemIdState);
const [selectedItemId, setSelectedItemId] = useRecoilState(
selectedItemIdState(),
);
return {
resetSelectedItem,

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

@ -39,10 +39,13 @@ export const useSelectableListHotKeys = (
const handleSelect = useRecoilCallback(
({ snapshot, set }) =>
(direction: Direction) => {
const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
const selectedItemId = getSnapshotValue(
snapshot,
selectedItemIdState(),
);
const selectableItemIds = getSnapshotValue(
snapshot,
selectableItemIdsState,
selectableItemIdsState(),
);
const currentPosition = findPosition(selectableItemIds, selectedItemId);
@ -103,7 +106,7 @@ export const useSelectableListHotKeys = (
if (selectedItemId !== nextId) {
if (nextId) {
set(isSelectedItemIdSelector(nextId), true);
set(selectedItemIdState, nextId);
set(selectedItemIdState(), nextId);
}
if (selectedItemId) {
@ -134,11 +137,11 @@ export const useSelectableListHotKeys = (
() => {
const selectedItemId = getSnapshotValue(
snapshot,
selectedItemIdState,
selectedItemIdState(),
);
const onEnter = getSnapshotValue(
snapshot,
selectableListOnEnterState,
selectableListOnEnterState(),
);
if (selectedItemId) {

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

@ -13,12 +13,12 @@ export const useSelectableList = (selectableListId?: string) => {
selectableListScopeId: selectableListId,
});
const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
const setSelectableItemIds = useSetRecoilState(selectableItemIdsState());
const setSelectableListOnEnter = useSetRecoilState(
selectableListOnEnterState,
selectableListOnEnterState(),
);
const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState());
const resetSelectedItem = () => {
resetSelectedItemIdState();

2
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
View File

@ -58,7 +58,7 @@ export const ShowPageRightContainer = ({
const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const activeTabId = useRecoilValue(activeTabIdState);
const activeTabId = useRecoilValue(activeTabIdState());
if (!targetableObject) return <></>;

2
packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
View File

@ -36,7 +36,7 @@ export const TabList = ({ tabs, tabListId }: TabListProps) => {
const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
const activeTabId = useRecoilValue(activeTabIdState);
const activeTabId = useRecoilValue(activeTabIdState());
React.useEffect(() => {
setActiveTabId(initialActiveTabId);

2
packages/twenty-front/src/modules/ui/layout/tab/hooks/useTabList.ts
View File

@ -7,7 +7,7 @@ export const useTabList = (tabListId?: string) => {
tabListScopeId: `${tabListId}-scope`,
});
const setActiveTabId = useSetRecoilState(activeTabIdState);
const setActiveTabId = useSetRecoilState(activeTabIdState());
return {
activeTabIdState,

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

@ -0,0 +1,2 @@
export const getScopeIdFromComponentId = (componentId?: string) =>
componentId ? `${componentId}-scope` : undefined;

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

@ -0,0 +1,12 @@
import { RecoilValueReadOnly } from 'recoil';
import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
export const getSelector = <StateType>(
stateScopeMap: (
stateScopeMapKey: StateScopeMapKey,
) => RecoilValueReadOnly<StateType>,
scopeId: string,
) => {
return stateScopeMap({ scopeId });
};

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

@ -6,5 +6,5 @@ export const getState = <StateType>(
stateScopeMap: (stateScopeMapKey: StateScopeMapKey) => RecoilState<StateType>,
scopeId: string,
) => {
return stateScopeMap({ scopeId });
return () => stateScopeMap({ scopeId });
};