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/companies/hooks/useCompanyTableContextMenuEntries.tsx
+++ b/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx
@ -11,7 +11,7 @@ import {
 } from '@/ui/display/icon';
 import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
 import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
-import { useResetTableRowSelection } from '@/ui/object/record-table/hooks/useResetTableRowSelection';
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { selectedRowIdsSelector } from '@/ui/object/record-table/states/selectors/selectedRowIdsSelector';
 import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
 import {
@ -30,7 +30,9 @@ export const useCompanyTableContextMenuEntries = () => {
  const createActivityForCompany = useCreateActivityForCompany();

  const setTableRowIds = useSetRecoilState(tableRowIdsState);
-  const resetRowSelection = useResetTableRowSelection();
+  const { resetTableRowSelection } = useRecordTable({
+    recordTableScopeId: 'companies',
+  });

  const { data } = useGetFavoritesQuery();
  const favorites = data?.findFavorites;
@ -50,7 +52,7 @@ export const useCompanyTableContextMenuEntries = () => {
        (favorite) => favorite.company?.id === selectedCompanyId,
      );

-    resetRowSelection();
+    resetTableRowSelection();
    if (isFavorite) deleteCompanyFavorite(selectedCompanyId);
    else insertCompanyFavorite(selectedCompanyId);
  });
@ -64,7 +66,7 @@ export const useCompanyTableContextMenuEntries = () => {
      .getLoadable(selectedRowIdsSelector)
      .getValue();

-    resetRowSelection();
+    resetTableRowSelection();

    await deleteManyCompany({
      variables: {
--- a/front/src/modules/companies/hooks/useDeleteCompanies.ts
+++ b/front/src/modules/companies/hooks/useDeleteCompanies.ts
@ -1,57 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilState, useRecoilValue } from 'recoil';
-
-import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
-import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
-import { useResetTableRowSelection } from '@/ui/object/record-table/hooks/useResetTableRowSelection';
-import { selectedRowIdsSelector } from '@/ui/object/record-table/states/selectors/selectedRowIdsSelector';
-import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
-import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
-
-export const useDeleteSelectedComapnies = () => {
-  const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
-
-  const resetRowSelection = useResetTableRowSelection();
-
-  const [deleteCompanies] = useDeleteManyCompaniesMutation({
-    refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
-  });
-  const { performOptimisticEvict } = useOptimisticEvict();
-
-  const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
-
-  const deleteSelectedCompanies = async () => {
-    const rowIdsToDelete = selectedRowIds;
-
-    resetRowSelection();
-
-    await deleteCompanies({
-      variables: {
-        ids: rowIdsToDelete,
-      },
-      optimisticResponse: {
-        __typename: 'Mutation',
-        deleteManyCompany: {
-          count: rowIdsToDelete.length,
-        },
-      },
-      update: (cache) => {
-        setTableRowIds(
-          tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
-        );
-
-        rowIdsToDelete.forEach((companyId) => {
-          cache.evict({
-            id: cache.identify({ __typename: 'Company', id: companyId }),
-          });
-
-          performOptimisticEvict('PipelineProgress', 'companyId', companyId);
-
-          cache.gc();
-        });
-      },
-    });
-  };
-
-  return deleteSelectedCompanies;
-};
--- a/front/src/modules/companies/table/components/CompanyTable.tsx
+++ b/front/src/modules/companies/table/components/CompanyTable.tsx
@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useRecoilCallback, useSetRecoilState } from 'recoil';
+import { useRecoilCallback } from 'recoil';

 import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
 import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/optimistic-effect-definitions/getCompaniesOptimisticEffectDefinition';
@ -8,14 +8,12 @@ import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCom
 import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
 import { RecordTableEffect } from '@/ui/object/record-table/components/RecordTableEffect';
 import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
-import { TableContext } from '@/ui/object/record-table/contexts/TableContext';
-import { useUpsertRecordTableItem } from '@/ui/object/record-table/hooks/useUpsertRecordTableItem';
+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';
@ -42,21 +40,21 @@ const StyledContainer = styled.div`
 export const CompanyTable = () => {
  const viewScopeId = 'company-table-view';
  const tableScopeId = 'companies';
-  const setTableColumns = useSetRecoilState(
-    tableColumnsScopedState(tableScopeId),
-  );

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

  const [updateEntityMutation] = useUpdateOneCompanyMutation();
-  const upsertRecordTableItem = useUpsertRecordTableItem();

  const [getWorkspaceMember] = useGetWorkspaceMembersLazyQuery();
  const { persistViewFields } = useViewFields(viewScopeId);
+  const { setEntityCountInCurrentView } = useView({ viewScopeId });

  const { setContextMenuEntries, setActionBarEntries } =
    useCompanyTableContextMenuEntries();
@ -112,12 +110,14 @@ export const CompanyTable = () => {
      }}
    >
      <StyledContainer>
-        <TableContext.Provider
-          value={{
-            onColumnsChange: useRecoilCallback(() => (columns) => {
-              persistViewFields(mapColumnDefinitionsToViewFields(columns));
-            }),
-          }}
+        <RecordTableScope
+          recordTableScopeId={tableScopeId}
+          onColumnsChange={useRecoilCallback(() => (columns) => {
+            persistViewFields(mapColumnDefinitionsToViewFields(columns));
+          })}
+          onEntityCountChange={useRecoilCallback(() => (entityCount) => {
+            setEntityCountInCurrentView(entityCount);
+          })}
        >
          <ViewBar
            optionsDropdownButton={<TableOptionsDropdown onImport={onImport} />}
@ -142,7 +142,7 @@ export const CompanyTable = () => {
              variables: UpdateOneCompanyMutationVariables;
            }) => updateCompany(variables)}
          />
-        </TableContext.Provider>
+        </RecordTableScope>
      </StyledContainer>
    </ViewScope>
  );
--- a/front/src/modules/companies/table/components/CompanyTableEffect.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableEffect.tsx
@ -1,9 +1,7 @@
 import { useEffect } from 'react';

 import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
-import { availableTableColumnsScopedState } from '@/ui/object/record-table/states/availableTableColumnsScopedState';
-import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
 import { useView } from '@/views/hooks/useView';
 import { ViewType } from '@/views/types/ViewType';
 import { companyTableFilterDefinitions } from '~/pages/companies/constants/companyTableFilterDefinitions';
@ -18,10 +16,7 @@ const CompanyTableEffect = () => {
    setViewObjectId,
  } = useView();

-  const [, setAvailableTableColumns] = useRecoilScopedState(
-    availableTableColumnsScopedState,
-    TableRecoilScopeContext,
-  );
+  const { setAvailableTableColumns } = useRecordTable();

  useEffect(() => {
    setAvailableSortDefinitions?.(companyTableSortDefinitions);
--- a/front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
@ -1,19 +1,12 @@
 import { useEffect } from 'react';

 import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
-import { useSetRecordTableData } from '@/ui/object/record-table/hooks/useSetRecordTableData';
-import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
-import { tableColumnsScopedState } from '@/ui/object/record-table/states/tableColumnsScopedState';
-import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';

 import { mockedCompaniesData } from './companies-mock-data';

 export const CompanyTableMockDataEffect = () => {
-  const [, setTableColumns] = useRecoilScopedState(
-    tableColumnsScopedState,
-    TableRecoilScopeContext,
-  );
-  const setRecordTableData = useSetRecordTableData();
+  const { setRecordTableData, setTableColumns } = useRecordTable();

  useEffect(() => {
    setRecordTableData(mockedCompaniesData);
--- a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx
+++ b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx
@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
 import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
 import { TableOptionsDropdown } from '@/ui/object/record-table/options/components/TableOptionsDropdown';
+import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
 import { ViewBar } from '@/views/components/ViewBar';
 import { ViewScope } from '@/views/scopes/ViewScope';
 import { useUpdateOneCompanyMutation } from '~/generated/graphql';
@ -21,14 +22,20 @@ export const CompanyTableMockMode = () => {
  return (
    <StyledContainer>
      <ViewScope viewScopeId="company-table-mock-mode">
-        <CompanyTableEffect />
-        <CompanyTableMockDataEffect />
-        <ViewBar
-          optionsDropdownButton={<TableOptionsDropdown />}
-          optionsDropdownScopeId={TableOptionsDropdownId}
-        />
+        <RecordTableScope
+          recordTableScopeId="company-table-mock-mode-table"
+          onColumnsChange={() => {}}
+          onEntityCountChange={() => {}}
+        >
+          <CompanyTableEffect />
+          <CompanyTableMockDataEffect />
+          <ViewBar
+            optionsDropdownButton={<TableOptionsDropdown />}
+            optionsDropdownScopeId={TableOptionsDropdownId}
+          />

-        <RecordTable updateEntityMutation={useUpdateOneCompanyMutation} />
+          <RecordTable updateEntityMutation={useUpdateOneCompanyMutation} />
+        </RecordTableScope>
      </ViewScope>
    </StyledContainer>
  );