feat: persist view filters and sorts on Update View button click (#1290)

* feat: add viewFilters table

Closes #1121

* feat: add Update View button + Create View dropdown

Closes #1124, #1289

* feat: add View Filter resolvers

* feat: persist view filters and sorts on Update View button click

Closes #1123

* refactor: code review

- Rename recoil selectors
- Rename filters `field` property to `key`

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

@@ -1,10 +1,9 @@
-import { useCallback, useEffect } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
+import { useCallback } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
-import {
-  sortsByKeyScopedState,
-  sortScopedState,
-} from '@/ui/filter-n-sort/states/sortScopedState';
+import { savedSortsByKeyScopedSelector } from '@/ui/filter-n-sort/states/savedSortsByKeyScopedSelector';
+import { savedSortsScopedState } from '@/ui/filter-n-sort/states/savedSortsScopedState';
+import { sortsScopedState } from '@/ui/filter-n-sort/states/sortsScopedState';
 import type {
   SelectedSortType,
   SortType,
@@ -20,8 +19,7 @@ import {
   useUpdateViewSortMutation,
   ViewSortDirection,
 } from '~/generated/graphql';
-
-import { GET_VIEW_SORTS } from '../graphql/queries/getViewSorts';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const useViewSorts = <SortField>({
   availableSorts,
@@ -32,20 +30,18 @@ export const useViewSorts = <SortField>({
     currentTableViewIdState,
     TableRecoilScopeContext,
   );
-  const [, setSorts] = useRecoilScopedState(
-    sortScopedState,
+  const [sorts, setSorts] = useRecoilScopedState(
+    sortsScopedState,
     TableRecoilScopeContext,
   );
-  const sortsByKey = useRecoilScopedValue(
-    sortsByKeyScopedState,
-    TableRecoilScopeContext,
+  const [, setSavedSorts] = useRecoilState(
+    savedSortsScopedState(currentViewId),
+  );
+  const savedSortsByKey = useRecoilValue(
+    savedSortsByKeyScopedSelector(currentViewId),
   );
 
-  useEffect(() => {
-    if (!currentViewId) setSorts([]);
-  }, [currentViewId, setSorts]);
-
-  useGetViewSortsQuery({
+  const { refetch } = useGetViewSortsQuery({
     skip: !currentViewId,
     variables: {
       where: {
@@ -53,23 +49,26 @@ export const useViewSorts = <SortField>({
       },
     },
     onCompleted: (data) => {
-      setSorts(
-        data.viewSorts
-          .map((viewSort) => {
-            const availableSort = availableSorts.find(
-              (sort) => sort.key === viewSort.key,
-            );
+      const nextSorts = data.viewSorts
+        .map((viewSort) => {
+          const availableSort = availableSorts.find(
+            (sort) => sort.key === viewSort.key,
+          );
 
-            return availableSort
-              ? {
-                  ...availableSort,
-                  label: viewSort.name,
-                  order: viewSort.direction.toLowerCase(),
-                }
-              : undefined;
-          })
-          .filter((sort): sort is SelectedSortType<SortField> => !!sort),
-      );
+          return availableSort
+            ? {
+                ...availableSort,
+                label: viewSort.name,
+                order: viewSort.direction.toLowerCase(),
+              }
+            : undefined;
+        })
+        .filter((sort): sort is SelectedSortType<SortField> => !!sort);
+
+      if (!isDeeplyEqual(sorts, nextSorts)) {
+        setSavedSorts(nextSorts);
+        setSorts(nextSorts);
+      }
     },
   });
 
@@ -90,7 +89,6 @@ export const useViewSorts = <SortField>({
             viewId: currentViewId,
           })),
         },
-        refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
       });
     },
     [createViewSortsMutation, currentViewId],
@@ -111,7 +109,6 @@ export const useViewSorts = <SortField>({
                 viewId_key: { key: sort.key, viewId: currentViewId },
               },
             },
-            refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
           }),
         ),
       );
@@ -130,45 +127,40 @@ export const useViewSorts = <SortField>({
             viewId: { equals: currentViewId },
           },
         },
-        refetchQueries: [getOperationName(GET_VIEW_SORTS) ?? ''],
       });
     },
     [currentViewId, deleteViewSortsMutation],
   );
 
-  const handleSortsChange = useCallback(
-    async (nextSorts: SelectedSortType<SortField>[]) => {
-      if (!currentViewId) return;
+  const persistSorts = useCallback(async () => {
+    if (!currentViewId) return;
 
-      setSorts(nextSorts);
+    const sortsToCreate = sorts.filter((sort) => !savedSortsByKey[sort.key]);
+    await createViewSorts(sortsToCreate);
 
-      const sortsToCreate = nextSorts.filter(
-        (nextSort) => !sortsByKey[nextSort.key],
-      );
-      await createViewSorts(sortsToCreate);
+    const sortsToUpdate = sorts.filter(
+      (sort) =>
+        savedSortsByKey[sort.key] &&
+        savedSortsByKey[sort.key].order !== sort.order,
+    );
+    await updateViewSorts(sortsToUpdate);
 
-      const sortsToUpdate = nextSorts.filter(
-        (nextSort) =>
-          sortsByKey[nextSort.key] &&
-          sortsByKey[nextSort.key].order !== nextSort.order,
-      );
-      await updateViewSorts(sortsToUpdate);
+    const sortKeys = sorts.map((sort) => sort.key);
+    const sortKeysToDelete = Object.keys(savedSortsByKey).filter(
+      (previousSortKey) => !sortKeys.includes(previousSortKey),
+    );
+    await deleteViewSorts(sortKeysToDelete);
 
-      const nextSortKeys = nextSorts.map((nextSort) => nextSort.key);
-      const sortKeysToDelete = Object.keys(sortsByKey).filter(
-        (previousSortKey) => !nextSortKeys.includes(previousSortKey),
-      );
-      return deleteViewSorts(sortKeysToDelete);
-    },
-    [
-      createViewSorts,
-      currentViewId,
-      deleteViewSorts,
-      setSorts,
-      sortsByKey,
-      updateViewSorts,
-    ],
-  );
+    return refetch();
+  }, [
+    currentViewId,
+    sorts,
+    createViewSorts,
+    updateViewSorts,
+    savedSortsByKey,
+    deleteViewSorts,
+    refetch,
+  ]);
 
-  return { handleSortsChange };
+  return { persistSorts };
 };