Refactor useDropdown states to component state V2 (#12911)

This PR is a follow-up of the first refactor of dropdown hooks : https://github.com/twentyhq/twenty/pull/12875 In this PR we continue by focusing on the replacement of those two states that are still using the v1 of component states : - isDropdownOpenComponentState - dropdownPlacementComponentState When then remove those two old states and now only use the new component state v2. ## QA Component | Status | Comments -- | -- | -- RecordDetailRelationSectionDropdownToMany | Ok | RecordDetailRelationSectionDropdownToOne | Ok | WorkflowVariablesDropdown | Ok | DropdownInternalContainer | Ok | Tested on tables and boards fields
2025-06-26 16:11:24 +02:00
parent fd7089cfc5
commit 658cd46336
14 changed files with 73 additions and 96 deletions
@@ -2,6 +2,7 @@ import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingC
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
 import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxHeightComponentState';
 import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
@@ -10,6 +11,7 @@ import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotke
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import styled from '@emotion/styled';
 import {
  FloatingPortal,
@@ -67,8 +69,7 @@ export const DropdownInternalContainer = ({
  excludedClickOutsideIds,
  isDropdownInModal = false,
 }: DropdownInternalContainerProps) => {
-  const { isDropdownOpen, closeDropdown, setDropdownPlacement } =
-    useDropdown(dropdownId);
+  const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);

  const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);

@@ -82,6 +83,12 @@ export const DropdownInternalContainer = ({
    dropdownId,
  );

+  const setDropdownPlacement = useSetRecoilComponentStateV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId,
+  );
+
+  // TODO: remove this useEffect
  useEffect(() => {
    setDropdownPlacement(dropdownPlacement);
  }, [dropdownPlacement, setDropdownPlacement]);
@@ -1,8 +1,5 @@
 import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
-import { dropdownPlacementComponentState } from '@/ui/layout/dropdown/states/dropdownPlacementComponentState';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';

 type UseDropdownStatesProps = {
  dropdownScopeId?: string;
@@ -18,13 +15,5 @@ export const useDropdownStates = ({

  return {
    scopeId,
-    dropdownPlacementState: extractComponentState(
-      dropdownPlacementComponentState,
-      scopeId,
-    ),
-    isDropdownOpenState: extractComponentState(
-      isDropdownOpenComponentState,
-      scopeId,
-    ),
  };
 };
@@ -1,6 +1,6 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+
 import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId';
@@ -36,15 +36,7 @@ export const useCloseDropdown = () => {
          )
          .getValue();

-        const isDropdownOpenLegacy = snapshot
-          .getLoadable(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-          )
-          .getValue();
-
-        if (isDropdownOpen || isDropdownOpenLegacy) {
+        if (isDropdownOpen) {
          removeFocusItemFromFocusStackById({
            focusId: dropdownComponentInstanceId,
          });
@@ -57,13 +49,6 @@ export const useCloseDropdown = () => {
            }),
            false,
          );
-
-          set(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-            false,
-          );
        }
      },
    [
@@ -1,13 +1,16 @@
-import { useRecoilCallback, useRecoilState } from 'recoil';
+import { useRecoilCallback } from 'recoil';

 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useCallback } from 'react';

 /**
@@ -22,8 +25,7 @@ export const useDropdown = (dropdownId?: string) => {
  const { removeFocusItemFromFocusStackById } =
    useRemoveFocusItemFromFocusStackById();

-  const { scopeId, isDropdownOpenState, dropdownPlacementState } =
-    useDropdownStates({ dropdownScopeId: dropdownId });
+  const { scopeId } = useDropdownStates({ dropdownScopeId: dropdownId });

  const { setActiveDropdownFocusIdAndMemorizePrevious } =
    useSetActiveDropdownFocusIdAndMemorizePrevious();
@@ -31,11 +33,14 @@ export const useDropdown = (dropdownId?: string) => {
  const { goBackToPreviousDropdownFocusId } =
    useGoBackToPreviousDropdownFocusId();

-  const [isDropdownOpen, setIsDropdownOpen] =
-    useRecoilState(isDropdownOpenState);
+  const [isDropdownOpen, setIsDropdownOpen] = useRecoilComponentStateV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId ?? scopeId,
+  );

-  const [dropdownPlacement, setDropdownPlacement] = useRecoilState(
-    dropdownPlacementState,
+  const [dropdownPlacement, setDropdownPlacement] = useRecoilComponentStateV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId ?? scopeId,
  );

  const closeDropdown = useCallback(() => {
@@ -1,6 +1,6 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+
 import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -34,13 +34,6 @@ export const useOpenDropdown = () => {
          throw new Error('Dropdown component instance ID is not defined');
        }

-        set(
-          isDropdownOpenComponentState({
-            scopeId: dropdownComponentInstanceId,
-          }),
-          true,
-        );
-
        set(
          isDropdownOpenComponentStateV2.atomFamily({
            instanceId: dropdownComponentInstanceId,
@@ -1,7 +1,6 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId';
@@ -40,15 +39,7 @@ export const useToggleDropdown = () => {
          )
          .getValue();

-        const isDropdownOpenLegacy = snapshot
-          .getLoadable(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-          )
-          .getValue();
-
-        if (isDropdownOpen || isDropdownOpenLegacy) {
+        if (isDropdownOpen) {
          closeDropdown(dropdownComponentInstanceId);
        } else {
          openDropdown({
@@ -1,9 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-import { Placement } from '@floating-ui/react';
-
-export const dropdownPlacementComponentState =
-  createComponentState<Placement | null>({
-    key: 'dropdownPlacementComponentState',
-    defaultValue: null,
-  });
@@ -0,0 +1,11 @@
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+import { Placement } from '@floating-ui/react';
+
+export const dropdownPlacementComponentStateV2 =
+  createComponentStateV2<Placement | null>({
+    key: 'dropdownPlacementComponentState',
+    componentInstanceContext: DropdownComponentInstanceContext,
+    defaultValue: null,
+  });
@@ -1,9 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-/**
- * @deprecated Use `isDropdownOpenComponentStateV2` instead.
- */
-export const isDropdownOpenComponentState = createComponentState<boolean>({
-  key: 'isDropdownOpenComponentState',
-  defaultValue: false,
-});