Improve viewbar api (#2233)

* create scopes

* fix import bug

* add useView hook

* wip

* wip

* currentViewId is now retrieved via useView

* working on sorts with useView

* refactor in progress

* refactor in progress

* refactor in progress

* refactor in progress

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* fix code

* fix code

* wip

* push

* Fix issue dependencies

* Fix resize

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

front/src/modules/people/table/components/PeopleTable.tsx

@@ -1,15 +1,12 @@
-import { peopleAvailableColumnDefinitions } from '@/people/constants/peopleAvailableColumnDefinitions';
 import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic-effect-definitions/getPeopleOptimisticEffectDefinition';
 import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
 import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
-import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
 import { DataTable } from '@/ui/data/data-table/components/DataTable';
 import { DataTableEffect } from '@/ui/data/data-table/components/DataTableEffect';
 import { TableContext } from '@/ui/data/data-table/contexts/TableContext';
 import { useUpsertDataTableItem } from '@/ui/data/data-table/hooks/useUpsertDataTableItem';
-import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { ViewBarContext } from '@/ui/data/view-bar/contexts/ViewBarContext';
-import { useTableViews } from '@/views/hooks/useTableViews';
+import { SortScope } from '@/ui/data/sort/scopes/SortScope';
+import { ViewScope } from '@/views/scopes/ViewScope';
 import {
   UpdateOnePersonMutationVariables,
   useGetPeopleQuery,
@@ -21,68 +18,54 @@ import { peopleAvailableSorts } from '~/pages/people/people-sorts';
 export const PeopleTable = () => {
   const [updateEntityMutation] = useUpdateOnePersonMutation();
   const upsertDataTableItem = useUpsertDataTableItem();
-  const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
 
-  const {
-    createView,
-    deleteView,
-    persistColumns,
-    submitCurrentView,
-    updateView,
-  } = useTableViews({
-    objectId: 'person',
-    columnDefinitions: peopleAvailableColumnDefinitions,
-  });
+  const tableViewScopeId = 'people-table';
 
   const { setContextMenuEntries } = usePersonTableContextMenuEntries();
   const { setActionBarEntries } = usePersonTableActionBarEntries();
 
-  const handleImport = () => {
-    openPersonSpreadsheetImport();
-  };
-
   return (
-    <TableContext.Provider value={{ onColumnsChange: persistColumns }}>
-      <DataTableEffect
-        getRequestResultKey="people"
-        useGetRequest={useGetPeopleQuery}
-        getRequestOptimisticEffectDefinition={
-          getPeopleOptimisticEffectDefinition
-        }
-        filterDefinitionArray={peopleFilters}
-        setContextMenuEntries={setContextMenuEntries}
-        setActionBarEntries={setActionBarEntries}
-        sortDefinitionArray={peopleAvailableSorts}
-      />
-      <ViewBarContext.Provider
-        value={{
-          defaultViewName: 'All People',
-          onCurrentViewSubmit: submitCurrentView,
-          onViewCreate: createView,
-          onViewEdit: updateView,
-          onViewRemove: deleteView,
-          onImport: handleImport,
-          ViewBarRecoilScopeContext: TableRecoilScopeContext,
-        }}
-      >
-        <DataTable
-          updateEntityMutation={({
-            variables,
-          }: {
-            variables: UpdateOnePersonMutationVariables;
-          }) =>
-            updateEntityMutation({
+    <ViewScope viewScopeId={tableViewScopeId}>
+      <SortScope sortScopeId={tableViewScopeId}>
+        <TableContext.Provider
+          value={{
+            onColumnsChange: () => {
+              // eslint-disable-next-line no-console
+              console.log('persist columns');
+            },
+          }}
+        >
+          <DataTableEffect
+            getRequestResultKey="people"
+            useGetRequest={useGetPeopleQuery}
+            getRequestOptimisticEffectDefinition={
+              getPeopleOptimisticEffectDefinition
+            }
+            filterDefinitionArray={peopleFilters}
+            setContextMenuEntries={setContextMenuEntries}
+            setActionBarEntries={setActionBarEntries}
+            sortDefinitionArray={peopleAvailableSorts}
+          />
+
+          <DataTable
+            updateEntityMutation={({
               variables,
-              onCompleted: (data) => {
-                if (!data.updateOnePerson) {
-                  return;
-                }
-                upsertDataTableItem(data.updateOnePerson);
-              },
-            })
-          }
-        />
-      </ViewBarContext.Provider>
-    </TableContext.Provider>
+            }: {
+              variables: UpdateOnePersonMutationVariables;
+            }) =>
+              updateEntityMutation({
+                variables,
+                onCompleted: (data) => {
+                  if (!data.updateOnePerson) {
+                    return;
+                  }
+                  upsertDataTableItem(data.updateOnePerson);
+                },
+              })
+            }
+          />
+        </TableContext.Provider>
+      </SortScope>
+    </ViewScope>
   );
 };