2357 Refactor RecordTable to use the new scope architecture (#2407)

* create RecordTableScope

* use RecordTableScope

* working on useRecordTable hook

* add RecordTableScope to company-table

* add RecordTableScope to person-table

* add filter state and sort state

* add useSetRecordTableData to useRecordTable

* wip

* add setRecordTableData to useRecordTable

* update in RecordTableEffect

* fix bug

* getting rid of unnecessary context and hooks

* remove console.log

* wip

* fix bug by creating an init effect

* fix viewbar not in scope in company and people tables

* wip

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* modified according to comments

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

@@ -21,7 +21,9 @@ export const useViewFilters = (viewScopeId: string) => {
   });
   const apolloClient = useApolloClient();
 
-  const { currentViewFiltersState } = useViewScopedStates();
+  const { currentViewFiltersState } = useViewScopedStates({
+    customViewScopeId: viewScopeId,
+  });
 
   const persistViewFilters = useRecoilCallback(
     ({ snapshot, set }) =>

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

@@ -21,7 +21,9 @@ export const useViewSorts = (viewScopeId: string) => {
   });
   const apolloClient = useApolloClient();
 
-  const { currentViewSortsState } = useViewScopedStates();
+  const { currentViewSortsState } = useViewScopedStates({
+    customViewScopeId: viewScopeId,
+  });
 
   const persistViewSorts = useRecoilCallback(
     ({ snapshot, set }) =>

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

@@ -0,0 +1,39 @@
+export const useMoveViewColumns = () => {
+  const handleColumnMove = <T extends { position: number }>(
+    direction: 'left' | 'right',
+    currentArrayindex: number,
+    targetArray: T[],
+  ) => {
+    const targetArrayIndex =
+      direction === 'left' ? currentArrayindex - 1 : currentArrayindex + 1;
+    const targetArraySize = targetArray.length - 1;
+    if (
+      currentArrayindex >= 0 &&
+      targetArrayIndex >= 0 &&
+      currentArrayindex <= targetArraySize &&
+      targetArrayIndex <= targetArraySize
+    ) {
+      const currentEntity = targetArray[currentArrayindex];
+      const targetEntity = targetArray[targetArrayIndex];
+      const newArray = [...targetArray];
+
+      newArray[currentArrayindex] = {
+        ...targetEntity,
+        index: currentEntity.position,
+      };
+      newArray[targetArrayIndex] = {
+        ...currentEntity,
+        index: targetEntity.position,
+      };
+
+      return newArray.map((column, index) => ({
+        ...column,
+        position: index,
+      }));
+    }
+
+    return targetArray;
+  };
+
+  return { handleColumnMove };
+};