Fix filters and sorts on views (#2258)

front/src/modules/companies/components/HooksCompanyBoardEffect.tsx

@@ -28,8 +28,7 @@ export const HooksCompanyBoardEffect = () => {
     setCurrentViewId,
   } = useView();
 
-  const { currentViewFilters, currentViewSortsOrderBy } =
+  const { currentViewFilters } = useViewInternalStates();
-    useViewInternalStates();
 
   useEffect(() => {
     setAvailableFilters(opportunitiesBoardOptions.filters);
@@ -72,7 +71,6 @@ export const HooksCompanyBoardEffect = () => {
     useGetPipelineProgressQuery({
       variables: {
         where: whereFilters,
-        orderBy: currentViewSortsOrderBy,
       },
       onCompleted: (data) => {
         const pipelineProgresses = data?.findManyPipelineProgress || [];

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

@@ -4,6 +4,8 @@ import { companiesAvailableFieldDefinitions } from '@/companies/constants/compan
 import { availableTableColumnsScopedState } from '@/ui/data/data-table/states/availableTableColumnsScopedState';
 import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
 import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
+import { tableFiltersScopedState } from '@/ui/data/data-table/states/tableFiltersScopedState';
+import { tableSortsScopedState } from '@/ui/data/data-table/states/tableSortsScopedState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useView } from '@/views/hooks/useView';
 import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
@@ -19,13 +21,24 @@ const CompanyTableEffect = () => {
     setViewType,
     setViewObjectId,
   } = useView();
-  const { currentViewFields } = useViewInternalStates();
+  const { currentViewFields, currentViewSorts, currentViewFilters } =
+    useViewInternalStates();
 
   const [, setTableColumns] = useRecoilScopedState(
     tableColumnsScopedState,
     TableRecoilScopeContext,
   );
 
+  const [, setTableSorts] = useRecoilScopedState(
+    tableSortsScopedState,
+    TableRecoilScopeContext,
+  );
+
+  const [, setTableFilters] = useRecoilScopedState(
+    tableFiltersScopedState,
+    TableRecoilScopeContext,
+  );
+
   const [, setAvailableTableColumns] = useRecoilScopedState(
     availableTableColumnsScopedState,
     TableRecoilScopeContext,
@@ -54,6 +67,24 @@ const CompanyTableEffect = () => {
     }
   }, [currentViewFields, setTableColumns]);
 
+  useEffect(() => {
+    if (currentViewSorts) {
+      setTableSorts(currentViewSorts);
+    }
+  }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
+
+  useEffect(() => {
+    if (currentViewFilters) {
+      setTableFilters(currentViewFilters);
+    }
+  }, [
+    currentViewFields,
+    currentViewFilters,
+    setTableColumns,
+    setTableFilters,
+    setTableSorts,
+  ]);
+
   return <></>;
 };
 

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(
+  const tablefiltersWhere = useRecoilScopedValue(
-    filtersWhereScopedSelector,
+    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,
-      ),
-    }),
-});

front/src/modules/views/hooks/internal/useViewFields.ts

@@ -4,6 +4,7 @@ import { useRecoilCallback } from 'recoil';
 
 import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
 import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
+import { GET_VIEW_FIELDS } from '@/views/graphql/queries/getViewFields';
 import { GET_VIEWS } from '@/views/graphql/queries/getViews';
 import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
 import { savedViewFieldByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewFieldByKeyScopedFamilySelector';
@@ -13,8 +14,6 @@ import {
   useUpdateViewFieldMutation,
 } from '~/generated/graphql';
 
-import { GET_VIEW_FIELDS } from '../../graphql/queries/getViewFields';
-
 export const toViewFieldInput = (
   objectId: string,
   fieldDefinition: ColumnDefinition<FieldMetadata>,

front/src/modules/views/hooks/useViewInternalStates.ts

@@ -23,7 +23,6 @@ import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedF
 import { canPersistViewFiltersScopedFamilySelector } from '../states/selectors/canPersistViewFiltersScopedFamilySelector';
 import { canPersistViewSortsScopedFamilySelector } from '../states/selectors/canPersistViewSortsScopedFamilySelector';
 import { currentViewScopedSelector } from '../states/selectors/currentViewScopedSelector';
-import { currentViewSortsOrderByScopedFamilySelector } from '../states/selectors/currentViewSortsOrderByScopedFamilySelector';
 import { savedViewFieldByKeyScopedFamilySelector } from '../states/selectors/savedViewFieldByKeyScopedFamilySelector';
 import { savedViewFiltersByKeyScopedFamilySelector } from '../states/selectors/savedViewFiltersByKeyScopedFamilySelector';
 import { savedViewSortsByKeyScopedFamilySelector } from '../states/selectors/savedViewSortsByKeyScopedFamilySelector';
@@ -108,13 +107,6 @@ export const useViewInternalStates = (
     }),
   );
 
-  const currentViewSortsOrderBy = useRecoilValue(
-    currentViewSortsOrderByScopedFamilySelector({
-      viewScopeId: scopeId,
-      viewId: familyItemId,
-    }),
-  );
-
   // ViewFilters
   const [currentViewFilters, setCurrentViewFilters] =
     useRecoilScopedFamilyState(
@@ -215,7 +207,6 @@ export const useViewInternalStates = (
     savedViewSortsByKey,
     setSavedViewSorts,
     canPersistSorts,
-    currentViewSortsOrderBy,
 
     availableFilters,
     setAvailableFilters,

front/src/modules/views/states/selectors/currentViewSortsOrderByScopedFamilySelector.ts

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