feat: board name editing

src/hooks/useBoardsOperations.ts

@@ -0,0 +1,108 @@
+import React from "react";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { LexoRank } from "lexorank";
+import {
+    BoardSchema,
+    HttpValidationError,
+    UpdateBoardSchema,
+} from "@/lib/client";
+import {
+    createBoardMutation,
+    deleteBoardMutation,
+    updateBoardMutation,
+} from "@/lib/client/@tanstack/react-query.gen";
+import { notifications } from "@/lib/notifications";
+import { getMaxByLexorank, getNewLexorank } from "@/utils/lexorank";
+
+type UseBoardsOperationsProps = {
+    boards: BoardSchema[];
+    setBoards: React.Dispatch<React.SetStateAction<BoardSchema[]>>;
+    refetchBoards: () => void;
+    projectId?: number;
+};
+
+export const useBoardsOperations = ({
+    boards,
+    setBoards,
+    refetchBoards,
+    projectId,
+}: UseBoardsOperationsProps) => {
+    const onError = (error: AxiosError<HttpValidationError>) => {
+        console.error(error);
+        notifications.error({
+            message: error.response?.data?.detail as string | undefined,
+        });
+        refetchBoards();
+    };
+
+    const createBoard = useMutation({
+        ...createBoardMutation(),
+        onError,
+        onSuccess: res => {
+            setBoards([...boards, res.board]);
+        },
+    });
+
+    const updateBoard = useMutation({
+        ...updateBoardMutation(),
+        onError,
+    });
+
+    const deleteBoard = useMutation({
+        ...deleteBoardMutation(),
+        onError,
+    });
+
+    const onCreateBoard = (name: string) => {
+        if (!projectId) return;
+        const lastBoard = getMaxByLexorank(boards);
+        const newLexorank = getNewLexorank(
+            lastBoard ? LexoRank.parse(lastBoard.lexorank) : null
+        );
+
+        createBoard.mutate({
+            body: {
+                board: {
+                    name,
+                    projectId,
+                    lexorank: newLexorank.toString(),
+                },
+            },
+        });
+    };
+
+    const onUpdateBoard = (boardId: number, board: UpdateBoardSchema) => {
+        updateBoard.mutate({
+            path: { boardId },
+            body: { board },
+        });
+
+        setBoards(boards =>
+            boards.map(oldBoard =>
+                oldBoard.id !== boardId
+                    ? oldBoard
+                    : {
+                          id: oldBoard.id,
+                          name: board.name ? board.name : oldBoard.name,
+                          lexorank: board.lexorank
+                              ? board.lexorank
+                              : oldBoard.lexorank,
+                      }
+            )
+        );
+    };
+
+    const onDeleteBoard = (boardId: number) => {
+        deleteBoard.mutate({
+            path: { boardId },
+        });
+        setBoards(boards => boards.filter(board => board.id !== boardId));
+    };
+
+    return {
+        onCreateBoard,
+        onUpdateBoard,
+        onDeleteBoard,
+    };
+};