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

Refactor Views by cleaning the code, relying on apolloCache and improving performances (#4516)

Browse Source 
* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests
This commit is contained in:
Charles Bochet
2024-03-20 14:21:58 +01:00
committed by GitHub
parent 20e14cb455
commit cfb0cce9b8
392 changed files with 3474 additions and 4410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx
View File

@ -8,7 +8,7 @@ type IconsProviderProps = {
};
export const IconsProvider = ({ children }: IconsProviderProps) => {
const setIcons = useSetRecoilState(iconsState());
const setIcons = useSetRecoilState(iconsState);
useEffect(() => {
import('../constants/index').then((lazyLoadedIcons) => {

2
packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts
View File

@ -4,7 +4,7 @@ import { Icon123 } from '@/ui/display/icon';
import { iconsState } from '@/ui/display/icon/states/iconsState';
export const useIcons = () => {
const icons = useRecoilValue(iconsState());
const icons = useRecoilValue(iconsState);
const defaultIcon = Icon123;
const getIcons = () => {

2
packages/twenty-front/src/modules/ui/input/hooks/useIconPicker.ts
View File

@ -3,7 +3,7 @@ import { useRecoilState } from 'recoil';
import { iconPickerState } from '../states/iconPickerState';
export const useIconPicker = () => {
const [iconPicker, setIconPicker] = useRecoilState(iconPickerState());
const [iconPicker, setIconPicker] = useRecoilState(iconPickerState);
return {
Icon: iconPicker.Icon,

3
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
View File

@ -30,13 +30,14 @@ const StyledInputContainer = styled.div`
export const DropdownMenuInput = forwardRef<
HTMLInputElement,
InputHTMLAttributes<HTMLInputElement>
>(({ autoFocus, defaultValue, placeholder }, ref) => {
>(({ autoFocus, defaultValue, placeholder, onChange }, ref) => {
return (
<StyledInputContainer>
<StyledInput
autoFocus={autoFocus}
defaultValue={defaultValue}
placeholder={placeholder}
onChange={onChange}
ref={ref}
/>
</StyledInputContainer>

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

@ -20,14 +20,12 @@ 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(() => {

10
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
View File

@ -42,12 +42,12 @@ const StyledRightDrawer = styled.div`
export const RightDrawer = () => {
const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
isRightDrawerOpenState(),
isRightDrawerOpenState,
);
const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState());
const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);
const rightDrawerPage = useRecoilValue(rightDrawerPageState());
const rightDrawerPage = useRecoilValue(rightDrawerPageState);
const { closeRightDrawer } = useRightDrawer();
@ -63,11 +63,11 @@ export const RightDrawer = () => {
({ snapshot, set }) =>
(event) => {
const isRightDrawerOpen = snapshot
.getLoadable(isRightDrawerOpenState())
.getLoadable(isRightDrawerOpenState)
.getValue();
if (isRightDrawerOpen) {
set(rightDrawerCloseEventState(), event);
set(rightDrawerCloseEventState, event);
closeRightDrawer();
}
},

2
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
View File

@ -47,7 +47,7 @@ const RIGHT_DRAWER_PAGES_CONFIG = {
};
export const RightDrawerRouter = () => {
const [rightDrawerPage] = useRecoilState(rightDrawerPageState());
const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
const { topBar = null, page = null } = rightDrawerPage
? RIGHT_DRAWER_PAGES_CONFIG[rightDrawerPage]

2
packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx
View File

@ -10,7 +10,7 @@ import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState
export const RightDrawerTopBarExpandButton = () => {
const [isRightDrawerExpanded, setIsRightDrawerExpanded] = useRecoilState(
isRightDrawerExpandedState(),
isRightDrawerExpandedState,
);
const handleButtonClick = () => {

8
packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
View File

@ -12,12 +12,10 @@ describe('useRightDrawer', () => {
it('Should test the default behavior of useRightDrawer and change the states as the function calls', async () => {
const useCombinedHooks = () => {
const { openRightDrawer, closeRightDrawer } = useRightDrawer();
const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState());
const isRightDrawerExpanded = useRecoilValue(
isRightDrawerExpandedState(),
);
const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
const isRightDrawerExpanded = useRecoilValue(isRightDrawerExpandedState);
const rightDrawerPage = useRecoilValue(rightDrawerPageState());
const rightDrawerPage = useRecoilValue(rightDrawerPageState);
return {
openRightDrawer,

16
packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
View File

@ -8,16 +8,16 @@ import { rightDrawerPageState } from '../states/rightDrawerPageState';
import { RightDrawerPages } from '../types/RightDrawerPages';
export const useRightDrawer = () => {
const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState());
const [isRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
const [rightDrawerPage] = useRecoilState(rightDrawerPageState());
const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
const openRightDrawer = useRecoilCallback(
({ set }) =>
(rightDrawerPage: RightDrawerPages) => {
set(rightDrawerPageState(), rightDrawerPage);
set(isRightDrawerExpandedState(), false);
set(isRightDrawerOpenState(), true);
set(rightDrawerPageState, rightDrawerPage);
set(isRightDrawerExpandedState, false);
set(isRightDrawerOpenState, true);
},
[],
);
@ -25,8 +25,8 @@ export const useRightDrawer = () => {
const closeRightDrawer = useRecoilCallback(
({ set }) =>
() => {
set(isRightDrawerExpandedState(), false);
set(isRightDrawerOpenState(), false);
set(isRightDrawerExpandedState, false);
set(isRightDrawerOpenState, false);
},
[],
);
@ -35,7 +35,7 @@ export const useRightDrawer = () => {
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const rightDrawerCloseEvent = snapshot
.getLoadable(rightDrawerCloseEventState())
.getLoadable(rightDrawerCloseEventState)
.getValue();
const isSameEvent =

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,9 +51,8 @@ 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

@ -40,13 +40,10 @@ 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);
@ -107,7 +104,7 @@ export const useSelectableListHotKeys = (
if (selectedItemId !== nextId) {
if (isNonEmptyString(nextId)) {
set(isSelectedItemIdSelector(nextId), true);
set(selectedItemIdState(), nextId);
set(selectedItemIdState, nextId);
}
if (isNonEmptyString(selectedItemId)) {
@ -138,11 +135,11 @@ export const useSelectableListHotKeys = (
() => {
const selectedItemId = getSnapshotValue(
snapshot,
selectedItemIdState(),
selectedItemIdState,
);
const onEnter = getSnapshotValue(
snapshot,
selectableListOnEnterState(),
selectableListOnEnterState,
);
if (isNonEmptyString(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/ShowPageMoreButton.tsx
View File

@ -26,7 +26,7 @@ export const ShowPageMoreButton = ({
objectNameSingular: string;
}) => {
const { closeDropdown, toggleDropdown } = useDropdown('more-show-page');
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState());
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
const navigate = useNavigate();
const { deleteOneRecord } = useDeleteOneRecord({

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

@ -61,8 +61,8 @@ export const ShowPageRightContainer = ({
notes,
emails,
}: ShowPageRightContainerProps) => {
const { getActiveTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const activeTabId = useRecoilValue(getActiveTabIdState());
const { activeTabIdState } = useTabList(TAB_LIST_COMPONENT_ID);
const activeTabId = useRecoilValue(activeTabIdState);
const shouldDisplayCalendarTab = useIsFeatureEnabled('IS_CALENDAR_ENABLED');
const shouldDisplayEmailsTab =

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

@ -36,9 +36,9 @@ const StyledContainer = styled.div`
export const TabList = ({ tabs, tabListId }: TabListProps) => {
const initialActiveTabId = tabs[0].id;
const { getActiveTabIdState, setActiveTabId } = useTabList(tabListId);
const { activeTabIdState, setActiveTabId } = useTabList(tabListId);
const activeTabId = useRecoilValue(getActiveTabIdState());
const activeTabId = useRecoilValue(activeTabIdState);
React.useEffect(() => {
setActiveTabId(initialActiveTabId);

6
packages/twenty-front/src/modules/ui/layout/tab/hooks/__tests__/useTabList.test.tsx
View File

@ -8,12 +8,11 @@ describe('useTabList', () => {
it('Should update the activeTabId state', async () => {
const { result } = renderHook(
() => {
const { getActiveTabIdState, setActiveTabId } =
const { activeTabIdState, setActiveTabId } =
useTabList('TEST_TAB_LIST_ID');
const activeTabId = useRecoilValue(getActiveTabIdState());
const activeTabId = useRecoilValue(activeTabIdState);
return {
getActiveTabIdState: getActiveTabIdState,
activeTabId,
setActiveTabId: setActiveTabId,
};
@ -22,7 +21,6 @@ describe('useTabList', () => {
wrapper: RecoilRoot,
},
);
expect(result.current.getActiveTabIdState).toBeInstanceOf(Function);
expect(result.current.setActiveTabId).toBeInstanceOf(Function);
expect(result.current.activeTabId).toBeNull();

5
packages/twenty-front/src/modules/ui/layout/tab/hooks/internal/useTabListStates.ts
View File

@ -15,9 +15,6 @@ export const useTabListStates = ({ tabListScopeId }: useTabListStatesProps) => {
return {
scopeId,
getActiveTabIdState: extractComponentState(
activeTabIdComponentState,
scopeId,
),
activeTabIdState: extractComponentState(activeTabIdComponentState, scopeId),
};
};

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

@ -3,14 +3,14 @@ import { useSetRecoilState } from 'recoil';
import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
export const useTabList = (tabListId?: string) => {
const { getActiveTabIdState } = useTabListStates({
const { activeTabIdState } = useTabListStates({
tabListScopeId: `${tabListId}-scope`,
});
const setActiveTabId = useSetRecoilState(getActiveTabIdState());
const setActiveTabId = useSetRecoilState(activeTabIdState);
return {
getActiveTabIdState,
activeTabIdState,
setActiveTabId,
};
};

4
packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBar.tsx
View File

@ -28,8 +28,8 @@ const StyledContainerActionBar = styled.div`
`;
export const ActionBar = () => {
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState());
const actionBarEntries = useRecoilValue(actionBarEntriesState());
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
const actionBarEntries = useRecoilValue(actionBarEntriesState);
const wrapperRef = useRef<HTMLDivElement>(null);
if (contextMenuIsOpen) {

2
packages/twenty-front/src/modules/ui/navigation/action-bar/components/__stories__/ActionBar.stories.tsx
View File

@ -9,7 +9,7 @@ import { actionBarOpenState } from '../../states/actionBarIsOpenState';
import { ActionBar } from '../ActionBar';
const FilledActionBar = () => {
const setActionBarOpenState = useSetRecoilState(actionBarOpenState());
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
setActionBarOpenState(true);
return <ActionBar />;
};

8
packages/twenty-front/src/modules/ui/navigation/context-menu/components/ContextMenu.tsx
View File

@ -37,10 +37,10 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
`;
export const ContextMenu = () => {
const contextMenuPosition = useRecoilValue(contextMenuPositionState());
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState());
const contextMenuEntries = useRecoilValue(contextMenuEntriesState());
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState());
const contextMenuPosition = useRecoilValue(contextMenuPositionState);
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const wrapperRef = useRef<HTMLDivElement>(null);
useListenClickOutside({

4
packages/twenty-front/src/modules/ui/navigation/context-menu/components/__stories__/ContextMenu.stories.tsx
View File

@ -10,12 +10,12 @@ import { contextMenuPositionState } from '../../states/contextMenuPositionState'
import { ContextMenu } from '../ContextMenu';
const FilledContextMenu = () => {
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState());
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
setContextMenuPosition({
x: 100,
y: 10,
});
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState());
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
setContextMenuOpenState(true);
return <ContextMenu />;
};

6
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx
View File

@ -24,12 +24,8 @@ export const MenuItemToggle = ({
onToggleChange,
toggleSize,
}: MenuItemToggleProps) => {
const handleOnClick = () => {
onToggleChange?.(!toggled);
};
return (
<StyledMenuItemBase className={className} onClick={handleOnClick}>
<StyledMenuItemBase className={className}>
<MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
<StyledMenuItemRightContent>
<Toggle

2
packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
View File

@ -107,11 +107,13 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
pointer-events: none;
position: fixed;
right: ${({ theme }) => theme.spacing(2)};
opacity: 0;
transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
}
&:hover {
& .hoverable-buttons {
opacity: 1;
pointer-events: auto;
position: static;
}

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
View File

@ -37,7 +37,7 @@ export const NavigationDrawerBackButton = ({
}: NavigationDrawerBackButtonProps) => {
const theme = useTheme();
const navigate = useNavigate();
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState());
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
return (
<StyledContainer>

2
packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/__tests__/useStepBar.test.tsx
View File

@ -11,7 +11,7 @@ const renderHooks = (initialStep: number) => {
const { nextStep, prevStep, reset, setStep } = useStepBar({
initialStep,
});
const stepBarInternal = useRecoilValue(stepBarInternalState());
const stepBarInternal = useRecoilValue(stepBarInternalState);
return {
nextStep,

5
packages/twenty-front/src/modules/ui/navigation/step-bar/hooks/useStepBar.ts
View File

@ -8,9 +8,8 @@ export type StepsOptions = {
};
export const useStepBar = ({ initialStep }: StepsOptions) => {
const [stepBarInternal, setStepBarInternal] = useRecoilState(
stepBarInternalState(),
);
const [stepBarInternal, setStepBarInternal] =
useRecoilState(stepBarInternalState);
const nextStep = () => {
setStepBarInternal((prevState) => ({

2
packages/twenty-front/src/modules/ui/theme/hooks/__tests__/useColorScheme.test.tsx
View File

@ -32,7 +32,7 @@ describe('useColorScheme', () => {
const colorScheme = useColorScheme();
const setCurrentWorkspaceMember = useSetRecoilState(
currentWorkspaceMemberState(),
currentWorkspaceMemberState,
);
setCurrentWorkspaceMember(workspaceMember);

2
packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts
View File

@ -8,7 +8,7 @@ import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
export const useColorScheme = () => {
const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
currentWorkspaceMemberState(),
currentWorkspaceMemberState,
);
const { updateOneRecord: updateOneWorkspaceMember } = useUpdateOneRecord({

8
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts
View File

@ -13,7 +13,7 @@ export const usePreviousHotkeyScope = () => {
({ snapshot, set }) =>
() => {
const previousHotkeyScope = snapshot
.getLoadable(previousHotkeyScopeState())
.getLoadable(previousHotkeyScopeState)
.getValue();
if (!previousHotkeyScope) {
@ -25,7 +25,7 @@ export const usePreviousHotkeyScope = () => {
previousHotkeyScope.customScopes,
);
set(previousHotkeyScopeState(), null);
set(previousHotkeyScopeState, null);
},
[setHotkeyScope],
);
@ -34,11 +34,11 @@ export const usePreviousHotkeyScope = () => {
({ snapshot, set }) =>
(scope: string, customScopes?: CustomHotkeyScopes) => {
const currentHotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState())
.getLoadable(currentHotkeyScopeState)
.getValue();
setHotkeyScope(scope, customScopes);
set(previousHotkeyScopeState(), currentHotkeyScope);
set(previousHotkeyScopeState, currentHotkeyScope);
},
[setHotkeyScope],
);

2
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts
View File

@ -24,7 +24,7 @@ export const useScopedHotkeyCallback = () =>
preventDefault?: boolean;
}) => {
const currentHotkeyScopes = snapshot
.getLoadable(internalHotkeysEnabledScopesState())
.getLoadable(internalHotkeysEnabledScopesState)
.getValue();
if (!currentHotkeyScopes.includes(scope)) {

3
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts
View File

@ -22,8 +22,7 @@ export const useScopedHotkeys = (
preventDefault: true,
},
) => {
const [pendingHotkey, setPendingHotkey] =
useRecoilState(pendingHotkeyState());
const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
const callScopedHotkeyCallback = useScopedHotkeyCallback();

3
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts
View File

@ -20,8 +20,7 @@ export const useSequenceHotkeys = (
},
deps: any[] = [],
) => {
const [pendingHotkey, setPendingHotkey] =
useRecoilState(pendingHotkeyState());
const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
const callScopedHotkeyCallback = useScopedHotkeyCallback();

6
packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts
View File

@ -26,7 +26,7 @@ export const useSetHotkeyScope = () =>
({ snapshot, set }) =>
async (hotkeyScopeToSet: string, customScopes?: CustomHotkeyScopes) => {
const currentHotkeyScope = snapshot
.getLoadable(currentHotkeyScopeState())
.getLoadable(currentHotkeyScopeState)
.getValue();
if (currentHotkeyScope.scope === hotkeyScopeToSet) {
@ -76,8 +76,8 @@ export const useSetHotkeyScope = () =>
}
scopesToSet.push(newHotkeyScope.scope);
set(internalHotkeysEnabledScopesState(), scopesToSet);
set(currentHotkeyScopeState(), newHotkeyScope);
set(internalHotkeysEnabledScopesState, scopesToSet);
set(currentHotkeyScopeState, newHotkeyScope);
},
[],
);

4
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useClickOutsideListener.test.tsx
View File

@ -15,9 +15,7 @@ describe('useClickOutsideListener', () => {
return {
useClickOutside: useClickOutsideListener(componentId),
isActivated: useRecoilValue(
getClickOutsideListenerIsActivatedState(),
),
isActivated: useRecoilValue(getClickOutsideListenerIsActivatedState),
};
},
{

14
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOutsideListener.ts
View File

@ -34,7 +34,7 @@ export const useClickOutsideListener = (componentId: string) => {
callback(event);
const additionalCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState())
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
additionalCallbacks.forEach((additionalCallback) => {
@ -51,7 +51,7 @@ export const useClickOutsideListener = (componentId: string) => {
const toggleClickOutsideListener = useRecoilCallback(
({ set }) =>
(activated: boolean) => {
set(getClickOutsideListenerIsActivatedState(), activated);
set(getClickOutsideListenerIsActivatedState, activated);
},
[getClickOutsideListenerIsActivatedState],
);
@ -60,7 +60,7 @@ export const useClickOutsideListener = (componentId: string) => {
({ set, snapshot }) =>
({ callbackFunction, callbackId }: ClickOutsideListenerCallback) => {
const existingCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState())
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
const existingCallbackWithSameId = existingCallbacks.find(
@ -74,7 +74,7 @@ export const useClickOutsideListener = (componentId: string) => {
});
set(
getClickOutsideListenerCallbacksState(),
getClickOutsideListenerCallbacksState,
existingCallbacksWithNewCallback,
);
} else {
@ -95,7 +95,7 @@ export const useClickOutsideListener = (componentId: string) => {
};
set(
getClickOutsideListenerCallbacksState(),
getClickOutsideListenerCallbacksState,
existingCallbacksWithOverwrittenCallback,
);
}
@ -107,7 +107,7 @@ export const useClickOutsideListener = (componentId: string) => {
({ set, snapshot }) =>
({ callbackId }: { callbackId: string }) => {
const existingCallbacks = snapshot
.getLoadable(getClickOutsideListenerCallbacksState())
.getLoadable(getClickOutsideListenerCallbacksState)
.getValue();
const indexOfCallbackToUnsubscribe = existingCallbacks.findIndex(
@ -121,7 +121,7 @@ export const useClickOutsideListener = (componentId: string) => {
existingCallbacks.toSpliced(indexOfCallbackToUnsubscribe, 1);
set(
getClickOutsideListenerCallbacksState(),
getClickOutsideListenerCallbacksState,
newCallbacksWithoutCallbackToUnsubscribe,
);
}

8
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts
View File

@ -32,7 +32,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
({ snapshot, set }) =>
(event: MouseEvent | TouchEvent) => {
const clickOutsideListenerIsActivated = snapshot
.getLoadable(getClickOutsideListenerIsActivatedState())
.getLoadable(getClickOutsideListenerIsActivatedState)
.getValue();
const isListening = clickOutsideListenerIsActivated && enabled;
@ -47,7 +47,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
.some((ref) => ref.current?.contains(event.target as Node));
set(
getClickOutsideListenerIsMouseDownInsideState(),
getClickOutsideListenerIsMouseDownInsideState,
clickedOnAtLeastOneRef,
);
}
@ -84,7 +84,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
});
set(
getClickOutsideListenerIsMouseDownInsideState(),
getClickOutsideListenerIsMouseDownInsideState,
clickedOnAtLeastOneRef,
);
}
@ -102,7 +102,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const isMouseDownInside = snapshot
.getLoadable(getClickOutsideListenerIsMouseDownInsideState())
.getLoadable(getClickOutsideListenerIsMouseDownInsideState)
.getValue();
if (mode === ClickOutsideMode.compareHTMLRef) {

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

@ -1,19 +0,0 @@
import { RecoilState, SerializableParam } from 'recoil';
import { ComponentFamilyStateKey } from '@/ui/utilities/state/component-state/types/ComponentFamilyStateKey';
export const getScopedFamilyStateDeprecated = <
StateType,
FamilyKey extends SerializableParam,
>(
recoilState: (
scopedFamilyKey: ComponentFamilyStateKey<FamilyKey>,
) => RecoilState<StateType>,
scopeId: string,
familyKey: FamilyKey,
) => {
return recoilState({
scopeId,
familyKey: familyKey || ('' as FamilyKey),
});
};

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

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

2
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/__tests__/useListenScroll.test.tsx
View File

@ -24,7 +24,7 @@ describe('useListenScroll', () => {
const { result } = renderHook(
() => {
useListenScroll({ scrollableRef: containerRef });
const isScrolling = useRecoilValue(isScrollingState());
const isScrolling = useRecoilValue(isScrollingState);
return { isScrolling };
},

10
packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts
View File

@ -15,7 +15,7 @@ export const useListenScroll = <T extends Element>({
const hideScrollBarsCallback = useRecoilCallback(
({ snapshot }) =>
() => {
const isScrolling = snapshot.getLoadable(isScrollingState()).getValue();
const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
if (!isScrolling) {
scrollableRef.current?.classList.remove('scrolling');
@ -27,13 +27,13 @@ export const useListenScroll = <T extends Element>({
const handleScrollStart = useRecoilCallback(
({ set }) =>
(event: Event) => {
set(isScrollingState(), true);
set(isScrollingState, true);
scrollableRef.current?.classList.add('scrolling');
const target = event.target as HTMLElement;
set(scrollTopState(), target.scrollTop);
set(scrollLeftState(), target.scrollLeft);
set(scrollTopState, target.scrollTop);
set(scrollLeftState, target.scrollLeft);
},
[scrollableRef],
);
@ -41,7 +41,7 @@ export const useListenScroll = <T extends Element>({
const handleScrollEnd = useRecoilCallback(
({ set }) =>
() => {
set(isScrollingState(), false);
set(isScrollingState, false);
debounce(hideScrollBarsCallback, 1000)();
},
[hideScrollBarsCallback],

2
packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/extractComponentState.ts
View File

@ -8,5 +8,5 @@ export const extractComponentState = <StateType>(
) => RecoilState<StateType>,
scopeId: string,
) => {
return () => componentState({ scopeId });
return componentState({ scopeId });
};

2
packages/twenty-front/src/modules/ui/utilities/state/utils/createState.ts
View File

@ -14,5 +14,5 @@ export const createState = <ValueType>({
default: defaultValue,
effects,
});
return () => recoilState;
return recoilState;
};