feat: confirm modals on deleting

src/app/deals/components/Board/BoardMenu.tsx

@@ -27,17 +27,13 @@ const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
                                 : 0,
                         cursor: "pointer",
                     }}
-                    onClick={e => {
+                    onClick={e => e.stopPropagation()}>
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }}>
                     <IconDotsVertical size={16} />
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>
                 <Menu.Item
                     onClick={e => {
-                        e.preventDefault();
                         e.stopPropagation();
                         startEditing();
                     }}>
@@ -46,7 +42,11 @@ const BoardMenu: FC<Props> = ({ isHovered, board, startEditing }) => {
                         <Text>Переименовать</Text>
                     </Group>
                 </Menu.Item>
-                <Menu.Item onClick={() => onDeleteBoard(board.id)}>
+                <Menu.Item
+                    onClick={e => {
+                        e.stopPropagation();
+                        onDeleteBoard(board);
+                    }}>
                     <Group wrap={"nowrap"}>
                         <IconTrash />
                         <Text>Удалить</Text>

src/app/deals/components/StatusColumnWrapper/StatusMenu.tsx

@@ -20,17 +20,13 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
                     style={{
                         cursor: "pointer",
                     }}
-                    onClick={e => {
+                    onClick={e => e.stopPropagation()}>
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }}>
                     <IconDotsVertical size={16} />
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>
                 <Menu.Item
                     onClick={e => {
-                        e.preventDefault();
                         e.stopPropagation();
                         handleEdit();
                     }}>
@@ -39,7 +35,11 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
                         <Text>Переименовать</Text>
                     </Group>
                 </Menu.Item>
-                <Menu.Item onClick={() => onDeleteStatus(status.id)}>
+                <Menu.Item
+                    onClick={e => {
+                        e.stopPropagation();
+                        onDeleteStatus(status);
+                    }}>
                     <Group wrap={"nowrap"}>
                         <IconTrash />
                         <Text>Удалить</Text>

src/app/deals/contexts/BoardsContext.tsx

@@ -20,7 +20,7 @@ type BoardsContextState = {
     refetchBoards: () => void;
     onCreateBoard: (name: string) => void;
     onUpdateBoard: (boardId: number, board: UpdateBoardSchema) => void;
-    onDeleteBoard: (boardId: number) => void;
+    onDeleteBoard: (board: BoardSchema) => void;
 };
 
 const BoardsContext = createContext<BoardsContextState | undefined>(undefined);

src/app/deals/contexts/StatusesContext.tsx

@@ -28,7 +28,7 @@ type StatusesContextState = {
     refetchStatuses: () => void;
     onCreateStatus: (name: string) => void;
     onUpdateStatus: (statusId: number, status: UpdateStatusSchema) => void;
-    onDeleteStatus: (statusId: number) => void;
+    onDeleteStatus: (status: StatusSchema) => void;
 };
 
 const StatusesContext = createContext<StatusesContextState | undefined>(

src/hooks/useBoardsOperations.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { useMutation } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { LexoRank } from "lexorank";
+import { Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
 import {
     BoardSchema,
     HttpValidationError,
@@ -93,11 +95,23 @@ export const useBoardsOperations = ({
         );
     };
 
-    const onDeleteBoard = (boardId: number) => {
+    const onDeleteBoard = (board: BoardSchema) => {
-        deleteBoard.mutate({
+        modals.openConfirmModal({
-            path: { boardId },
+            title: "Удаление доски",
+            children: (
+                <Text>
+                    Вы уверены, что хотите удалить доску "{board.name}"?
+                </Text>
+            ),
+            labels: { confirm: "Да", cancel: "Нет" },
+            confirmProps: { color: "red" },
+            onConfirm: () => {
+                deleteBoard.mutate({
+                    path: { boardId: board.id },
+                });
+                setBoards(boards => boards.filter(b => b.id !== board.id));
+            },
         });
-        setBoards(boards => boards.filter(board => board.id !== boardId));
     };
 
     return {

src/hooks/useStatusesOperations.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { useMutation } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { LexoRank } from "lexorank";
+import { Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
 import {
     HttpValidationError,
     StatusSchema,
@@ -93,13 +95,25 @@ export const useStatusesOperations = ({
         );
     };
 
-    const onDeleteStatus = (statusId: number) => {
+    const onDeleteStatus = (status: StatusSchema) => {
-        deleteStatus.mutate({
+        modals.openConfirmModal({
-            path: { statusId },
+            title: "Удаление колонки",
+            children: (
+                <Text>
+                    Вы уверены, что хотите удалить колонку "{status.name}"?
+                </Text>
+            ),
+            labels: { confirm: "Да", cancel: "Нет" },
+            confirmProps: { color: "red" },
+            onConfirm: () => {
+                deleteStatus.mutate({
+                    path: { statusId: status.id },
+                });
+                setStatuses(statuses =>
+                    statuses.filter(s => s.id !== status.id)
+                );
+            },
         });
-        setStatuses(statuses =>
-            statuses.filter(status => status.id !== statusId)
-        );
     };
 
     return {