create new folder modal

ui2/src/components/Commander/NewFolderButton.tsx

@@ -1,37 +1,35 @@
 import {useContext} from "react"
+import {useDisclosure} from "@mantine/hooks"
 import {Tooltip, ActionIcon} from "@mantine/core"
 import {IconFolderPlus} from "@tabler/icons-react"
-import {useSelector, useDispatch} from "react-redux"
-import {selectCurrentFolderID, folderAdded} from "@/slices/dualPanel/dualPanel"
-import create_new_folder from "@/components/modals/NewFolder"
-
+import {useSelector} from "react-redux"
+import {selectCurrentFolderID} from "@/slices/dualPanel/dualPanel"
+import {NewFolderModal} from "@/components/modals/NewFolder"
 import type {RootState} from "@/app/types"
-import type {NodeType, PanelMode} from "@/types"
+import type {PanelMode} from "@/types"
 
 import PanelContext from "@/contexts/PanelContext"
 
 export default function NewFolderButton() {
+  const [opened, {open, close}] = useDisclosure(false)
   const mode: PanelMode = useContext(PanelContext)
-  const dispatch = useDispatch()
   const currentFolderId = useSelector((state: RootState) =>
     selectCurrentFolderID(state, mode)
   )
 
-  const onNewFolder = () => {
-    if (!currentFolderId) {
-      console.error("Error: no current folder found")
-      return
-    }
-    create_new_folder(currentFolderId).then((new_folder: NodeType) => {
-      dispatch(folderAdded({node: new_folder, mode: mode}))
-    })
-  }
-
   return (
-    <Tooltip label="New Folder" withArrow>
-      <ActionIcon size={"lg"} variant="default" onClick={onNewFolder}>
-        <IconFolderPlus stroke={1.4} />
-      </ActionIcon>
-    </Tooltip>
+    <>
+      <Tooltip label="New Folder" withArrow>
+        <ActionIcon size={"lg"} variant="default" onClick={open}>
+          <IconFolderPlus stroke={1.4} />
+        </ActionIcon>
+      </Tooltip>
+      <NewFolderModal
+        opened={opened}
+        parent_id={currentFolderId!}
+        onSubmit={close}
+        onCancel={close}
+      />
+    </>
   )
 }

ui2/src/components/modals/NewFolder.tsx

@@ -1,13 +1,8 @@
 import {ChangeEvent} from "react"
-import {useState} from "react"
-import {createRoot} from "react-dom/client"
-import {MantineProvider, TextInput} from "@mantine/core"
-import theme from "@/themes"
-import GenericModal from "@/components/modals/Generic"
-
-import type {NodeType} from "@/types"
-import {MODALS} from "@/cconstants"
+import {useState, useEffect} from "react"
+import {TextInput, Loader, Group, Button, Modal} from "@mantine/core"
 import axios, {AxiosResponse} from "axios"
+import {useAddNewFolderMutation} from "@/features/nodes/apiSlice"
 
 type CreateFolderType = {
   title: string
@@ -17,8 +12,9 @@ type CreateFolderType = {
 
 type Args = {
   parent_id: string
-  onOK: (node: NodeType) => void
-  onCancel: (msg?: string) => void
+  opened: boolean
+  onSubmit: () => void
+  onCancel: () => void
 }
 
 async function api_create_new_folder(
@@ -37,7 +33,14 @@ async function api_create_new_folder(
   })
 }
 
-const NewFolderModal = ({parent_id, onOK, onCancel}: Args) => {
+export const NewFolderModal = ({
+  parent_id,
+  onSubmit,
+  onCancel,
+  opened
+}: Args) => {
+  const [addNewFolder, {isLoading, isError, isSuccess}] =
+    useAddNewFolderMutation()
   const [title, setTitle] = useState("")
 
   const handleTitleChanged = (event: ChangeEvent<HTMLInputElement>) => {
@@ -46,60 +49,58 @@ const NewFolderModal = ({parent_id, onOK, onCancel}: Args) => {
     setTitle(value)
   }
 
-  const handleSubmit = async (signal: AbortSignal) => {
+  useEffect(() => {
+    // close dialog as soon as we have
+    // "success" status from the mutation
+    if (isSuccess) {
+      onSubmit()
+      reset()
+    }
+  }, [isSuccess])
+
+  const onLocalSubmit = async () => {
+    let data: CreateFolderType = {
+      title: title,
+      parent_id: parent_id,
+      ctype: "folder"
+    }
     try {
-      let response = await api_create_new_folder(title, parent_id, signal)
-      let new_node: NodeType = response.data as NodeType
-      onOK(new_node)
+      await addNewFolder(data)
     } catch (error: any) {
-      onCancel(error.toString())
+      // @ts-ignore
+      setError(err.data.detail)
     }
-    return true
   }
 
-  const handleCancel = () => {
-    setTitle("")
-
+  const onLocalCancel = () => {
+    reset()
     onCancel()
   }
 
+  const reset = () => {
+    setTitle("")
+  }
+
   return (
-    <GenericModal
-      modal_title="Create Folder"
-      submit_button_title="Create"
-      onSubmit={handleSubmit}
-      onCancel={handleCancel}
-    >
+    <Modal title={"New Tag"} opened={opened} onClose={onLocalCancel}>
       <TextInput
         data-autofocus
         onChange={handleTitleChanged}
         label="Folder title"
         placeholder="title"
         mt="md"
       />
-    </GenericModal>
+      <Group justify="space-between" mt="md">
+        <Button variant="default" onClick={onLocalCancel}>
+          Cancel
+        </Button>
+        <Group>
+          {isLoading && <Loader size="sm" />}
+          <Button disabled={isLoading} onClick={onLocalSubmit}>
+            Submit
+          </Button>
+        </Group>
+      </Group>
+    </Modal>
   )
 }
-
-function create_new_folder(parent_id: string) {
-  let modals = document.getElementById(MODALS)
-
-  let promise = new Promise<NodeType>(function (onOK, onCancel) {
-    if (modals) {
-      let dom_root = createRoot(modals)
-      dom_root.render(
-        <MantineProvider theme={theme}>
-          <NewFolderModal
-            parent_id={parent_id}
-            onOK={onOK}
-            onCancel={onCancel}
-          />
-        </MantineProvider>
-      )
-    }
-  }) // new Promise...
-
-  return promise
-}
-
-export default create_new_folder

ui2/src/features/nodes/apiSlice.ts

@@ -1,6 +1,12 @@
 import {apiSlice} from "@/features/api/slice"
 import type {Paginated, FolderType, NodeType} from "@/types"
 
+type CreateFolderType = {
+  title: string
+  parent_id: string
+  ctype: "folder"
+}
+
 export type PaginatedArgs = {
   nodeID: string
   page_number?: number
@@ -32,8 +38,20 @@ export const apiSliceWithNodes = apiSlice.injectEndpoints({
     getFolder: builder.query<FolderType, string>({
       query: folderID => `/folders/${folderID}`,
       providesTags: (_result, _error, arg) => [{type: "Folder", id: arg}]
+    }),
+    addNewFolder: builder.mutation<NodeType, CreateFolderType>({
+      query: folder => ({
+        url: "/nodes/",
+        method: "POST",
+        body: folder
+      }),
+      invalidatesTags: ["Node"]
     })
   })
 })
 
-export const {useGetPaginatedNodesQuery, useGetFolderQuery} = apiSliceWithNodes
+export const {
+  useGetPaginatedNodesQuery,
+  useGetFolderQuery,
+  useAddNewFolderMutation
+} = apiSliceWithNodes