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
2023-11-09 17:45:58 +01:00
parent 0d4949484c
commit 588091d3dd
93 changed files with 871 additions and 875 deletions
--- a/front/src/modules/metadata/components/RecordTableContainer.tsx
+++ b/front/src/modules/metadata/components/RecordTableContainer.tsx
@ -1,22 +1,21 @@
 import styled from '@emotion/styled';
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useRecoilCallback } from 'recoil';

 import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
 import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
-import { TableContext } from '@/ui/object/record-table/contexts/TableContext';
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { TableOptionsDropdown } from '@/ui/object/record-table/options/components/TableOptionsDropdown';
-import { tableColumnsScopedState } from '@/ui/object/record-table/states/tableColumnsScopedState';
-import { tableFiltersScopedState } from '@/ui/object/record-table/states/tableFiltersScopedState';
-import { tableSortsScopedState } from '@/ui/object/record-table/states/tableSortsScopedState';
+import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
 import { ViewBar } from '@/views/components/ViewBar';
 import { useViewFields } from '@/views/hooks/internal/useViewFields';
+import { useView } from '@/views/hooks/useView';
 import { ViewScope } from '@/views/scopes/ViewScope';
 import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';

-import { useObjectMetadataItemInContext } from '../hooks/useObjectMetadataItemInContext';
+import { useFindOneObjectMetadataItem } from '../hooks/useFindOneObjectMetadataItem';
 import { useUpdateOneObject } from '../hooks/useUpdateOneObject';

 import { RecordTableEffect } from './RecordTableEffect';
@ -28,28 +27,29 @@ const StyledContainer = styled.div`
  overflow: auto;
 `;

-export const RecordTableContainer = () => {
-  const { columnDefinitions, foundObjectMetadataItem, objectNamePlural } =
-    useObjectMetadataItemInContext();
+export const RecordTableContainer = ({
+  objectNamePlural,
+}: {
+  objectNamePlural: string;
+}) => {
+  const { columnDefinitions } = useFindOneObjectMetadataItem({
+    objectNamePlural,
+  });

  const { updateOneObject } = useUpdateOneObject({
    objectNamePlural,
  });

-  const tableScopeId = foundObjectMetadataItem?.namePlural ?? '';
+  const tableScopeId = objectNamePlural ?? '';
  const viewScopeId = objectNamePlural ?? '';

  const { persistViewFields } = useViewFields(viewScopeId);

-  const setTableColumns = useSetRecoilState(
-    tableColumnsScopedState(tableScopeId),
-  );
+  const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({
+    recordTableScopeId: tableScopeId,
+  });

-  const setTableFilters = useSetRecoilState(
-    tableFiltersScopedState(tableScopeId),
-  );
-
-  const setTableSorts = useSetRecoilState(tableSortsScopedState(tableScopeId));
+  const { setEntityCountInCurrentView } = useView({ viewScopeId });

  const updateEntity = ({
    variables,
@ -83,11 +83,13 @@ export const RecordTableContainer = () => {
      }}
    >
      <StyledContainer>
-        <TableContext.Provider
-          value={{
-            onColumnsChange: useRecoilCallback(() => (columns) => {
-              persistViewFields(mapColumnDefinitionsToViewFields(columns));
-            }),
+        <RecordTableScope
+          recordTableScopeId={tableScopeId}
+          onColumnsChange={useRecoilCallback(() => (columns) => {
+            persistViewFields(mapColumnDefinitionsToViewFields(columns));
+          })}
+          onEntityCountChange={(entityCount) => {
+            setEntityCountInCurrentView(entityCount);
          }}
        >
          <ViewBar
@ -96,7 +98,7 @@ export const RecordTableContainer = () => {
          />
          <RecordTableEffect />
          <RecordTable updateEntityMutation={updateEntity} />
-        </TableContext.Provider>
+        </RecordTableScope>
      </StyledContainer>
    </ViewScope>
  );
--- a/front/src/modules/metadata/components/RecordTableEffect.tsx
+++ b/front/src/modules/metadata/components/RecordTableEffect.tsx
@ -1,29 +1,27 @@
 import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';

 import { turnFiltersIntoWhereClauseV2 } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2';
 import { turnSortsIntoOrderByV2 } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderByV2';
-import { useSetRecordTableData } from '@/ui/object/record-table/hooks/useSetRecordTableData';
-import { availableTableColumnsScopedState } from '@/ui/object/record-table/states/availableTableColumnsScopedState';
-import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { tableFiltersScopedState } from '@/ui/object/record-table/states/tableFiltersScopedState';
-import { tableSortsScopedState } from '@/ui/object/record-table/states/tableSortsScopedState';
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { useRecordTableScopedStates } from '@/ui/object/record-table/hooks/internal/useRecordTableScopedStates';
 import { useView } from '@/views/hooks/useView';
 import { ViewType } from '@/views/types/ViewType';

+import { useRecordTable } from '../../ui/object/record-table/hooks/useRecordTable';
 import { useFindManyObjects } from '../hooks/useFindManyObjects';
-import { useObjectMetadataItemInContext } from '../hooks/useObjectMetadataItemInContext';
+import { useFindOneObjectMetadataItem } from '../hooks/useFindOneObjectMetadataItem';

 export const RecordTableEffect = () => {
+  const { scopeId } = useRecordTable();
+
  const {
+    foundObjectMetadataItem,
    columnDefinitions,
    filterDefinitions,
    sortDefinitions,
-    foundObjectMetadataItem,
-    objectNamePlural,
-  } = useObjectMetadataItemInContext();
-
+  } = useFindOneObjectMetadataItem({
+    objectNamePlural: scopeId,
+  });
  const {
    setAvailableSortDefinitions,
    setAvailableFilterDefinitions,
@ -32,20 +30,15 @@ export const RecordTableEffect = () => {
    setViewObjectId,
  } = useView();

-  const setRecordTableData = useSetRecordTableData();
+  const { setRecordTableData, setAvailableTableColumns } = useRecordTable();

-  const tableFilters = useRecoilScopedValue(
-    tableFiltersScopedState,
-    TableRecoilScopeContext,
-  );
+  const { tableFiltersState, tableSortsState } = useRecordTableScopedStates();

-  const tableSorts = useRecoilScopedValue(
-    tableSortsScopedState,
-    TableRecoilScopeContext,
-  );
+  const tableFilters = useRecoilValue(tableFiltersState);
+  const tableSorts = useRecoilValue(tableSortsState);

  const { objects, loading } = useFindManyObjects({
-    objectNamePlural: objectNamePlural,
+    objectNamePlural: scopeId,
    filter: turnFiltersIntoWhereClauseV2(
      tableFilters,
      foundObjectMetadataItem?.fields ?? [],
@ -64,12 +57,6 @@ export const RecordTableEffect = () => {
    }
  }, [objects, setRecordTableData, loading]);

-  const tableScopeId = foundObjectMetadataItem?.namePlural ?? '';
-
-  const setAvailableTableColumns = useSetRecoilState(
-    availableTableColumnsScopedState(tableScopeId),
-  );
-
  useEffect(() => {
    if (!foundObjectMetadataItem) {
      return;
--- a/front/src/modules/metadata/components/RecordTablePage.tsx
+++ b/front/src/modules/metadata/components/RecordTablePage.tsx
@ -12,12 +12,9 @@ import { PageHeader } from '@/ui/layout/page/PageHeader';
 import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
 import { RecordTableActionBar } from '@/ui/object/record-table/action-bar/components/RecordTableActionBar';
 import { RecordTableContextMenu } from '@/ui/object/record-table/context-menu/components/RecordTableContextMenu';
-import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';

 import { useCreateOneObject } from '../hooks/useCreateOneObject';
 import { useFindOneObjectMetadataItem } from '../hooks/useFindOneObjectMetadataItem';
-import { ObjectMetadataItemScope } from '../scopes/ObjectMetadataItemScope';

 const StyledTableContainer = styled.div`
  display: flex;
@ -59,20 +56,11 @@ export const RecordTablePage = () => {
        <PageAddButton onClick={handleAddButtonClick} />
      </PageHeader>
      <PageBody>
-        <RecoilScope
-          scopeId={objectNamePlural}
-          CustomRecoilScopeContext={TableRecoilScopeContext}
-        >
-          <StyledTableContainer>
-            <ObjectMetadataItemScope
-              objectMetadataItemNamePlural={objectNamePlural}
-            >
-              <RecordTableContainer />
-            </ObjectMetadataItemScope>
-          </StyledTableContainer>
-          <RecordTableActionBar />
-          <RecordTableContextMenu />
-        </RecoilScope>
+        <StyledTableContainer>
+          <RecordTableContainer objectNamePlural={objectNamePlural} />
+        </StyledTableContainer>
+        <RecordTableActionBar />
+        <RecordTableContextMenu />
      </PageBody>
    </PageContainer>
  );
--- a/front/src/modules/metadata/hooks/useObjectMetadataItem.ts
+++ b/front/src/modules/metadata/hooks/useObjectMetadataItem.ts
@ -1,18 +0,0 @@
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-
-import { ObjectMetadataItemScopeInternalContext } from '../scopes/scope-internal-context/ObjectMetadataItemScopeInternalContext';
-
-type UseObjectMetadataItemProps = {
-  objectMetadataItemNamePlural?: string;
-};
-
-export const useObjectMetadataItem = (props?: UseObjectMetadataItemProps) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    ObjectMetadataItemScopeInternalContext,
-    props?.objectMetadataItemNamePlural,
-  );
-
-  return {
-    scopeId,
-  };
-};
--- a/front/src/modules/metadata/hooks/useObjectMetadataItemInContext.ts
+++ b/front/src/modules/metadata/hooks/useObjectMetadataItemInContext.ts
@ -1,34 +0,0 @@
-import { useContext } from 'react';
-
-import { ObjectMetadataItemScopeInternalContext } from '../scopes/scope-internal-context/ObjectMetadataItemScopeInternalContext';
-
-import { useFindOneObjectMetadataItem } from './useFindOneObjectMetadataItem';
-
-export const useObjectMetadataItemInContext = () => {
-  const context = useContext(ObjectMetadataItemScopeInternalContext);
-
-  if (!context) {
-    throw new Error(
-      'Could not find ObjectMetadataItemScopeInternalContext while in useObjectMetadataItemInContext',
-    );
-  }
-
-  const {
-    foundObjectMetadataItem,
-    loading,
-    columnDefinitions,
-    filterDefinitions,
-    sortDefinitions,
-  } = useFindOneObjectMetadataItem({
-    objectNamePlural: context.objectNamePlural,
-  });
-
-  return {
-    ...context,
-    foundObjectMetadataItem,
-    loading,
-    columnDefinitions,
-    filterDefinitions,
-    sortDefinitions,
-  };
-};
--- a/front/src/modules/metadata/hooks/useSetRecordTableData.ts
+++ b/front/src/modules/metadata/hooks/useSetRecordTableData.ts
@ -1,14 +1,14 @@
 import { useRecoilCallback } from 'recoil';

 import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
-import { useResetTableRowSelection } from '@/ui/object/record-table/hooks/useResetTableRowSelection';
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { isFetchingRecordTableDataState } from '@/ui/object/record-table/states/isFetchingRecordTableDataState';
 import { numberOfTableRowsState } from '@/ui/object/record-table/states/numberOfTableRowsState';
 import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
 import { useView } from '@/views/hooks/useView';

-export const useSetObjectRecordTableData = () => {
-  const resetTableRowSelection = useResetTableRowSelection();
+export const useSetRecordTableData = () => {
+  const { resetTableRowSelection } = useRecordTable();
  const { setEntityCountInCurrentView } = useView();

  return useRecoilCallback(
--- a/front/src/modules/metadata/scopes/ObjectMetadataItemScope.tsx
+++ b/front/src/modules/metadata/scopes/ObjectMetadataItemScope.tsx
@ -1,24 +0,0 @@
-import { ReactNode } from 'react';
-
-import { ObjectMetadataItemScopeInternalContext } from './scope-internal-context/ObjectMetadataItemScopeInternalContext';
-
-type ObjectMetadataItemScopeProps = {
-  children: ReactNode;
-  objectMetadataItemNamePlural: string;
-};
-
-export const ObjectMetadataItemScope = ({
-  children,
-  objectMetadataItemNamePlural,
-}: ObjectMetadataItemScopeProps) => {
-  return (
-    <ObjectMetadataItemScopeInternalContext.Provider
-      value={{
-        scopeId: objectMetadataItemNamePlural,
-        objectNamePlural: objectMetadataItemNamePlural,
-      }}
-    >
-      {children}
-    </ObjectMetadataItemScopeInternalContext.Provider>
-  );
-};
--- a/front/src/modules/metadata/scopes/scope-internal-context/ObjectMetadataItemScopeInternalContext.ts
+++ b/front/src/modules/metadata/scopes/scope-internal-context/ObjectMetadataItemScopeInternalContext.ts
@ -1,9 +0,0 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
-import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
-
-type ObjectMetadataItemScopeInternalContextProps = ScopedStateKey & {
-  objectNamePlural: string;
-};
-
-export const ObjectMetadataItemScopeInternalContext =
-  createScopeInternalContext<ObjectMetadataItemScopeInternalContextProps>();