Refactor recoil scope states (#3097)

* Refactor recoil scope states

* Complete refactoring

* Fix

packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts

@@ -0,0 +1,38 @@
+import { SerializableParam, Snapshot } from 'recoil';
+
+import { FamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
+import { ScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+
+export const useScopedState = (scopeId: string) => {
+  const getScopedState = <StateType>(scopeInjector: ScopeInjector<StateType>) =>
+    scopeInjector(scopeId);
+
+  const getScopedFamilyState =
+    <StateType, FamilyKey extends SerializableParam>(
+      familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
+    ) =>
+    (familyKey: FamilyKey) =>
+      familyScopeInjector(scopeId, familyKey);
+
+  const getScopedSnapshotValue = <StateType>(
+    snashot: Snapshot,
+    scopeInjector: ScopeInjector<StateType>,
+  ) => getSnapshotValue(snashot, scopeInjector(scopeId));
+
+  const getScopedFamilySnapshotValue =
+    <StateType, FamilyKey extends SerializableParam>(
+      snashot: Snapshot,
+      familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
+    ) =>
+    (familyKey: FamilyKey) =>
+      getSnapshotValue(snashot, familyScopeInjector(scopeId, familyKey));
+
+  return {
+    scopeId,
+    getScopedState,
+    getScopedFamilyState,
+    getScopedSnapshotValue,
+    getScopedFamilySnapshotValue,
+  };
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createScopedFamilySelector.ts

@@ -0,0 +1,47 @@
+import {
+  DefaultValue,
+  GetCallback,
+  GetRecoilValue,
+  Loadable,
+  RecoilValue,
+  ResetRecoilState,
+  selectorFamily,
+  SerializableParam,
+  SetRecoilState,
+  WrappedValue,
+} from 'recoil';
+
+import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
+
+type SelectorGetter<T, P> = (
+  param: P,
+) => (opts: {
+  get: GetRecoilValue;
+  getCallback: GetCallback;
+}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
+
+type SelectorSetter<T, P> = (
+  param: P,
+) => (
+  opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },
+  newValue: T | DefaultValue,
+) => void;
+
+export const createScopedFamilySelector = <
+  ValueType,
+  FamilyKey extends SerializableParam,
+>({
+  key,
+  get,
+  set,
+}: {
+  key: string;
+  get: SelectorGetter<ValueType, ScopedFamilyStateKey<FamilyKey>>;
+  set: SelectorSetter<ValueType, ScopedFamilyStateKey<FamilyKey>>;
+}) => {
+  return selectorFamily<ValueType, ScopedFamilyStateKey<FamilyKey>>({
+    key,
+    get,
+    set,
+  });
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts

@@ -0,0 +1,23 @@
+import { RecoilState, SerializableParam } from 'recoil';
+
+import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
+
+export type FamilyScopeInjector<
+  StateType,
+  FamilyKey extends SerializableParam,
+> = (scopeId: string, familyKey: FamilyKey) => RecoilState<StateType>;
+
+export const getFamilyScopeInjector = <
+  StateType,
+  FamilyKey extends SerializableParam,
+>(
+  scopedFamilyState: (
+    scopedFamilyKey: ScopedFamilyStateKey<FamilyKey>,
+  ) => RecoilState<StateType>,
+) => {
+  return (scopeId: string, familyKey: FamilyKey) =>
+    scopedFamilyState({
+      scopeId,
+      familyKey: familyKey || ('' as FamilyKey),
+    });
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts

@@ -0,0 +1,16 @@
+import { RecoilState } from 'recoil';
+
+import { RecoilScopedState } from '../types/RecoilScopedState';
+
+export type ScopeInjector<StateType> = (
+  scopeId: string,
+) => RecoilState<StateType>;
+
+export const getScopeInjector = <StateType>(
+  scopedState: RecoilScopedState<StateType>,
+) => {
+  return (scopeId: string) =>
+    scopedState({
+      scopeId,
+    });
+};

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

@@ -2,7 +2,7 @@ import { RecoilState, SerializableParam } from 'recoil';
 
 import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
 
-export const getScopedFamilyState = <
+export const getScopedFamilyStateDeprecated = <
   StateType,
   FamilyKey extends SerializableParam,
 >(

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

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

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedStateDeprecated.ts

@@ -1,6 +1,6 @@
 import { RecoilScopedState } from '../types/RecoilScopedState';
 
-export const getScopedState = <StateType>(
+export const getScopedStateDeprecated = <StateType>(
   recoilScopedState: RecoilScopedState<StateType>,
   scopeId: string,
 ) => {

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedSelector.ts

@@ -1,15 +0,0 @@
-import { Snapshot } from 'recoil';
-
-import { RecoilScopedSelector } from '../types/RecoilScopedSelector';
-
-import { getScopedSelector } from './getScopedSelector';
-
-export const getSnapshotScopedSelector = <StateType>(
-  snapshot: Snapshot,
-  scopedState: RecoilScopedSelector<StateType>,
-  scopeId: string,
-) => {
-  return snapshot
-    .getLoadable(getScopedSelector(scopedState, scopeId))
-    .getValue();
-};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedValue.ts

@@ -1,13 +0,0 @@
-import { Snapshot } from 'recoil';
-
-import { RecoilScopedState } from '../types/RecoilScopedState';
-
-import { getScopedState } from './getScopedState';
-
-export const getSnapshotScopedValue = <StateType>(
-  snapshot: Snapshot,
-  scopedState: RecoilScopedState<StateType>,
-  scopeId: string,
-) => {
-  return snapshot.getLoadable(getScopedState(scopedState, scopeId)).getValue();
-};