Refator/sorts dropdown (#1568)

* WIP

* Fixed lint

* Ok for sorts

* Fixed on dropdown toggle

* Fix lint

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

@@ -7,8 +7,6 @@ import type {
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
-import type { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
-import type { SortType } from '@/ui/view-bar/types/interface';
 import { ViewType } from '~/generated/graphql';
 
 import { useBoardViewFields } from './useBoardViewFields';
@@ -16,15 +14,11 @@ import { useViewFilters } from './useViewFilters';
 import { useViews } from './useViews';
 import { useViewSorts } from './useViewSorts';
 
-export const useBoardViews = <Entity, SortField>({
-  availableFilters,
-  availableSorts,
+export const useBoardViews = ({
   fieldDefinitions,
   objectId,
   scopeContext,
 }: {
-  availableFilters: FilterDefinitionByEntity<Entity>[];
-  availableSorts: SortType<SortField>[];
   fieldDefinitions: ViewFieldDefinition<ViewFieldMetadata>[];
   objectId: 'company';
   scopeContext: Context<string | null>;
@@ -38,19 +32,20 @@ export const useBoardViews = <Entity, SortField>({
     type: ViewType.Pipeline,
     scopeContext,
   });
+
   useBoardViewFields({
     objectId,
     fieldDefinitions,
     scopeContext,
     skipFetch: isFetchingViews,
   });
+
   const { createViewFilters, persistFilters } = useViewFilters({
-    availableFilters,
     scopeContext,
     skipFetch: isFetchingViews,
   });
+
   const { createViewSorts, persistSorts } = useViewSorts({
-    availableSorts,
     scopeContext,
     skipFetch: isFetchingViews,
   });

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

@@ -5,8 +5,6 @@ import type { ColumnDefinition } from '@/ui/table/types/ColumnDefinition';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
-import type { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
-import type { SortType } from '@/ui/view-bar/types/interface';
 import { ViewType } from '~/generated/graphql';
 
 import { useTableViewFields } from './useTableViewFields';
@@ -14,14 +12,10 @@ import { useViewFilters } from './useViewFilters';
 import { useViews } from './useViews';
 import { useViewSorts } from './useViewSorts';
 
-export const useTableViews = <Entity, SortField>({
-  availableFilters,
-  availableSorts,
+export const useTableViews = ({
   objectId,
   columnDefinitions,
 }: {
-  availableFilters: FilterDefinitionByEntity<Entity>[];
-  availableSorts: SortType<SortField>[];
   objectId: 'company' | 'person';
   columnDefinitions: ColumnDefinition<ViewFieldMetadata>[];
 }) => {
@@ -47,12 +41,10 @@ export const useTableViews = <Entity, SortField>({
     skipFetch: isFetchingViews,
   });
   const { createViewFilters, persistFilters } = useViewFilters({
-    availableFilters,
     scopeContext: TableRecoilScopeContext,
     skipFetch: isFetchingViews,
   });
   const { createViewSorts, persistSorts } = useViewSorts({
-    availableSorts,
     scopeContext: TableRecoilScopeContext,
     skipFetch: isFetchingViews,
   });

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

@@ -3,12 +3,12 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { availableFiltersScopedState } from '@/ui/view-bar/states/availableFiltersScopedState';
 import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
 import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
 import { savedFiltersByKeyFamilySelector } from '@/ui/view-bar/states/selectors/savedFiltersByKeyFamilySelector';
 import type { Filter } from '@/ui/view-bar/types/Filter';
-import type { FilterDefinitionByEntity } from '@/ui/view-bar/types/FilterDefinitionByEntity';
 import {
   useCreateViewFiltersMutation,
   useDeleteViewFiltersMutation,
@@ -17,12 +17,10 @@ import {
 } from '~/generated/graphql';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
-export const useViewFilters = <Entity>({
-  availableFilters,
+export const useViewFilters = ({
   scopeContext,
   skipFetch,
 }: {
-  availableFilters: FilterDefinitionByEntity<Entity>[];
   scopeContext: Context<string | null>;
   skipFetch?: boolean;
 }) => {
@@ -34,6 +32,10 @@ export const useViewFilters = <Entity>({
     filtersScopedState,
     scopeContext,
   );
+  const [availableFilters] = useRecoilScopedState(
+    availableFiltersScopedState,
+    scopeContext,
+  );
   const [, setSavedFilters] = useRecoilState(
     savedFiltersFamilyState(currentViewId),
   );

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

@@ -3,11 +3,12 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { availableSortsScopedState } from '@/ui/view-bar/states/availableSortsScopedState';
 import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
 import { savedSortsByKeyFamilySelector } from '@/ui/view-bar/states/selectors/savedSortsByKeyFamilySelector';
 import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
-import type { SelectedSortType, SortType } from '@/ui/view-bar/types/interface';
+import { Sort } from '@/ui/view-bar/types/Sort';
 import {
   useCreateViewSortsMutation,
   useDeleteViewSortsMutation,
@@ -17,12 +18,10 @@ import {
 } from '~/generated/graphql';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
-export const useViewSorts = <SortField>({
-  availableSorts,
+export const useViewSorts = ({
   scopeContext,
   skipFetch,
 }: {
-  availableSorts: SortType<SortField>[];
   scopeContext: Context<string | null>;
   skipFetch?: boolean;
 }) => {
@@ -34,6 +33,10 @@ export const useViewSorts = <SortField>({
     sortsScopedState,
     scopeContext,
   );
+  const [availableSorts] = useRecoilScopedState(
+    availableSortsScopedState,
+    scopeContext,
+  );
   const [, setSavedSorts] = useRecoilState(
     savedSortsFamilyState(currentViewId),
   );
@@ -51,19 +54,21 @@ export const useViewSorts = <SortField>({
     onCompleted: (data) => {
       const nextSorts = data.viewSorts
         .map((viewSort) => {
-          const availableSort = availableSorts.find(
+          const foundCorrespondingSortDefinition = availableSorts.find(
             (sort) => sort.key === viewSort.key,
           );
 
-          return availableSort
-            ? {
-                ...availableSort,
-                label: viewSort.name,
-                order: viewSort.direction.toLowerCase(),
-              }
-            : undefined;
+          if (foundCorrespondingSortDefinition) {
+            return {
+              key: viewSort.key,
+              definition: foundCorrespondingSortDefinition,
+              direction: viewSort.direction.toLowerCase(),
+            } as Sort;
+          } else {
+            return undefined;
+          }
         })
-        .filter((sort): sort is SelectedSortType<SortField> => !!sort);
+        .filter((sort): sort is Sort => !!sort);
 
       if (!isDeeplyEqual(sorts, nextSorts)) {
         setSavedSorts(nextSorts);
@@ -77,15 +82,15 @@ export const useViewSorts = <SortField>({
   const [deleteViewSortsMutation] = useDeleteViewSortsMutation();
 
   const createViewSorts = useCallback(
-    (sorts: SelectedSortType<SortField>[], viewId = currentViewId) => {
+    (sorts: Sort[], viewId = currentViewId) => {
       if (!viewId || !sorts.length) return;
 
       return createViewSortsMutation({
         variables: {
           data: sorts.map((sort) => ({
             key: sort.key,
-            direction: sort.order as ViewSortDirection,
-            name: sort.label,
+            direction: sort.direction as ViewSortDirection,
+            name: sort.definition.label,
             viewId,
           })),
         },
@@ -95,7 +100,7 @@ export const useViewSorts = <SortField>({
   );
 
   const updateViewSorts = useCallback(
-    (sorts: SelectedSortType<SortField>[]) => {
+    (sorts: Sort[]) => {
       if (!currentViewId || !sorts.length) return;
 
       return Promise.all(
@@ -103,7 +108,7 @@ export const useViewSorts = <SortField>({
           updateViewSortMutation({
             variables: {
               data: {
-                direction: sort.order as ViewSortDirection,
+                direction: sort.direction as ViewSortDirection,
               },
               where: {
                 viewId_key: { key: sort.key, viewId: currentViewId },
@@ -141,7 +146,7 @@ export const useViewSorts = <SortField>({
     const sortsToUpdate = sorts.filter(
       (sort) =>
         savedSortsByKey[sort.key] &&
-        savedSortsByKey[sort.key].order !== sort.order,
+        savedSortsByKey[sort.key].direction !== sort.direction,
     );
     await updateViewSorts(sortsToUpdate);