Feat/improve new views (#2298)

* POC new recoil injected scoped states

* Finished useViewScopedState refactor

* Finished refactor

* Renamed mappers

* Fixed update view fields bug

* Post merge

* Complete refactor

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedSelector.ts

@@ -0,0 +1,7 @@
+import { RecoilValueReadOnly } from 'recoil';
+
+import { ScopedStateKey } from '../scopes-internal/types/ScopedStateKey';
+
+export type RecoilScopedSelector<StateType> = (
+  scopedKey: ScopedStateKey,
+) => RecoilValueReadOnly<StateType>;

front/src/modules/ui/utilities/recoil-scope/types/RecoilScopedState.ts

@@ -0,0 +1,7 @@
+import { RecoilState } from 'recoil';
+
+import { ScopedStateKey } from '../scopes-internal/types/ScopedStateKey';
+
+export type RecoilScopedState<StateType> = (
+  scopedKey: ScopedStateKey,
+) => RecoilState<StateType>;

front/src/modules/ui/utilities/recoil-scope/utils/createScopedSelector.ts

@@ -0,0 +1,30 @@
+import {
+  GetCallback,
+  GetRecoilValue,
+  Loadable,
+  RecoilValue,
+  selectorFamily,
+  WrappedValue,
+} from 'recoil';
+
+import { ScopedStateKey } from '../scopes-internal/types/ScopedStateKey';
+
+type SelectorGetter<T, P> = (
+  param: P,
+) => (opts: {
+  get: GetRecoilValue;
+  getCallback: GetCallback;
+}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
+
+export const createScopedSelector = <ValueType>({
+  key,
+  get,
+}: {
+  key: string;
+  get: SelectorGetter<ValueType, ScopedStateKey>;
+}) => {
+  return selectorFamily<ValueType, ScopedStateKey>({
+    key,
+    get,
+  });
+};

front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyState.ts

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

front/src/modules/ui/utilities/recoil-scope/utils/getScopedSelector.ts

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

front/src/modules/ui/utilities/recoil-scope/utils/getScopedState.ts

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

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

@@ -0,0 +1,15 @@
+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();
+};

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

@@ -0,0 +1,13 @@
+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();
+};

front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotValue.ts

@@ -0,0 +1,8 @@
+import { RecoilState, RecoilValueReadOnly, Snapshot } from 'recoil';
+
+export const getSnapshotValue = <StateType>(
+  snapshot: Snapshot,
+  state: RecoilState<StateType> | RecoilValueReadOnly<StateType>,
+) => {
+  return snapshot.getLoadable(state).getValue();
+};