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

Keep migrating to jotai (#18064)

Browse Source 
And we continue!
This commit is contained in:
Charles Bochet
2026-02-19 12:10:02 +01:00
committed by GitHub
parent c0ea049ad7
commit 1a13258302
216 changed files with 2366 additions and 1594 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/components/CommandMenuDefaultSelectionEffect.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/C
import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
@@ -16,7 +16,7 @@ export const CommandMenuDefaultSelectionEffect = ({
COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
);
const selectedItemId = useRecoilComponentValue(
const selectedItemId = useRecoilComponentValueV2(
selectedItemIdComponentState,
COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
);
packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
+4 -4
View File
@@ -4,8 +4,8 @@ import { IconArrowUpRight, type IconComponent } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyValueV2';
export type CommandMenuItemProps = {
label: string;
@@ -44,8 +44,8 @@ export const CommandMenuItem = ({
Icon = IconArrowUpRight;
}
const isSelectedItemId = useRecoilComponentFamilyValue(
isSelectedItemIdComponentFamilySelector,
const isSelectedItemId = useRecoilComponentFamilyValueV2(
isSelectedItemIdComponentFamilyState,
id,
);
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemNumberInput.tsx
+2 -2
View File
@@ -4,10 +4,10 @@ import { TextInput } from '@/ui/input/components/TextInput';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import styled from '@emotion/styled';
import { useRef, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { type IconComponent } from 'twenty-ui/display';
import {
@@ -45,7 +45,7 @@ export const CommandMenuItemNumberInput = ({
const [draftValue, setDraftValue] = useState(value);
const [hasError, setHasError] = useState(false);
const currentFocusId = useRecoilValue(currentFocusIdSelector);
const currentFocusId = useRecoilValueV2(currentFocusIdSelector);
const isNumberInputCurrentlyFocused = currentFocusId === focusId;
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemTextInput.tsx
+2 -2
View File
@@ -4,10 +4,10 @@ import { TextInput } from '@/ui/input/components/TextInput';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import styled from '@emotion/styled';
import { useRef, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { type IconComponent } from 'twenty-ui/display';
type CommandMenuItemTextInputProps = {
@@ -37,7 +37,7 @@ export const CommandMenuItemTextInput = ({
const focusId = `${id}-input`;
const [draftValue, setDraftValue] = useState(value);
const currentFocusId = useRecoilValue(currentFocusIdSelector);
const currentFocusId = useRecoilValueV2(currentFocusIdSelector);
const isTextInputCurrentlyFocused = currentFocusId === focusId;
const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
packages/twenty-front/src/modules/command-menu/components/CommandMenuItemToggle.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentFamilyValueV2';
import { MenuItemToggle, type MenuItemToggleProps } from 'twenty-ui/navigation';
export type CommandMenuItemToggleProps = MenuItemToggleProps & {
@@ -7,8 +7,8 @@ export type CommandMenuItemToggleProps = MenuItemToggleProps & {
};
export const CommandMenuItemToggle = (props: CommandMenuItemToggleProps) => {
const isSelectedItemId = useRecoilComponentFamilyValue(
isSelectedItemIdComponentFamilySelector,
const isSelectedItemId = useRecoilComponentFamilyValueV2(
isSelectedItemIdComponentFamilyState,
props.id,
);
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx
+14 -15
View File
@@ -11,6 +11,7 @@ import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingC
import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useStore } from 'jotai';
import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
import { WORKFLOW_DIAGRAM_CREATE_STEP_NODE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramCreateStepNodeClickOutsideId';
import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId';
@@ -19,8 +20,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { useRef } from 'react';
import { useRecoilCallback } from 'recoil';
import { useCallback, useRef } from 'react';
import { LINK_CHIP_CLICK_OUTSIDE_ID } from 'twenty-ui/components';
import { useIsMobile } from 'twenty-ui/utilities';
@@ -58,20 +58,19 @@ export const CommandMenuOpenContainer = ({
isSidePanelAnimatingStateV2,
);
const handleClickOutside = useRecoilCallback(
({ snapshot }) =>
(event: MouseEvent | TouchEvent) => {
const currentFocusId = snapshot
.getLoadable(currentFocusIdSelector)
.getValue();
const store = useStore();
if (currentFocusId === SIDE_PANEL_FOCUS_ID) {
event.stopImmediatePropagation();
event.preventDefault();
closeCommandMenu();
}
},
[closeCommandMenu],
const handleClickOutside = useCallback(
(event: MouseEvent | TouchEvent) => {
const currentFocusId = store.get(currentFocusIdSelector.atom);
if (currentFocusId === SIDE_PANEL_FOCUS_ID) {
event.stopImmediatePropagation();
event.preventDefault();
closeCommandMenu();
}
},
[closeCommandMenu, store],
);
useListenClickOutside({