Refator/sorts dropdown (#1568)

* WIP

* Fixed lint

* Ok for sorts

* Fixed on dropdown toggle

* Fix lint

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);