Refactor/context and scopes (#1602)

* Put onImport in a context

* Refactored RecoilScopeContexts

* Refactored naming

* Fix tests

---------

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

front/src/modules/ui/view-bar/hooks/useFilterCurrentlyEdited.ts

@@ -1,16 +1,23 @@
-import { Context, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { filterDefinitionUsedInDropdownScopedState } from '../states/filterDefinitionUsedInDropdownScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';
 
-export function useFilterCurrentlyEdited(context: Context<string | null>) {
-  const [filters] = useRecoilScopedState(filtersScopedState, context);
+import { useViewBarContext } from './useViewBarContext';
+
+export function useFilterCurrentlyEdited() {
+  const { ViewBarRecoilScopeContext } = useViewBarContext();
+
+  const [filters] = useRecoilScopedState(
+    filtersScopedState,
+    ViewBarRecoilScopeContext,
+  );
 
   const [filterDefinitionUsedInDropdown] = useRecoilScopedState(
     filterDefinitionUsedInDropdownScopedState,
-    context,
+    ViewBarRecoilScopeContext,
   );
 
   return useMemo(() => {

front/src/modules/ui/view-bar/hooks/useRemoveFilter.ts

@@ -1,11 +1,17 @@
-import { Context } from 'react';
+import { useContext } from 'react';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
+import { ViewBarContext } from '../contexts/ViewBarContext';
 import { filtersScopedState } from '../states/filtersScopedState';
 
-export function useRemoveFilter(context: Context<string | null>) {
-  const [, setFilters] = useRecoilScopedState(filtersScopedState, context);
+export function useRemoveFilter() {
+  const { ViewBarRecoilScopeContext } = useContext(ViewBarContext);
+
+  const [, setFilters] = useRecoilScopedState(
+    filtersScopedState,
+    ViewBarRecoilScopeContext,
+  );
 
   return function removeFilter(filterKey: string) {
     setFilters((filters) => {

front/src/modules/ui/view-bar/hooks/useRemoveView.ts

@@ -1,19 +1,17 @@
-import { type Context, useContext } from 'react';
+import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 
-import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
+import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
 
 import { ViewBarContext } from '../contexts/ViewBarContext';
 import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
 import { viewsScopedState } from '../states/viewsScopedState';
 
-export const useRemoveView = ({
-  scopeContext,
-}: {
-  scopeContext: Context<string | null>;
-}) => {
-  const { onViewRemove } = useContext(ViewBarContext);
-  const recoilScopeId = useContextScopeId(scopeContext);
+export const useRemoveView = () => {
+  const { onViewRemove, ViewBarRecoilScopeContext } =
+    useContext(ViewBarContext);
+
+  const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext);
 
   const removeView = useRecoilCallback(
     ({ set, snapshot }) =>

front/src/modules/ui/view-bar/hooks/useUpsertFilter.ts

@@ -1,4 +1,3 @@
-import { Context } from 'react';
 import { produce } from 'immer';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -6,8 +5,15 @@ import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoi
 import { filtersScopedState } from '../states/filtersScopedState';
 import { Filter } from '../types/Filter';
 
-export function useUpsertFilter(context: Context<string | null>) {
-  const [, setFilters] = useRecoilScopedState(filtersScopedState, context);
+import { useViewBarContext } from './useViewBarContext';
+
+export function useUpsertFilter() {
+  const { ViewBarRecoilScopeContext } = useViewBarContext();
+
+  const [, setFilters] = useRecoilScopedState(
+    filtersScopedState,
+    ViewBarRecoilScopeContext,
+  );
 
   return function upsertFilter(filterToUpsert: Filter) {
     setFilters((filters) => {

front/src/modules/ui/view-bar/hooks/useUpsertView.ts

@@ -1,9 +1,9 @@
-import { type Context, useContext } from 'react';
+import { useContext } from 'react';
 import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
 import { v4 } from 'uuid';
 
-import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
 
 import { ViewBarContext } from '../contexts/ViewBarContext';
 import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
@@ -16,16 +16,19 @@ import { sortsScopedState } from '../states/sortsScopedState';
 import { viewEditModeState } from '../states/viewEditModeState';
 import { viewsScopedState } from '../states/viewsScopedState';
 
-export const useUpsertView = ({
-  scopeContext,
-}: {
-  scopeContext: Context<string | null>;
-}) => {
-  const { onViewCreate, onViewEdit } = useContext(ViewBarContext);
-  const recoilScopeId = useContextScopeId(scopeContext);
+export const useUpsertView = () => {
+  const { onViewCreate, onViewEdit, ViewBarRecoilScopeContext } =
+    useContext(ViewBarContext);
+  const recoilScopeId = useRecoilScopeId(ViewBarRecoilScopeContext);
 
-  const filters = useRecoilScopedValue(filtersScopedState, scopeContext);
-  const sorts = useRecoilScopedValue(sortsScopedState, scopeContext);
+  const filters = useRecoilScopedValue(
+    filtersScopedState,
+    ViewBarRecoilScopeContext,
+  );
+  const sorts = useRecoilScopedValue(
+    sortsScopedState,
+    ViewBarRecoilScopeContext,
+  );
   const viewEditMode = useRecoilValue(viewEditModeState);
   const resetViewEditMode = useResetRecoilState(viewEditModeState);
 

front/src/modules/ui/view-bar/hooks/useViewBarContext.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { ViewBarContext } from '../contexts/ViewBarContext';
+
+export const useViewBarContext = () => {
+  return useContext(ViewBarContext);
+};