feat: board creation and actions dropdown

src/app/deals/contexts/BoardsContext.tsx

@@ -7,9 +7,14 @@ import React, {
     useEffect,
     useState,
 } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { LexoRank } from "lexorank";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import { BoardSchema } from "@/lib/client";
 import useBoardsList from "@/hooks/useBoardsList";
+import { BoardSchema } from "@/lib/client";
+import { createBoardMutation } from "@/lib/client/@tanstack/react-query.gen";
+import { notifications } from "@/lib/notifications";
+import { getMaxByLexorank, getNewLexorank } from "@/utils/lexorank";
 
 type BoardsContextState = {
     boards: BoardSchema[];
@@ -17,13 +22,18 @@ type BoardsContextState = {
     selectedBoard: BoardSchema | null;
     setSelectedBoard: React.Dispatch<React.SetStateAction<BoardSchema | null>>;
     refetchBoards: () => void;
+    onCreateBoardClick: (name: string) => void;
 };
 
 const BoardsContext = createContext<BoardsContextState | undefined>(undefined);
 
 const useBoardsContextState = () => {
     const { selectedProject: project } = useProjectsContext();
-    const { boards, setBoards, refetch: refetchBoards } = useBoardsList({ projectId: project?.id });
+    const {
+        boards,
+        setBoards,
+        refetch: refetchBoards,
+    } = useBoardsList({ projectId: project?.id });
     const [selectedBoard, setSelectedBoard] = useState<BoardSchema | null>(
         null
     );
@@ -44,12 +54,45 @@ const useBoardsContextState = () => {
         }
     }, [boards]);
 
+    const createBoard = useMutation({
+        ...createBoardMutation(),
+        onError: error => {
+            console.error(error);
+            notifications.error({
+                message: error.response?.data?.detail as string | undefined,
+            });
+            refetchBoards();
+        },
+        onSuccess: res => {
+            setBoards([...boards, res.board]);
+        },
+    });
+
+    const onCreateBoardClick = (name: string) => {
+        if (!project) return;
+        const lastBoard = getMaxByLexorank(boards);
+        const newLexorank = getNewLexorank(
+            lastBoard ? LexoRank.parse(lastBoard.lexorank) : null
+        );
+
+        createBoard.mutate({
+            body: {
+                board: {
+                    name,
+                    projectId: project.id,
+                    lexorank: newLexorank.toString(),
+                },
+            },
+        });
+    };
+
     return {
         boards,
         setBoards,
         selectedBoard,
         setSelectedBoard,
         refetchBoards,
+        onCreateBoardClick,
     };
 };