Implement updateViewState Mutation for Interactive ViewState Rearrangement

backend/src/resolvers/board/index.ts

@@ -150,6 +150,61 @@ const Query: QueryResolvers = {
 };
 
 const Mutation: MutationResolvers = {
+  updateViewState: async (
+    parent,
+    { input: { id, positionIndex } },
+    { db, dataLoaderContext, EXPECTED_OPTIONS_KEY }
+  ) => {
+    const result = await db.sequelize.transaction(async (transaction) => {
+      const container = await db.BoardContainer.findByPk(Number(id.replace('container-', '')), { transaction });
+
+      if (!container) throw Error('Container not found');
+
+      const board = await db.Board.findByPk(Number(container.boardId), {
+        include: [
+          {
+            model: db.BoardContainer,
+            as: 'containers',
+            include: [
+              {
+                model: db.ContainerItem,
+                as: 'items',
+                include: [
+                  {
+                    model: db.Issue,
+                    as: 'issue',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        // [EXPECTED_OPTIONS_KEY]: dataLoaderContext,
+        transaction,
+      });
+
+      board.version += 1;
+
+      await board.save({ transaction });
+
+      const sortedItems = arrayMoveImmutable(
+        board.containers,
+        board.containers.findIndex((boardContainer) => boardContainer.id === container.id),
+        positionIndex
+      );
+
+      for (let i = 0; i < sortedItems.length; i++) {
+        sortedItems[i].position = i;
+      }
+
+      await Promise.all(sortedItems.map((item) => item.save({ transaction })));
+      await board.reload({ transaction });
+
+      return board;
+    });
+
+    return buildViewState(result);
+  },
   createViewState: async (
     parent,
     { input: { boardId, positionIndex, title } },

backend/src/type-defs.ts

@@ -394,6 +394,11 @@ const typeDefs = gql`
     title: String
   }
 
+  input UpdateViewStateInput {
+    id: ID!
+    positionIndex: Int
+  }
+
   # Mutations
   type Mutation {
     createProject(input: CreateProjectInput): Project
@@ -434,6 +439,7 @@ const typeDefs = gql`
     createViewState(input: CreateViewStateInput!): [ViewState]
     addItemToViewState(input: AddItemToViewStateItemInput!): [ViewState]
     removeItemFromViewState(input: RemoveItemFromViewStateItemInput!): [ViewState]
+    updateViewState(input: UpdateViewStateInput!): [ViewState]
   }
 
   # Queries

frontend/components/KanbanBoard/index.tsx

@@ -40,6 +40,7 @@ import {
   GET_ME,
   GET_PROJECT_INFO,
   UPDATE_ISSUE_MUTATION,
+  UPDATE_VIEW_STATE_MUTATION,
 } from '@/gql/gql-queries-mutations';
 import useWsAuthenticatedSocket from '@/hooks/useWsAuthenticatedSocket';
 import { getDomainName } from '@/services/utils';
@@ -104,6 +105,7 @@ export default function KanbanBoard({
   const [updateIssue] = useMutation(UPDATE_ISSUE_MUTATION);
   const [addIssueStatus] = useMutation(CREATE_ISSUE_STATUS_MUTATION);
   const [addItemToViewState] = useMutation(ADD_ITEM_TO_VIEW_STATE);
+  const [updateViewState] = useMutation(UPDATE_VIEW_STATE_MUTATION);
 
   const getMe = useQuery(GET_ME);
   const getProjectInfo = useQuery(GET_PROJECT_INFO, {
@@ -485,7 +487,21 @@ export default function KanbanBoard({
           containers: newItems,
         };
       });
-      // console.log({ newItems, containers });
+
+      updateViewState({
+        onCompleted: (data) => {
+          setPageState((prevState) => ({
+            ...prevState,
+            boardVersion: prevState.boardVersion + 1,
+          }));
+        },
+        variables: {
+          input: {
+            id: containers[activeContainerIndex].id,
+            positionIndex: overContainerIndex,
+          },
+        },
+      });
     }
 
     // Handling item moving to another container

frontend/gql/gql-queries-mutations.ts

@@ -483,3 +483,11 @@ export const ADD_ITEM_TO_VIEW_STATE = gql(/* GraphQL */ `
     }
   }
 `);
+
+export const UPDATE_VIEW_STATE_MUTATION = gql(/* GraphQL */ `
+  mutation UpdateViewState($input: UpdateViewStateInput!) {
+    updateViewState(input: $input) {
+      ...ViewStateFields
+    }
+  }
+`);