feat: confirm modals on deleting

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) => {
-        deleteBoard.mutate({
-            path: { boardId },
+    const onDeleteBoard = (board: BoardSchema) => {
+        modals.openConfirmModal({
+            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) => {
-        deleteStatus.mutate({
-            path: { statusId },
+    const onDeleteStatus = (status: StatusSchema) => {
+        modals.openConfirmModal({
+            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 {