refactor: create/update/delete one view instead of many (#1384)

Closes #1359

front/src/modules/views/graphql/mutations/createView.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_VIEW = gql`
+  mutation CreateView($data: ViewCreateInput!) {
+    view: createOneView(data: $data) {
+      id
+      name
+    }
+  }
+`;

front/src/modules/views/graphql/mutations/createViews.ts

@@ -1,9 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const CREATE_VIEWS = gql`
-  mutation CreateViews($data: [ViewCreateManyInput!]!) {
-    createManyView(data: $data) {
-      count
-    }
-  }
-`;

front/src/modules/views/graphql/mutations/deleteView.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+
+export const DELETE_VIEW = gql`
+  mutation DeleteView($where: ViewWhereUniqueInput!) {
+    view: deleteOneView(where: $where) {
+      id
+      name
+    }
+  }
+`;

front/src/modules/views/graphql/mutations/deleteViews.ts

@@ -1,9 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const DELETE_VIEWS = gql`
-  mutation DeleteViews($where: ViewWhereInput!) {
-    deleteManyView(where: $where) {
-      count
-    }
-  }
-`;

front/src/modules/views/graphql/mutations/updateView.ts

@@ -2,7 +2,7 @@ import { gql } from '@apollo/client';
 
 export const UPDATE_VIEW = gql`
   mutation UpdateView($data: ViewUpdateInput!, $where: ViewWhereUniqueInput!) {
-    updateOneView(data: $data, where: $where) {
+    view: updateOneView(data: $data, where: $where) {
       id
       name
     }

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

@@ -10,8 +10,8 @@ import {
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import {
-  useCreateViewsMutation,
-  useDeleteViewsMutation,
+  useCreateViewMutation,
+  useDeleteViewMutation,
   useGetViewsQuery,
   useUpdateViewMutation,
   ViewType,
@@ -38,60 +38,42 @@ export const useViews = ({
     TableRecoilScopeContext,
   );
 
-  const [createViewsMutation] = useCreateViewsMutation();
+  const [createViewMutation] = useCreateViewMutation();
   const [updateViewMutation] = useUpdateViewMutation();
-  const [deleteViewsMutation] = useDeleteViewsMutation();
+  const [deleteViewMutation] = useDeleteViewMutation();
 
-  const createViews = useCallback(
-    async (views: TableView[]) => {
-      if (!views.length) return;
-
-      await createViewsMutation({
+  const createView = useCallback(
+    async (view: TableView) => {
+      const { data } = await createViewMutation({
         variables: {
-          data: views.map((view) => ({
+          data: {
             ...view,
             objectId,
             type: ViewType.Table,
-          })),
-        },
-      });
-
-      await Promise.all(views.map((view) => onViewCreate(view.id)));
-    },
-    [createViewsMutation, objectId, onViewCreate],
-  );
-
-  const updateViews = useCallback(
-    (views: TableView[]) => {
-      if (!views.length) return;
-
-      return Promise.all(
-        views.map((view) =>
-          updateViewMutation({
-            variables: {
-              data: { name: view.name },
-              where: { id: view.id },
-            },
-          }),
-        ),
-      );
-    },
-    [updateViewMutation],
-  );
-
-  const deleteViews = useCallback(
-    (viewIds: string[]) => {
-      if (!viewIds.length) return;
-
-      return deleteViewsMutation({
-        variables: {
-          where: {
-            id: { in: viewIds },
           },
         },
       });
+
+      if (data?.view) await onViewCreate(data.view.id);
     },
-    [deleteViewsMutation],
+    [createViewMutation, objectId, onViewCreate],
+  );
+
+  const updateView = useCallback(
+    (view: TableView) =>
+      updateViewMutation({
+        variables: {
+          data: { name: view.name },
+          where: { id: view.id },
+        },
+      }),
+    [updateViewMutation],
+  );
+
+  const deleteView = useCallback(
+    (viewId: string) =>
+      deleteViewMutation({ variables: { where: { id: viewId } } }),
+    [deleteViewMutation],
   );
 
   const { refetch } = useGetViewsQuery({
@@ -114,27 +96,33 @@ export const useViews = ({
 
   const handleViewsChange = useCallback(
     async (nextViews: TableView[]) => {
-      const viewsToCreate = nextViews.filter(
+      const viewToCreate = nextViews.find(
         (nextView) => !viewsById[nextView.id],
       );
-      await createViews(viewsToCreate);
+      if (viewToCreate) {
+        await createView(viewToCreate);
+        return refetch();
+      }
 
-      const viewsToUpdate = nextViews.filter(
+      const viewToUpdate = nextViews.find(
         (nextView) =>
           viewsById[nextView.id] &&
           viewsById[nextView.id].name !== nextView.name,
       );
-      await updateViews(viewsToUpdate);
+      if (viewToUpdate) {
+        await updateView(viewToUpdate);
+        return refetch();
+      }
 
       const nextViewIds = nextViews.map((nextView) => nextView.id);
-      const viewIdsToDelete = Object.keys(viewsById).filter(
+      const viewIdToDelete = Object.keys(viewsById).find(
         (previousViewId) => !nextViewIds.includes(previousViewId),
       );
-      await deleteViews(viewIdsToDelete);
+      if (viewIdToDelete) await deleteView(viewIdToDelete);
 
       return refetch();
     },
-    [createViews, deleteViews, refetch, updateViews, viewsById],
+    [createView, deleteView, refetch, updateView, viewsById],
   );
 
   return { handleViewsChange };