Fix filters and sorts on views (#2258)

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

@@ -7,17 +7,17 @@ import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/Opt
 import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { useView } from '@/views/hooks/useView';
-import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
 import {
   SortOrder,
   useGetCompaniesQuery,
   useGetPeopleQuery,
 } from '~/generated/graphql';
 
-import { filtersWhereScopedSelector } from '../../filter/states/selectors/filtersWhereScopedSelector';
 import { SortDefinition } from '../../sort/types/SortDefinition';
 import { useSetDataTableData } from '../hooks/useSetDataTableData';
 import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
+import { tablefiltersWhereScopedSelector } from '../states/selectors/tablefiltersWhereScopedSelector';
+import { tableSortsOrderByScopedSelector } from '../states/selectors/tableSortsOrderByScopedSelector';
 
 export const DataTableEffect = ({
   useGetRequest,
@@ -41,27 +41,30 @@ export const DataTableEffect = ({
   const setDataTableData = useSetDataTableData();
   const { registerOptimisticEffect } = useOptimisticEffect();
   const { setCurrentViewId } = useView();
-  const { currentViewSortsOrderBy } = useViewInternalStates();
 
-  const sortsOrderBy = defaults(currentViewSortsOrderBy, [
+  const tableSortsOrderBy = useRecoilScopedValue(
+    tableSortsOrderByScopedSelector,
+    TableRecoilScopeContext,
+  );
+  const sortsOrderBy = defaults(tableSortsOrderBy, [
     {
       createdAt: SortOrder.Desc,
     },
   ]);
-  const filtersWhere = useRecoilScopedValue(
-    filtersWhereScopedSelector,
+  const tablefiltersWhere = useRecoilScopedValue(
+    tablefiltersWhereScopedSelector,
     TableRecoilScopeContext,
   );
 
   useGetRequest({
-    variables: { orderBy: sortsOrderBy, where: filtersWhere },
+    variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },
     onCompleted: (data: any) => {
       const entities = data[getRequestResultKey] ?? [];
 
       setDataTableData(entities, filterDefinitionArray, sortDefinitionArray);
 
       registerOptimisticEffect({
-        variables: { orderBy: sortsOrderBy, where: filtersWhere },
+        variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },
         definition: getRequestOptimisticEffectDefinition,
       });
     },

front/src/modules/ui/data/data-table/states/selectors/tableSortsOrderByScopedSelector.ts

@@ -0,0 +1,16 @@
+import { selectorFamily } from 'recoil';
+
+import { reduceSortsToOrderBy } from '@/ui/data/sort/utils/helpers';
+import { SortOrder } from '~/generated/graphql';
+
+import { tableSortsScopedState } from '../tableSortsScopedState';
+
+export const tableSortsOrderByScopedSelector = selectorFamily({
+  key: 'tableSortsOrderByScopedSelector',
+  get:
+    (scopeId: string) =>
+    ({ get }) => {
+      const orderBy = reduceSortsToOrderBy(get(tableSortsScopedState(scopeId)));
+      return orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }];
+    },
+});

front/src/modules/ui/data/data-table/states/selectors/tablefiltersWhereScopedSelector.ts

@@ -0,0 +1,13 @@
+import { selectorFamily } from 'recoil';
+
+import { turnFilterIntoWhereClause } from '../../../filter/utils/turnFilterIntoWhereClause';
+import { tableFiltersScopedState } from '../tableFiltersScopedState';
+
+export const tablefiltersWhereScopedSelector = selectorFamily({
+  key: 'tablefiltersWhereScopedSelector',
+  get:
+    (scopeId: string) =>
+    ({ get }) => ({
+      AND: get(tableFiltersScopedState(scopeId)).map(turnFilterIntoWhereClause),
+    }),
+});

front/src/modules/ui/data/data-table/states/tableFiltersScopedState.ts

@@ -0,0 +1,8 @@
+import { atomFamily } from 'recoil';
+
+import { Filter } from '../../filter/types/Filter';
+
+export const tableFiltersScopedState = atomFamily<Filter[], string>({
+  key: 'tableFiltersScopedState',
+  default: [],
+});

front/src/modules/ui/data/data-table/states/tableSortsScopedState.ts

@@ -0,0 +1,8 @@
+import { atomFamily } from 'recoil';
+
+import { Sort } from '../../sort/types/Sort';
+
+export const tableSortsScopedState = atomFamily<Sort[], string>({
+  key: 'tableSortsScopedState',
+  default: [],
+});

front/src/modules/ui/data/filter/states/selectors/filtersWhereScopedSelector.ts

@@ -1,15 +0,0 @@
-import { selectorFamily } from 'recoil';
-
-import { turnFilterIntoWhereClause } from '../../utils/turnFilterIntoWhereClause';
-import { selectedFiltersScopedState } from '../selectedFiltersScopedState';
-
-export const filtersWhereScopedSelector = selectorFamily({
-  key: 'filtersWhereScopedSelector',
-  get:
-    (scopeId: string) =>
-    ({ get }) => ({
-      AND: get(selectedFiltersScopedState({ scopeId })).map(
-        turnFilterIntoWhereClause,
-      ),
-    }),
-});