Migrate dropdown to scope map (#3338)

* Migrate dropdown to scope map * Run lintr * Move Dropdown Scope internally * Fix * Fix lint --------- Co-authored-by: Thomas Trompette <thomast@twenty.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2024-01-10 15:46:37 +01:00
parent fbf7496fab
commit 2713285a0f
47 changed files with 803 additions and 881 deletions
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@ -9,6 +9,7 @@ import {
 } from '@floating-ui/react';
 import { Key } from 'ts-key-enum';

+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@ -29,6 +30,7 @@ type DropdownProps = {
    scope: string;
  };
  dropdownHotkeyScope: HotkeyScope;
+  dropdownId: string;
  dropdownPlacement?: Placement;
  dropdownMenuWidth?: number;
  dropdownOffset?: { x?: number; y?: number };
@ -43,6 +45,7 @@ export const Dropdown = ({
  dropdownComponents,
  dropdownMenuWidth,
  hotkey,
+  dropdownId,
  dropdownHotkeyScope,
  dropdownPlacement = 'bottom-end',
  dropdownOffset = { x: 0, y: 0 },
@ -53,8 +56,7 @@ export const Dropdown = ({
  const containerRef = useRef<HTMLDivElement>(null);

  const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } =
-    useDropdown();
-
+    useDropdown(dropdownId);
  const offsetMiddlewares = [];

  if (dropdownOffset.x) {
@ -87,6 +89,7 @@ export const Dropdown = ({
  });

  useInternalHotkeyScopeManagement({
+    dropdownScopeId: `${dropdownId}-scope`,
    dropdownHotkeyScopeFromParent: dropdownHotkeyScope,
  });

@ -100,36 +103,38 @@ export const Dropdown = ({
  );

  return (
-    <div ref={containerRef} className={className}>
-      {clickableComponent && (
-        <div
-          ref={refs.setReference}
-          onClick={toggleDropdown}
-          className={className}
-        >
-          {clickableComponent}
-        </div>
-      )}
-      {hotkey && (
-        <HotkeyEffect
-          hotkey={hotkey}
-          onHotkeyTriggered={handleHotkeyTriggered}
+    <DropdownScope dropdownScopeId={`${dropdownId}-scope`}>
+      <div ref={containerRef} className={className}>
+        {clickableComponent && (
+          <div
+            ref={refs.setReference}
+            onClick={toggleDropdown}
+            className={className}
+          >
+            {clickableComponent}
+          </div>
+        )}
+        {hotkey && (
+          <HotkeyEffect
+            hotkey={hotkey}
+            onHotkeyTriggered={handleHotkeyTriggered}
+          />
+        )}
+        {isDropdownOpen && (
+          <DropdownMenu
+            width={dropdownMenuWidth ?? dropdownWidth}
+            data-select-disable
+            ref={refs.setFloating}
+            style={floatingStyles}
+          >
+            {dropdownComponents}
+          </DropdownMenu>
+        )}
+        <DropdownOnToggleEffect
+          onDropdownClose={onClose}
+          onDropdownOpen={onOpen}
        />
-      )}
-      {isDropdownOpen && (
-        <DropdownMenu
-          width={dropdownMenuWidth ?? dropdownWidth}
-          data-select-disable
-          ref={refs.setFloating}
-          style={floatingStyles}
-        >
-          {dropdownComponents}
-        </DropdownMenu>
-      )}
-      <DropdownOnToggleEffect
-        onDropdownClose={onClose}
-        onDropdownOpen={onOpen}
-      />
-    </div>
+      </div>
+    </DropdownScope>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/stories/DropdownMenu.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/stories/DropdownMenu.stories.tsx
@ -12,7 +12,6 @@ import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuI
 import { Avatar } from '@/users/components/Avatar';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';

-import { DropdownScope } from '../../scopes/DropdownScope';
 import { Dropdown } from '../Dropdown';
 import { DropdownMenuHeader } from '../DropdownMenuHeader';
 import { DropdownMenuInput } from '../DropdownMenuInput';
@ -25,18 +24,12 @@ const meta: Meta<typeof Dropdown> = {
  title: 'UI/Layout/Dropdown/Dropdown',
  component: Dropdown,

-  decorators: [
-    ComponentDecorator,
-    (Story) => (
-      <DropdownScope dropdownScopeId="testDropdownMenu">
-        <Story />
-      </DropdownScope>
-    ),
-  ],
+  decorators: [ComponentDecorator, (Story) => <Story />],
  args: {
    clickableComponent: <Button title="Open Dropdown" />,
    dropdownHotkeyScope: { scope: 'testDropdownMenu' },
    dropdownOffset: { x: 0, y: 8 },
+    dropdownId: 'test-dropdown-id',
  },
  argTypes: {
    clickableComponent: { control: false },
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts
@ -1,31 +0,0 @@
-import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState';
-
-type UseDropdownScopedStatesProps = {
-  dropdownScopeId?: string;
-};
-
-export const useDropdownScopedStates = ({
-  dropdownScopeId,
-}: UseDropdownScopedStatesProps) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    DropdownScopeInternalContext,
-    dropdownScopeId,
-  );
-
-  const {
-    getScopedState,
-    getScopedFamilyState,
-    getScopedSnapshotValue,
-    getScopedFamilySnapshotValue,
-  } = useScopedState(scopeId);
-
-  return {
-    scopeId,
-    injectStateWithDropdownScopeId: getScopedState,
-    injectFamilyStateWithDropdownScopeId: getScopedFamilyState,
-    injectSnapshotValueWithDropdownScopeId: getScopedSnapshotValue,
-    injectFamilySnapshotValueWithDropdownScopeId: getScopedFamilySnapshotValue,
-  };
-};
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts
@ -0,0 +1,26 @@
+import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
+import { dropdownHotkeyStateScopeMap } from '@/ui/layout/dropdown/states/dropdownHotkeyStateScopeMap';
+import { dropdownWidthStateScopeMap } from '@/ui/layout/dropdown/states/dropdownWidthStateScopeMap';
+import { isDropdownOpenStateScopeMap } from '@/ui/layout/dropdown/states/isDropdownOpenStateScopeMap';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getState } from '@/ui/utilities/recoil-scope/utils/getState';
+
+type UseDropdownStatesProps = {
+  dropdownScopeId?: string;
+};
+
+export const useDropdownStates = ({
+  dropdownScopeId,
+}: UseDropdownStatesProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    DropdownScopeInternalContext,
+    dropdownScopeId,
+  );
+
+  return {
+    scopeId,
+    dropdownHotkeyScopeState: getState(dropdownHotkeyStateScopeMap, scopeId),
+    dropdownWidthState: getState(dropdownWidthStateScopeMap, scopeId),
+    isDropdownOpenState: getState(isDropdownOpenStateScopeMap, scopeId),
+  };
+};
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
@ -1,36 +1,29 @@
 import { useRecoilState } from 'recoil';

-import { useDropdownScopedStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownScopedStates';
-import { getDropdownScopeInjectors } from '@/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors';
+import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';

 export const useDropdown = (dropdownId?: string) => {
-  const { injectStateWithDropdownScopeId, scopeId } = useDropdownScopedStates({
-    dropdownScopeId: dropdownId,
-  });
-
  const {
-    dropdownHotkeyScopeScopeInjector,
-    dropdownWidthScopeInjector,
-    isDropdownOpenScopeInjector,
-  } = getDropdownScopeInjectors();
+    scopeId,
+    dropdownHotkeyScopeState,
+    dropdownWidthState,
+    isDropdownOpenState,
+  } = useDropdownStates({
+    dropdownScopeId: `${dropdownId}-scope`,
+  });

  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

-  const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
-    injectStateWithDropdownScopeId(dropdownHotkeyScopeScopeInjector),
-  );
+  const [dropdownHotkeyScope] = useRecoilState(dropdownHotkeyScopeState);

-  const [dropdownWidth, setDropdownWidth] = useRecoilState(
-    injectStateWithDropdownScopeId(dropdownWidthScopeInjector),
-  );
+  const [dropdownWidth, setDropdownWidth] = useRecoilState(dropdownWidthState);

-  const [isDropdownOpen, setIsDropdownOpen] = useRecoilState(
-    injectStateWithDropdownScopeId(isDropdownOpenScopeInjector),
-  );
+  const [isDropdownOpen, setIsDropdownOpen] =
+    useRecoilState(isDropdownOpenState);

  const closeDropdown = () => {
    goBackToPreviousHotkeyScope();
@ -61,8 +54,6 @@ export const useDropdown = (dropdownId?: string) => {
    closeDropdown,
    toggleDropdown,
    openDropdown,
-    dropdownHotkeyScope,
-    setDropdownHotkeyScope,
    dropdownWidth,
    setDropdownWidth,
  };
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement.ts
@ -1,16 +1,22 @@
 import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';

+import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';

-import { useDropdown } from './useDropdown';
-
 export const useInternalHotkeyScopeManagement = ({
+  dropdownScopeId,
  dropdownHotkeyScopeFromParent,
 }: {
+  dropdownScopeId: string;
  dropdownHotkeyScopeFromParent?: HotkeyScope;
 }) => {
-  const { dropdownHotkeyScope, setDropdownHotkeyScope } = useDropdown();
+  const { dropdownHotkeyScopeState } = useDropdownStates({ dropdownScopeId });
+
+  const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
+    dropdownHotkeyScopeState,
+  );

  useEffect(() => {
    if (!isDeeplyEqual(dropdownHotkeyScopeFromParent, dropdownHotkeyScope)) {
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState.ts
@ -1,9 +1,9 @@
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const dropdownHotkeyScopeScopedState = createStateScopeMap<
+export const dropdownHotkeyStateScopeMap = createStateScopeMap<
  HotkeyScope | null | undefined
 >({
-  key: 'dropdownHotkeyScopeScopedState',
+  key: 'dropdownHotkeyStateScopeMap',
  defaultValue: null,
 });
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts
@ -1,8 +0,0 @@
-import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
-
-export const dropdownWidthScopedState = createStateScopeMap<number | undefined>(
-  {
-    key: 'dropdownWidthScopedState',
-    defaultValue: 160,
-  },
-);
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts
@ -0,0 +1,8 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const dropdownWidthStateScopeMap = createStateScopeMap<
+  number | undefined
+>({
+  key: 'dropdownWidthStateScopeMap',
+  defaultValue: 160,
+});
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenStateScopeMap.ts
@ -1,6 +1,6 @@
 import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';

-export const isDropdownOpenScopedState = createStateScopeMap<boolean>({
-  key: 'isDropdownOpenScopedState',
+export const isDropdownOpenStateScopeMap = createStateScopeMap<boolean>({
+  key: 'isDropdownOpenStateScopeMap',
  defaultValue: false,
 });
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts
@ -1,22 +0,0 @@
-import { dropdownHotkeyScopeScopedState } from '@/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState';
-import { dropdownWidthScopedState } from '@/ui/layout/dropdown/states/dropdownWidthScopedState';
-import { isDropdownOpenScopedState } from '@/ui/layout/dropdown/states/isDropdownOpenScopedState';
-import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
-
-export const getDropdownScopeInjectors = () => {
-  const dropdownHotkeyScopeScopeInjector = getScopeInjector(
-    dropdownHotkeyScopeScopedState,
-  );
-
-  const dropdownWidthScopeInjector = getScopeInjector(dropdownWidthScopedState);
-
-  const isDropdownOpenScopeInjector = getScopeInjector(
-    isDropdownOpenScopedState,
-  );
-
-  return {
-    dropdownHotkeyScopeScopeInjector,
-    dropdownWidthScopeInjector,
-    isDropdownOpenScopeInjector,
-  };
-};
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
@ -12,7 +12,6 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';

 import { Dropdown } from '../../dropdown/components/Dropdown';
 import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
-import { DropdownScope } from '../../dropdown/scopes/DropdownScope';

 const StyledContainer = styled.div`
  z-index: 1;
@ -33,41 +32,40 @@ export const ShowPageAddButton = ({

  return (
    <StyledContainer>
-      <DropdownScope dropdownScopeId="add-show-page">
-        <Dropdown
-          clickableComponent={
-            <IconButton
-              Icon={IconPlus}
-              size="medium"
-              dataTestId="add-showpage-button"
-              accent="default"
-              variant="secondary"
-              onClick={toggleDropdown}
-            />
-          }
-          dropdownComponents={
-            <DropdownMenu>
-              <DropdownMenuItemsContainer>
-                <MenuItem
-                  onClick={() => handleSelect('Note')}
-                  accent="default"
-                  LeftIcon={IconNotes}
-                  text="Note"
-                />
-                <MenuItem
-                  onClick={() => handleSelect('Task')}
-                  accent="default"
-                  LeftIcon={IconCheckbox}
-                  text="Task"
-                />
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          }
-          dropdownHotkeyScope={{
-            scope: PageHotkeyScope.ShowPage,
-          }}
-        />
-      </DropdownScope>
+      <Dropdown
+        dropdownId="show-page-add-button-dropdown-id"
+        clickableComponent={
+          <IconButton
+            Icon={IconPlus}
+            size="medium"
+            dataTestId="add-showpage-button"
+            accent="default"
+            variant="secondary"
+            onClick={toggleDropdown}
+          />
+        }
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              <MenuItem
+                onClick={() => handleSelect('Note')}
+                accent="default"
+                LeftIcon={IconNotes}
+                text="Note"
+              />
+              <MenuItem
+                onClick={() => handleSelect('Task')}
+                accent="default"
+                LeftIcon={IconCheckbox}
+                text="Task"
+              />
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+        dropdownHotkeyScope={{
+          scope: PageHotkeyScope.ShowPage,
+        }}
+      />
    </StyledContainer>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
@ -13,7 +13,6 @@ import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMe

 import { Dropdown } from '../../dropdown/components/Dropdown';
 import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
-import { DropdownScope } from '../../dropdown/scopes/DropdownScope';

 const StyledContainer = styled.div`
  z-index: 1;
@ -42,35 +41,34 @@ export const ShowPageMoreButton = ({

  return (
    <StyledContainer>
-      <DropdownScope dropdownScopeId="more-show-page">
-        <Dropdown
-          clickableComponent={
-            <IconButton
-              Icon={IconDotsVertical}
-              size="medium"
-              dataTestId="more-showpage-button"
-              accent="default"
-              variant="secondary"
-              onClick={toggleDropdown}
-            />
-          }
-          dropdownComponents={
-            <DropdownMenu>
-              <DropdownMenuItemsContainer>
-                <MenuItem
-                  onClick={handleDelete}
-                  accent="danger"
-                  LeftIcon={IconTrash}
-                  text="Delete"
-                />
-              </DropdownMenuItemsContainer>
-            </DropdownMenu>
-          }
-          dropdownHotkeyScope={{
-            scope: PageHotkeyScope.ShowPage,
-          }}
-        />
-      </DropdownScope>
+      <Dropdown
+        dropdownId="more-show-page"
+        clickableComponent={
+          <IconButton
+            Icon={IconDotsVertical}
+            size="medium"
+            dataTestId="more-showpage-button"
+            accent="default"
+            variant="secondary"
+            onClick={toggleDropdown}
+          />
+        }
+        dropdownComponents={
+          <DropdownMenu>
+            <DropdownMenuItemsContainer>
+              <MenuItem
+                onClick={handleDelete}
+                accent="danger"
+                LeftIcon={IconTrash}
+                text="Delete"
+              />
+            </DropdownMenuItemsContainer>
+          </DropdownMenu>
+        }
+        dropdownHotkeyScope={{
+          scope: PageHotkeyScope.ShowPage,
+        }}
+      />
    </StyledContainer>
  );
 };