Create only one element to delete files and folders

client/components/Application/Buttons/Delete.tsx

@@ -2,17 +2,15 @@ import Box from '@mui/material/Box'
 import DeleteIcon from '@mui/icons-material/Delete'
 import IconButton from '../../Parts/Buttons/Icon'
 import LightTooltip from '../../Parts/Tooltips/Light'
-import { selectors, useStore } from '../store'
+import { useStore } from '../store'
 import { useKeyPress } from 'ahooks'
 
 export default function DeleteButton() {
   const path = useStore((state) => state.path)
-  const isFolder = useStore(selectors.isFolder)
   const updateState = useStore((state) => state.updateState)
-  const type = isFolder ? 'Folder' : 'File'
   useKeyPress(['ctrl.i'], (event) => {
     event.preventDefault()
-    if (path) updateState({ dialog: `delete${type}` })
+    if (path) updateState({ dialog: 'deleteFilesFolders' })
   })
   return (
     <LightTooltip title="Delete file [Ctrl+I]">
@@ -23,7 +21,9 @@ export default function DeleteButton() {
           disabled={!path}
           variant="text"
           color="warning"
-          onClick={() => updateState({ dialog: `delete${type}` })}
+          onClick={() => {
+            updateState({ dialog: 'deleteFilesFolders' })
+          }}
         />
       </Box>
     </LightTooltip>

client/components/Application/Dialog.tsx

@@ -5,8 +5,7 @@ import ConfigDialog from './Dialogs/Config'
 import CopyFileDialog from './Dialogs/CopyFile'
 import CopyFolderDialog from './Dialogs/CopyFolder'
 import CreateDialog from './Dialogs/Create'
-import DeleteFileDialog from './Dialogs/DeleteFile'
-import DeleteFolderDialog from './Dialogs/DeleteFolder'
+import DeleteFilesFoldersDialog from './Dialogs/DeleteFilesFolders'
 import IndexFilesDialog from './Dialogs/IndexFiles'
 import MoveFileDialog from './Dialogs/MoveFile'
 import MoveFolderDialog from './Dialogs/MoveFolder'
@@ -29,8 +28,7 @@ const DIALOGS = {
   copyFile: CopyFileDialog,
   copyFolder: CopyFolderDialog,
   create: CreateDialog,
-  deleteFile: DeleteFileDialog,
-  deleteFolder: DeleteFolderDialog,
+  deleteFilesFolders: DeleteFilesFoldersDialog,
   indexFiles: IndexFilesDialog,
   moveFile: MoveFileDialog,
   moveFolder: MoveFolderDialog,

client/components/Application/Dialogs/DeleteFilesFolders.tsx

@@ -0,0 +1,55 @@
+import ConfirmDialog from '../../Parts/Dialogs/Confirm'
+import { selectors, useStore } from '../store'
+
+export default function DeleteFilesFoldersDialog() {
+  const path = useStore((state) => state.path)
+  const selectedMultiplePaths = useStore((state) => state.selectedMultiplePaths)
+  const files = useStore((state) => state.files)
+  const isFolder = useStore(selectors.isFolder)
+
+  // const selectedElements = files.filter((file) => {
+  //   if( selectedMultiplePaths?.includes(file.path) && file.type === 'folder' ) return file
+  //     else return
+  // })
+
+  const selectedFolders = files
+    .filter((file) => {
+      return selectedMultiplePaths?.includes(file.path) && file.type === 'folder'
+    })
+    .map((file) => file.path)
+
+  const selectedFiles = files
+    .filter((file) => {
+      return selectedMultiplePaths?.includes(file.path) && file.type !== 'folder'
+    })
+    .map((file) => file.path)
+
+  const deleteFiles = useStore((state) => state.deleteFiles)
+  const deleteFolders = useStore((state) => state.deleteFolders)
+  const updateState = useStore((state) => state.updateState)
+  if (!path) return null
+
+  return (
+    <ConfirmDialog
+      open={true}
+      title="Delete File"
+      description={
+        selectedMultiplePaths
+          ? 'Are you sure you want to delete these elements?'
+          : `Are you sure you want to delete this ${isFolder ? 'folder' : 'file'}?`
+      }
+      label="Yes"
+      cancelLabel="No"
+      onCancel={() => updateState({ dialog: undefined })}
+      onConfirm={async () => {
+        if (selectedMultiplePaths) {
+          if (selectedFolders.length > 0) await deleteFolders(selectedFolders)
+          if (selectedFiles.length > 0) await deleteFiles(selectedFiles)
+        }
+        // is only one selected file
+        else isFolder ? await deleteFolders([path]) : await deleteFiles([path])
+        updateState({ dialog: undefined })
+      }}
+    />
+  )
+}

client/components/Application/types.ts

@@ -7,8 +7,7 @@ export type IDialog =
   | 'copyFile'
   | 'copyFolder'
   | 'create'
-  | 'deleteFile'
-  | 'deleteFolder'
+  | 'deleteFilesFolders'
   | 'indexFiles'
   | 'moveFile'
   | 'moveFolder'