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/views/hooks/useBoardViewFields.ts

@@ -1,6 +1,6 @@
-import { type Context } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { RecoilScopeContext } from '@/types/RecoilScopeContext';
 import { availableBoardCardFieldsScopedState } from '@/ui/board/states/availableBoardCardFieldsScopedState';
 import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
 import { savedBoardCardFieldsFamilyState } from '@/ui/board/states/savedBoardCardFieldsFamilyState';
@@ -35,23 +35,26 @@ const toViewFieldInput = (
 export const useBoardViewFields = ({
   objectId,
   fieldDefinitions,
-  scopeContext,
   skipFetch,
+  RecoilScopeContext,
 }: {
   objectId: 'company' | 'person';
   fieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
-  scopeContext: Context<string | null>;
   skipFetch?: boolean;
+  RecoilScopeContext: RecoilScopeContext;
 }) => {
   const currentViewId = useRecoilScopedValue(
     currentViewIdScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const [availableBoardCardFields, setAvailableBoardCardFields] =
-    useRecoilScopedState(availableBoardCardFieldsScopedState, scopeContext);
+    useRecoilScopedState(
+      availableBoardCardFieldsScopedState,
+      RecoilScopeContext,
+    );
   const [boardCardFields, setBoardCardFields] = useRecoilScopedState(
     boardCardFieldsScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const setSavedBoardCardFields = useSetRecoilState(
     savedBoardCardFieldsFamilyState(currentViewId),

front/src/modules/views/hooks/useBoardViews.ts

@@ -1,5 +1,4 @@
-import type { Context } from 'react';
-
+import { RecoilScopeContext } from '@/types/RecoilScopeContext';
 import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
 import type {
   ViewFieldDefinition,
@@ -18,41 +17,41 @@ import { useViewSorts } from './useViewSorts';
 export const useBoardViews = ({
   fieldDefinitions,
   objectId,
-  scopeContext,
+  RecoilScopeContext,
 }: {
   fieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
   objectId: 'company';
-  scopeContext: Context<string | null>;
+  RecoilScopeContext: RecoilScopeContext;
 }) => {
   const boardCardFields = useRecoilScopedValue(
     boardCardFieldsScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
-  const filters = useRecoilScopedValue(filtersScopedState, scopeContext);
-  const sorts = useRecoilScopedValue(sortsScopedState, scopeContext);
+  const filters = useRecoilScopedValue(filtersScopedState, RecoilScopeContext);
+  const sorts = useRecoilScopedValue(sortsScopedState, RecoilScopeContext);
 
   const { createView, deleteView, isFetchingViews, updateView } = useViews({
     objectId,
     onViewCreate: handleViewCreate,
     type: ViewType.Pipeline,
-    scopeContext,
+    RecoilScopeContext,
   });
 
   const { createViewFields, persistCardFields } = useBoardViewFields({
     objectId,
     fieldDefinitions,
-    scopeContext,
     skipFetch: isFetchingViews,
+    RecoilScopeContext,
   });
 
   const { createViewFilters, persistFilters } = useViewFilters({
-    scopeContext,
     skipFetch: isFetchingViews,
+    RecoilScopeContext,
   });
 
   const { createViewSorts, persistSorts } = useViewSorts({
-    scopeContext,
     skipFetch: isFetchingViews,
+    RecoilScopeContext,
   });
 
   async function handleViewCreate(viewId: string) {

front/src/modules/views/hooks/useTableViews.ts

@@ -33,7 +33,7 @@ export const useTableViews = ({
     objectId,
     onViewCreate: handleViewCreate,
     type: ViewType.Table,
-    scopeContext: TableRecoilScopeContext,
+    RecoilScopeContext: TableRecoilScopeContext,
   });
   const { createViewFields, persistColumns } = useTableViewFields({
     objectId,
@@ -41,11 +41,11 @@ export const useTableViews = ({
     skipFetch: isFetchingViews,
   });
   const { createViewFilters, persistFilters } = useViewFilters({
-    scopeContext: TableRecoilScopeContext,
+    RecoilScopeContext: TableRecoilScopeContext,
     skipFetch: isFetchingViews,
   });
   const { createViewSorts, persistSorts } = useViewSorts({
-    scopeContext: TableRecoilScopeContext,
+    RecoilScopeContext: TableRecoilScopeContext,
     skipFetch: isFetchingViews,
   });
 

front/src/modules/views/hooks/useViewFilters.ts

@@ -1,6 +1,7 @@
-import { Context, useCallback } from 'react';
+import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { RecoilScopeContext } from '@/types/RecoilScopeContext';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
@@ -18,23 +19,23 @@ import {
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const useViewFilters = ({
-  scopeContext,
+  RecoilScopeContext,
   skipFetch,
 }: {
-  scopeContext: Context<string | null>;
+  RecoilScopeContext: RecoilScopeContext;
   skipFetch?: boolean;
 }) => {
   const currentViewId = useRecoilScopedValue(
     currentViewIdScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const [filters, setFilters] = useRecoilScopedState(
     filtersScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const [availableFilters] = useRecoilScopedState(
     availableFiltersScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const [, setSavedFilters] = useRecoilState(
     savedFiltersFamilyState(currentViewId),

front/src/modules/views/hooks/useViewSorts.ts

@@ -1,6 +1,7 @@
-import { Context, useCallback } from 'react';
+import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
+import { RecoilScopeContext } from '@/types/RecoilScopeContext';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { availableSortsScopedState } from '@/ui/view-bar/states/availableSortsScopedState';
@@ -19,23 +20,23 @@ import {
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const useViewSorts = ({
-  scopeContext,
+  RecoilScopeContext,
   skipFetch,
 }: {
-  scopeContext: Context<string | null>;
+  RecoilScopeContext: RecoilScopeContext;
   skipFetch?: boolean;
 }) => {
   const currentViewId = useRecoilScopedValue(
     currentViewIdScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const [sorts, setSorts] = useRecoilScopedState(
     sortsScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const [availableSorts] = useRecoilScopedState(
     availableSortsScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const [, setSavedSorts] = useRecoilState(
     savedSortsFamilyState(currentViewId),

front/src/modules/views/hooks/useViews.ts

@@ -1,7 +1,7 @@
-import type { Context } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilCallback } from 'recoil';
 
+import { RecoilScopeContext } from '@/types/RecoilScopeContext';
 import { savedBoardCardFieldsFamilyState } from '@/ui/board/states/savedBoardCardFieldsFamilyState';
 import { savedTableColumnsFamilyState } from '@/ui/table/states/savedTableColumnsFamilyState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -24,21 +24,21 @@ import { GET_VIEWS } from '../graphql/queries/getViews';
 export const useViews = ({
   objectId,
   onViewCreate,
-  scopeContext,
+  RecoilScopeContext,
   type,
 }: {
   objectId: 'company' | 'person';
   onViewCreate?: (viewId: string) => Promise<void>;
-  scopeContext: Context<string | null>;
+  RecoilScopeContext: RecoilScopeContext;
   type: ViewType;
 }) => {
   const [currentViewId, setCurrentViewId] = useRecoilScopedState(
     currentViewIdScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
   const [views, setViews] = useRecoilScopedState(
     viewsScopedState,
-    scopeContext,
+    RecoilScopeContext,
   );
 
   const [createViewMutation] = useCreateViewMutation();