delete nodes works as well!

ui2/src/components/Commander/DeleteButton.tsx

@@ -1,41 +1,53 @@
 import {useContext} from "react"
+import {useDisclosure} from "@mantine/hooks"
 
 import {Tooltip, ActionIcon} from "@mantine/core"
 import {IconTrash} from "@tabler/icons-react"
-import {openModal} from "@/components/modals/Generic"
-import {NodeType, PanelMode} from "@/types"
+import {PanelMode} from "@/types"
 import DeleteNodesModal from "./DeleteModal"
 import {useSelector, useDispatch} from "react-redux"
 import {
-  selectSelectedNodes,
+  selectSelectedNodeIds,
   clearNodesSelection
 } from "@/slices/dualPanel/dualPanel"
 import {RootState} from "@/app/types"
-
+import {selectNodesByIds} from "@/features/nodes/nodesSlice"
 import PanelContext from "@/contexts/PanelContext"
 
 export default function DeleteButton() {
+  const [opened, {open, close}] = useDisclosure(false)
   const mode: PanelMode = useContext(PanelContext)
   const dispatch = useDispatch()
-  const nodes = useSelector((state: RootState) =>
-    selectSelectedNodes(state, mode)
-  ) as NodeType[]
+  const selectedIds = useSelector((state: RootState) =>
+    selectSelectedNodeIds(state, mode)
+  )
+  const selectedNodes = useSelector((state: RootState) =>
+    selectNodesByIds(state, selectedIds || [])
+  )
+
+  const onSubmit = () => {
+    dispatch(clearNodesSelection(mode))
+    close()
+  }
 
-  const onClick = () => {
-    openModal<string[], {nodes: NodeType[]}>(DeleteNodesModal, {
-      nodes: nodes
-    })
-      .then(() => {
-        dispatch(clearNodesSelection(mode))
-      })
-      .catch(() => {})
+  const onCancel = () => {
+    dispatch(clearNodesSelection(mode))
+    close()
   }
 
   return (
-    <Tooltip withArrow label="Delete">
-      <ActionIcon size="lg" onClick={onClick} color={"red"}>
-        <IconTrash />
-      </ActionIcon>
-    </Tooltip>
+    <>
+      <Tooltip withArrow label="Delete">
+        <ActionIcon size="lg" onClick={open} color={"red"}>
+          <IconTrash />
+        </ActionIcon>
+      </Tooltip>
+      <DeleteNodesModal
+        opened={opened}
+        nodes={selectedNodes}
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+      />
+    </>
   )
 }

ui2/src/components/Commander/DeleteModal.tsx

@@ -1,45 +1,58 @@
 import {useState} from "react"
-import {store} from "@/app/store"
-import {deleteNodes} from "@/slices/dualPanel/dualPanel"
-import GenericModal from "@/components/modals/Generic"
+
+import {Button, Modal, Container, Group, Space, Loader} from "@mantine/core"
+import {useDeleteNodesMutation} from "@/features/nodes/apiSlice"
+
 import type {NodeType} from "@/types"
 
 type DeleteNodesModalArgs = {
   nodes: NodeType[]
-  onOK: (value: NodeType[]) => void
-  onCancel: (reason?: any) => void
+  opened: boolean
+  onSubmit: () => void
+  onCancel: () => void
 }
 
 /* Deletes multiple nodes */
 export default function DeleteNodesModal({
   nodes,
-  onOK,
+  opened,
+  onSubmit,
   onCancel
 }: DeleteNodesModalArgs) {
+  const [deletedNodes, {isLoading}] = useDeleteNodesMutation()
   const [errorMessage, setErrorMessage] = useState("")
   const nodeTitles = nodes.map(g => g.title).join(",")
 
-  const handleSubmit = async () => {
-    store.dispatch(deleteNodes(nodes.map(g => g.id)))
-    onOK(nodes)
-    return true
+  const localSubmit = async () => {
+    await deletedNodes(nodes.map(n => n.id))
+    onSubmit()
   }
-  const handleCancel = () => {
+  const localCancel = () => {
     setErrorMessage("")
 
     onCancel()
   }
 
   return (
-    <GenericModal
-      modal_title={"Delete Nodes"}
-      onSubmit={handleSubmit}
-      onCancel={handleCancel}
-      submit_button_title="Delete"
-      submit_button_color="red"
-    >
-      <p>Are you sure you want to delete following nodes: {nodeTitles}?</p>
-      {errorMessage}
-    </GenericModal>
+    <Modal title="Delete Nodes" opened={opened} onClose={localCancel}>
+      <Container>
+        <p>Are you sure you want to delete following nodes: {nodeTitles}?</p>
+        {errorMessage}
+        <Space h="md" />
+        <Group gap="lg" justify="space-between">
+          <Button variant="default" onClick={localCancel}>
+            Cancel
+          </Button>
+          <Button
+            leftSection={isLoading && <Loader size={"sm"} />}
+            onClick={localSubmit}
+            disabled={isLoading}
+            color={"red"}
+          >
+            Delete
+          </Button>
+        </Group>
+      </Container>
+    </Modal>
   )
 }

ui2/src/features/nodes/apiSlice.ts

@@ -72,6 +72,17 @@ export const apiSliceWithNodes = apiSlice.injectEndpoints({
         body: node.tags
       }),
       invalidatesTags: ["Node", "Tag"]
+    }),
+    deleteNodes: builder.mutation<void, string[]>({
+      query: nodeIDs => ({
+        url: `nodes/`,
+        method: "DELETE",
+        body: nodeIDs
+      }),
+      invalidatesTags: (_result, _error, ids) =>
+        ids.map(id => {
+          return {type: "Node", id: id}
+        })
     })
   })
 })
@@ -81,5 +92,6 @@ export const {
   useGetFolderQuery,
   useAddNewFolderMutation,
   useRenameFolderMutation,
-  useUpdateNodeTagsMutation
+  useUpdateNodeTagsMutation,
+  useDeleteNodesMutation
 } = apiSliceWithNodes