3157 refactor scoped states to move to v3 (#3180)

* renaming * renaming * create getDropdownScopeInjectors * update useDropdown * create internal hooks folder * update record-table states to be scoped states * update record-table selectors to be scoped selectors * create utils scope injector * refactor record-table wip * refactor record-table wip * wip * inject scopeId in selectors * update intenal hooks * update intenal hooks * update intenal hooks * update intenal hooks * update intenal hooks * update intenal hooks * update internal hooks * update internal hooks * update internal hooks * update internal hooks * update useTableColumns * update states and hooks * refactoring * refactoring * refactoring * refactoring * refactoring * refactoring * refactoring * refactoring * refactoring * fix scopeId not in context * fix lint errors * fix error in story * fix errors: wip * fix errors * fix error * fix jest test * fix scopeId not defined * fix jest test * Bug fixes --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2024-01-03 19:45:14 +01:00
parent 65250839fb
commit b0d3e6d8d3
112 changed files with 1447 additions and 716 deletions
--- 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
@ -0,0 +1,31 @@
+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/useDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
@ -1,44 +1,44 @@
+import { useRecoilState } from 'recoil';
+
+import { useDropdownScopedStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownScopedStates';
+import { getDropdownScopeInjectors } from '@/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';

-import { DropdownScopeInternalContext } from '../scopes/scope-internal-context/DropdownScopeInternalContext';
+export const useDropdown = (dropdownId?: string) => {
+  const { injectStateWithDropdownScopeId, scopeId } = useDropdownScopedStates({
+    dropdownScopeId: dropdownId,
+  });

-import { useDropdownStates } from './useDropdownStates';
+  const {
+    dropdownHotkeyScopeScopeInjector,
+    dropdownWidthScopeInjector,
+    isDropdownOpenScopeInjector,
+  } = getDropdownScopeInjectors();

-type UseDropdownProps = {
-  dropdownScopeId?: string;
-};
-
-export const useDropdown = (props?: UseDropdownProps) => {
  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

-  const scopeId = useAvailableScopeIdOrThrow(
-    DropdownScopeInternalContext,
-    props?.dropdownScopeId,
+  const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilState(
+    injectStateWithDropdownScopeId(dropdownHotkeyScopeScopeInjector),
  );

-  const {
-    dropdownHotkeyScope,
-    setDropdownHotkeyScope,
-    isDropdownOpen,
-    setIsDropdownOpen,
-    dropdownWidth,
-    setDropdownWidth,
-  } = useDropdownStates({
-    scopeId,
-  });
+  const [dropdownWidth, setDropdownWidth] = useRecoilState(
+    injectStateWithDropdownScopeId(dropdownWidthScopeInjector),
+  );

-  const closeDropdownButton = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = useRecoilState(
+    injectStateWithDropdownScopeId(isDropdownOpenScopeInjector),
+  );
+
+  const closeDropdown = () => {
    goBackToPreviousHotkeyScope();
    setIsDropdownOpen(false);
  };

-  const openDropdownButton = () => {
+  const openDropdown = () => {
    setIsDropdownOpen(true);
-
    if (dropdownHotkeyScope) {
      setHotkeyScopeAndMemorizePreviousScope(
        dropdownHotkeyScope.scope,
@ -47,20 +47,20 @@ export const useDropdown = (props?: UseDropdownProps) => {
    }
  };

-  const toggleDropdownButton = () => {
+  const toggleDropdown = () => {
    if (isDropdownOpen) {
-      closeDropdownButton();
+      closeDropdown();
    } else {
-      openDropdownButton();
+      openDropdown();
    }
  };

  return {
    scopeId,
    isDropdownOpen: isDropdownOpen,
-    closeDropdown: closeDropdownButton,
-    toggleDropdown: toggleDropdownButton,
-    openDropdown: openDropdownButton,
+    closeDropdown,
+    toggleDropdown,
+    openDropdown,
    dropdownHotkeyScope,
    setDropdownHotkeyScope,
    dropdownWidth,
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownStates.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownStates.ts
@ -1,31 +0,0 @@
-import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
-
-import { dropdownHotkeyScopeScopedState } from '../states/dropdownHotkeyScopeScopedState';
-import { dropdownWidthScopedState } from '../states/dropdownWidthScopedState';
-import { isDropdownOpenScopedState } from '../states/isDropdownOpenScopedState';
-
-export const useDropdownStates = ({ scopeId }: { scopeId: string }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = useRecoilScopedStateV2(
-    isDropdownOpenScopedState,
-    scopeId,
-  );
-
-  const [dropdownHotkeyScope, setDropdownHotkeyScope] = useRecoilScopedStateV2(
-    dropdownHotkeyScopeScopedState,
-    scopeId,
-  );
-
-  const [dropdownWidth, setDropdownWidth] = useRecoilScopedStateV2(
-    dropdownWidthScopedState,
-    scopeId,
-  );
-
-  return {
-    isDropdownOpen,
-    setIsDropdownOpen,
-    dropdownHotkeyScope,
-    setDropdownHotkeyScope,
-    dropdownWidth,
-    setDropdownWidth,
-  };
-};
--- 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
@ -0,0 +1,22 @@
+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,
+  };
+};