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/people/hooks/usePersonTableContextMenuEntries.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 usePersonTableContextMenuEntries = () => {
   const createActivityForPeople = useCreateActivityForPeople();
 
   const setTableRowIds = useSetRecoilState(tableRowIdsState);
-  const resetRowSelection = useResetTableRowSelection();
+  const { resetTableRowSelection } = useRecordTable({
+    recordTableScopeId: 'people',
+  });
 
   const { data } = useGetFavoritesQuery();
   const favorites = data?.findFavorites;
@@ -48,7 +50,7 @@ export const usePersonTableContextMenuEntries = () => {
       !!selectedPersonId &&
       !!favorites?.find((favorite) => favorite.person?.id === selectedPersonId);
 
-    resetRowSelection();
+    resetTableRowSelection();
     if (isFavorite) deletePersonFavorite(selectedPersonId);
     else insertPersonFavorite(selectedPersonId);
   });
@@ -62,7 +64,7 @@ export const usePersonTableContextMenuEntries = () => {
       .getLoadable(selectedRowIdsSelector)
       .getValue();
 
-    resetRowSelection();
+    resetTableRowSelection();
 
     await deleteManyPerson({
       variables: {

front/src/modules/people/hooks/useSetPeopleRecordTable.ts

@@ -1,7 +1,7 @@
 import { useLocation } from 'react-router-dom';
 import { useRecoilCallback } from 'recoil';
 
-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';
@@ -18,7 +18,7 @@ import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState';
 import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
 
 export const useSetPeopleRecordTable = () => {
-  const resetTableRowSelection = useResetTableRowSelection();
+  const { resetTableRowSelection } = useRecordTable();
 
   const currentLocation = useLocation().pathname;
 

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

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { useSetRecoilState } from 'recoil';
 
 import { peopleAvailableFieldDefinitions } from '@/people/constants/peopleAvailableFieldDefinitions';
 import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic-effect-definitions/getPeopleOptimisticEffectDefinition';
@@ -9,15 +8,13 @@ import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
 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 { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
 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';
@@ -36,18 +33,17 @@ import PersonTableEffect from './PersonTableEffect';
 export const PersonTable = () => {
   const viewScopeId = 'person-table-view';
   const tableScopeId = 'people';
-  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] = useUpdateOnePersonMutation();
-  const upsertRecordTableItem = useUpsertRecordTableItem();
 
   const { persistViewFields } = useViewFields(viewScopeId);
 
@@ -73,6 +69,8 @@ export const PersonTable = () => {
   const { openPersonSpreadsheetImport: onImport } =
     useSpreadsheetPersonImport();
 
+  const { setEntityCountInCurrentView } = useView({ viewScopeId });
+
   const StyledContainer = styled.div`
     display: flex;
     flex-direction: column;
@@ -98,9 +96,11 @@ export const PersonTable = () => {
       }}
     >
       <StyledContainer>
-        <TableContext.Provider
-          value={{
-            onColumnsChange: handleColumnChange,
+        <RecordTableScope
+          recordTableScopeId={tableScopeId}
+          onColumnsChange={handleColumnChange}
+          onEntityCountChange={(entityCount) => {
+            setEntityCountInCurrentView(entityCount);
           }}
         >
           <ViewBar
@@ -126,7 +126,7 @@ export const PersonTable = () => {
               variables: UpdateOnePersonMutationVariables;
             }) => updatePerson(variables)}
           />
-        </TableContext.Provider>
+        </RecordTableScope>
       </StyledContainer>
     </ViewScope>
   );

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

@@ -1,10 +1,7 @@
 import { useEffect } from 'react';
 
 import { peopleAvailableFieldDefinitions } from '@/people/constants/peopleAvailableFieldDefinitions';
-import { availableTableColumnsScopedState } from '@/ui/object/record-table/states/availableTableColumnsScopedState';
-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 { useView } from '@/views/hooks/useView';
 import { ViewType } from '@/views/types/ViewType';
 import { personTableFilterDefinitions } from '~/pages/people/constants/personTableFilterDefinitions';
@@ -19,15 +16,7 @@ const PeopleTableEffect = () => {
     setViewObjectId,
   } = useView();
 
-  const [, setTableColumns] = useRecoilScopedState(
-    tableColumnsScopedState,
-    TableRecoilScopeContext,
-  );
-
-  const [, setAvailableTableColumns] = useRecoilScopedState(
-    availableTableColumnsScopedState,
-    TableRecoilScopeContext,
-  );
+  const { setAvailableTableColumns, setTableColumns } = useRecordTable();
 
   useEffect(() => {
     setAvailableSortDefinitions?.(personTableSortDefinitions);