feat: persist board card fields (#1566)

Closes #1538

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

@@ -1,7 +1,10 @@
 import { type Context } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { availableBoardCardFieldsScopedState } from '@/ui/board/states/availableBoardCardFieldsScopedState';
 import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
+import { savedBoardCardFieldsFamilyState } from '@/ui/board/states/savedBoardCardFieldsFamilyState';
+import { savedBoardCardFieldsByKeyFamilySelector } from '@/ui/board/states/selectors/savedBoardCardFieldsByKeyFamilySelector';
 import type {
   ViewFieldDefinition,
   ViewFieldMetadata,
@@ -13,6 +16,7 @@ import {
   SortOrder,
   useCreateViewFieldsMutation,
   useGetViewFieldsQuery,
+  useUpdateViewFieldMutation,
 } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
@@ -49,8 +53,15 @@ export const useBoardViewFields = ({
     boardCardFieldsScopedState,
     scopeContext,
   );
+  const setSavedBoardCardFields = useSetRecoilState(
+    savedBoardCardFieldsFamilyState(currentViewId),
+  );
+  const savedBoardCardFieldsByKey = useRecoilValue(
+    savedBoardCardFieldsByKeyFamilySelector(currentViewId),
+  );
 
   const [createViewFieldsMutation] = useCreateViewFieldsMutation();
+  const [updateViewFieldMutation] = useUpdateViewFieldMutation();
 
   const createViewFields = (
     fields: ViewFieldDefinition<ViewFieldMetadata>[],
@@ -68,6 +79,27 @@ export const useBoardViewFields = ({
     });
   };
 
+  const updateViewFields = (
+    fields: ViewFieldDefinition<ViewFieldMetadata>[],
+  ) => {
+    if (!currentViewId || !fields.length) return;
+
+    return Promise.all(
+      fields.map((field) =>
+        updateViewFieldMutation({
+          variables: {
+            data: {
+              isVisible: field.isVisible,
+            },
+            where: {
+              viewId_key: { key: field.key, viewId: currentViewId },
+            },
+          },
+        }),
+      ),
+    );
+  };
+
   const { refetch } = useGetViewFieldsQuery({
     skip: !currentViewId || skipFetch,
     variables: {
@@ -102,6 +134,7 @@ export const useBoardViewFields = ({
         .filter<ViewFieldDefinition<ViewFieldMetadata>>(assertNotNull);
 
       if (!isDeeplyEqual(boardCardFields, nextFields)) {
+        setSavedBoardCardFields(nextFields);
         setBoardCardFields(nextFields);
       }
 
@@ -110,4 +143,24 @@ export const useBoardViewFields = ({
       }
     },
   });
+
+  const persistCardFields = async () => {
+    if (!currentViewId) return;
+
+    const viewFieldsToCreate = boardCardFields.filter(
+      (field) => !savedBoardCardFieldsByKey[field.key],
+    );
+    await createViewFields(viewFieldsToCreate);
+
+    const viewFieldsToUpdate = boardCardFields.filter(
+      (field) =>
+        savedBoardCardFieldsByKey[field.key] &&
+        savedBoardCardFieldsByKey[field.key].isVisible !== field.isVisible,
+    );
+    await updateViewFields(viewFieldsToUpdate);
+
+    return refetch();
+  };
+
+  return { createViewFields, persistCardFields };
 };

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

@@ -1,5 +1,6 @@
 import type { Context } from 'react';
 
+import { boardCardFieldsScopedState } from '@/ui/board/states/boardCardFieldsScopedState';
 import type {
   ViewFieldDefinition,
   ViewFieldMetadata,
@@ -23,17 +24,21 @@ export const useBoardViews = ({
   objectId: 'company';
   scopeContext: Context<string | null>;
 }) => {
+  const boardCardFields = useRecoilScopedValue(
+    boardCardFieldsScopedState,
+    scopeContext,
+  );
   const filters = useRecoilScopedValue(filtersScopedState, scopeContext);
   const sorts = useRecoilScopedValue(sortsScopedState, scopeContext);
 
-  const { handleViewsChange, isFetchingViews } = useViews({
+  const { createView, deleteView, isFetchingViews, updateView } = useViews({
     objectId,
     onViewCreate: handleViewCreate,
     type: ViewType.Pipeline,
     scopeContext,
   });
 
-  useBoardViewFields({
+  const { createViewFields, persistCardFields } = useBoardViewFields({
     objectId,
     fieldDefinitions,
     scopeContext,
@@ -51,14 +56,16 @@ export const useBoardViews = ({
   });
 
   async function handleViewCreate(viewId: string) {
+    await createViewFields(boardCardFields, viewId);
     await createViewFilters(filters, viewId);
     await createViewSorts(sorts, viewId);
   }
 
-  const handleViewSubmit = async () => {
+  const submitCurrentView = async () => {
+    await persistCardFields();
     await persistFilters();
     await persistSorts();
   };
 
-  return { handleViewsChange, handleViewSubmit };
+  return { createView, deleteView, submitCurrentView, updateView };
 };

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

@@ -29,7 +29,7 @@ export const useTableViews = ({
   );
   const sorts = useRecoilScopedValue(sortsScopedState, TableRecoilScopeContext);
 
-  const { handleViewsChange, isFetchingViews } = useViews({
+  const { createView, deleteView, isFetchingViews, updateView } = useViews({
     objectId,
     onViewCreate: handleViewCreate,
     type: ViewType.Table,
@@ -55,11 +55,11 @@ export const useTableViews = ({
     await createViewSorts(sorts, viewId);
   }
 
-  const handleViewSubmit = async () => {
+  const submitCurrentView = async () => {
     await persistColumns();
     await persistFilters();
     await persistSorts();
   };
 
-  return { handleViewsChange, handleViewSubmit };
+  return { createView, deleteView, submitCurrentView, updateView };
 };

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

@@ -1,13 +1,13 @@
 import type { Context } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
 import { useRecoilCallback } from 'recoil';
 
+import { savedBoardCardFieldsFamilyState } from '@/ui/board/states/savedBoardCardFieldsFamilyState';
 import { savedTableColumnsFamilyState } from '@/ui/table/states/savedTableColumnsFamilyState';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
 import { savedFiltersFamilyState } from '@/ui/view-bar/states/savedFiltersFamilyState';
 import { savedSortsFamilyState } from '@/ui/view-bar/states/savedSortsFamilyState';
-import { viewsByIdScopedSelector } from '@/ui/view-bar/states/selectors/viewsByIdScopedSelector';
 import { viewsScopedState } from '@/ui/view-bar/states/viewsScopedState';
 import type { View } from '@/ui/view-bar/types/View';
 import {
@@ -19,6 +19,8 @@ import {
 } from '~/generated/graphql';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
+import { GET_VIEWS } from '../graphql/queries/getViews';
+
 export const useViews = ({
   objectId,
   onViewCreate,
@@ -38,7 +40,6 @@ export const useViews = ({
     viewsScopedState,
     scopeContext,
   );
-  const viewsById = useRecoilScopedValue(viewsByIdScopedSelector, scopeContext);
 
   const [createViewMutation] = useCreateViewMutation();
   const [updateViewMutation] = useUpdateViewMutation();
@@ -53,26 +54,34 @@ export const useViews = ({
           type,
         },
       },
+      refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
     });
 
     if (data?.view) await onViewCreate?.(data.view.id);
   };
 
-  const updateView = (view: View) =>
-    updateViewMutation({
+  const updateView = async (view: View) => {
+    await updateViewMutation({
       variables: {
         data: { name: view.name },
         where: { id: view.id },
       },
+      refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
     });
+  };
 
-  const deleteView = (viewId: string) =>
-    deleteViewMutation({ variables: { where: { id: viewId } } });
+  const deleteView = async (viewId: string) => {
+    await deleteViewMutation({
+      variables: { where: { id: viewId } },
+      refetchQueries: [getOperationName(GET_VIEWS) ?? ''],
+    });
+  };
 
   const handleResetSavedViews = useRecoilCallback(
     ({ reset }) =>
       () => {
         views.forEach((view) => {
+          reset(savedBoardCardFieldsFamilyState(view.id));
           reset(savedTableColumnsFamilyState(view.id));
           reset(savedFiltersFamilyState(view.id));
           reset(savedSortsFamilyState(view.id));
@@ -81,7 +90,7 @@ export const useViews = ({
     [views],
   );
 
-  const { loading, refetch } = useGetViewsQuery({
+  const { loading } = useGetViewsQuery({
     variables: {
       where: {
         objectId: { equals: objectId },
@@ -115,32 +124,10 @@ export const useViews = ({
     },
   });
 
-  const handleViewsChange = async (nextViews: View[]) => {
-    const viewToCreate = nextViews.find((nextView) => !viewsById[nextView.id]);
-    if (viewToCreate) {
-      await createView(viewToCreate);
-      await refetch();
-      return;
-    }
-
-    const viewToUpdate = nextViews.find(
-      (nextView) =>
-        viewsById[nextView.id] && viewsById[nextView.id].name !== nextView.name,
-    );
-    if (viewToUpdate) {
-      await updateView(viewToUpdate);
-      await refetch();
-      return;
-    }
-
-    const nextViewIds = nextViews.map((nextView) => nextView.id);
-    const viewIdToDelete = Object.keys(viewsById).find(
-      (previousViewId) => !nextViewIds.includes(previousViewId),
-    );
-    if (viewIdToDelete) await deleteView(viewIdToDelete);
-
-    await refetch();
+  return {
+    createView,
+    deleteView,
+    isFetchingViews: loading,
+    updateView,
   };
-
-  return { handleViewsChange, isFetchingViews: loading };
 };