Refactor sortsOrderBy & filtersWhere on CompanyTable & PeopleTable (#2064)

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -9,9 +9,6 @@ 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 { filtersWhereScopedSelector } from '@/ui/data/view-bar/states/selectors/filtersWhereScopedSelector';
-import { sortsOrderByScopedSelector } from '@/ui/data/view-bar/states/selectors/sortsOrderByScopedSelector';
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useTableViews } from '@/views/hooks/useTableViews';
 import {
   UpdateOneCompanyMutationVariables,
@@ -23,15 +20,6 @@ import { companiesFilters } from '~/pages/companies/companies-filters';
 import { companyAvailableSorts } from '~/pages/companies/companies-sorts';
 
 export const CompanyTable = () => {
-  const sortsOrderBy = useRecoilScopedValue(
-    sortsOrderByScopedSelector,
-    TableRecoilScopeContext,
-  );
-  const filtersWhere = useRecoilScopedValue(
-    filtersWhereScopedSelector,
-    TableRecoilScopeContext,
-  );
-
   const [updateEntityMutation] = useUpdateOneCompanyMutation();
   const upsertDataTableItem = useUpsertDataTableItem();
 
@@ -89,8 +77,6 @@ export const CompanyTable = () => {
         getRequestOptimisticEffectDefinition={
           getCompaniesOptimisticEffectDefinition
         }
-        orderBy={sortsOrderBy}
-        whereFilters={filtersWhere}
         filterDefinitionArray={companiesFilters}
         sortDefinitionArray={companyAvailableSorts}
         setContextMenuEntries={setContextMenuEntries}

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

@@ -9,9 +9,6 @@ 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 { filtersWhereScopedSelector } from '@/ui/data/view-bar/states/selectors/filtersWhereScopedSelector';
-import { sortsOrderByScopedSelector } from '@/ui/data/view-bar/states/selectors/sortsOrderByScopedSelector';
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useTableViews } from '@/views/hooks/useTableViews';
 import {
   UpdateOnePersonMutationVariables,
@@ -22,15 +19,6 @@ import { peopleFilters } from '~/pages/people/people-filters';
 import { peopleAvailableSorts } from '~/pages/people/people-sorts';
 
 export const PeopleTable = () => {
-  const sortsOrderBy = useRecoilScopedValue(
-    sortsOrderByScopedSelector,
-    TableRecoilScopeContext,
-  );
-  const filtersWhere = useRecoilScopedValue(
-    filtersWhereScopedSelector,
-    TableRecoilScopeContext,
-  );
-
   const [updateEntityMutation] = useUpdateOnePersonMutation();
   const upsertDataTableItem = useUpsertDataTableItem();
   const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport();
@@ -61,8 +49,6 @@ export const PeopleTable = () => {
         getRequestOptimisticEffectDefinition={
           getPeopleOptimisticEffectDefinition
         }
-        orderBy={sortsOrderBy}
-        whereFilters={filtersWhere}
         filterDefinitionArray={peopleFilters}
         setContextMenuEntries={setContextMenuEntries}
         setActionBarEntries={setActionBarEntries}

front/src/modules/ui/data/data-table/components/DataTableEffect.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import defaults from 'lodash/defaults';
 import { useRecoilCallback } from 'recoil';
 
 import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
@@ -11,9 +12,16 @@ import { savedSortsFamilyState } from '@/ui/data/view-bar/states/savedSortsFamil
 import { sortsScopedState } from '@/ui/data/view-bar/states/sortsScopedState';
 import { FilterDefinition } from '@/ui/data/view-bar/types/FilterDefinition';
 import { SortDefinition } from '@/ui/data/view-bar/types/SortDefinition';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
-import { SortOrder } from '~/generated/graphql';
+import {
+  SortOrder,
+  useGetCompaniesQuery,
+  useGetPeopleQuery,
+} from '~/generated/graphql';
 
+import { filtersWhereScopedSelector } from '../../view-bar/states/selectors/filtersWhereScopedSelector';
+import { sortsOrderByScopedSelector } from '../../view-bar/states/selectors/sortsOrderByScopedSelector';
 import { useSetDataTableData } from '../hooks/useSetDataTableData';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
 
@@ -21,25 +29,16 @@ export const DataTableEffect = ({
   useGetRequest,
   getRequestResultKey,
   getRequestOptimisticEffectDefinition,
-  orderBy = [
+
-    {
-      createdAt: SortOrder.Desc,
-    },
-  ],
-  whereFilters,
   filterDefinitionArray,
   setActionBarEntries,
   setContextMenuEntries,
   sortDefinitionArray,
 }: {
-  // TODO: type this
+  useGetRequest: typeof useGetCompaniesQuery | typeof useGetPeopleQuery;
-  useGetRequest: any;
   getRequestResultKey: string;
   getRequestOptimisticEffectDefinition: OptimisticEffectDefinition<any>;
-  // TODO: type this and replace with defaultSorts reduce should be applied to defaultSorts in this component not before
+
-  orderBy?: any;
-  // TODO: type this and replace with defaultFilters reduce should be applied to defaultFilters in this component not before
-  whereFilters?: any;
   filterDefinitionArray: FilterDefinition[];
   sortDefinitionArray: SortDefinition[];
   setActionBarEntries?: () => void;
@@ -48,15 +47,29 @@ export const DataTableEffect = ({
   const setDataTableData = useSetDataTableData();
   const { registerOptimisticEffect } = useOptimisticEffect();
 
+  let sortsOrderBy = useRecoilScopedValue(
+    sortsOrderByScopedSelector,
+    TableRecoilScopeContext,
+  );
+  sortsOrderBy = defaults(sortsOrderBy, [
+    {
+      createdAt: SortOrder.Desc,
+    },
+  ]);
+  const filtersWhere = useRecoilScopedValue(
+    filtersWhereScopedSelector,
+    TableRecoilScopeContext,
+  );
+
   useGetRequest({
-    variables: { orderBy, where: whereFilters },
+    variables: { orderBy: sortsOrderBy, where: filtersWhere },
     onCompleted: (data: any) => {
       const entities = data[getRequestResultKey] ?? [];
 
       setDataTableData(entities, filterDefinitionArray, sortDefinitionArray);
 
       registerOptimisticEffect({
-        variables: { orderBy, where: whereFilters },
+        variables: { orderBy: sortsOrderBy, where: filtersWhere },
         definition: getRequestOptimisticEffectDefinition,
       });
     },