fix: deleting file or folder

src/components/Explorer/FileExplorer.tsx

@@ -100,7 +100,6 @@ function FileExplorerRowContextMenu({
   callback,
 }: FileExplorerRowContextMenuProps) {
   const platform = usePlatform()
-  const metaKey = platform === 'macos' ? '⌘' : 'Ctrl'
   return (
     <ContextMenu
       menuTargetElement={itemRef}
@@ -109,14 +108,12 @@ function FileExplorerRowContextMenu({
         <ContextMenuItem
           data-testid="context-menu-rename"
           onClick={onRename}
-          hotkey="Enter"
         >
           Rename
         </ContextMenuItem>,
         <ContextMenuItem
           data-testid="context-menu-delete"
           onClick={onDelete}
-          hotkey={metaKey + ' + Del'}
         >
           Delete
         </ContextMenuItem>,
@@ -283,7 +280,9 @@ export const FileExplorerRowElement = ({
         onRename={() => {
           row.rowRenameStart()
         }}
-        onDelete={() => {}}
+        onDelete={() => {
+          row.rowDelete()
+        }}
         onClone={() => {}}
         onOpenInNewWindow={() => {}}
         callback={row.rowContextMenu}

src/components/Explorer/ProjectExplorer.tsx

@@ -18,7 +18,11 @@ import { useState, useRef, useEffect } from 'react'
 import { systemIOActor } from '@src/lib/singletons'
 import { SystemIOMachineEvents } from '@src/machines/systemIO/utils'
 import { sortFilesAndDirectories } from '@src/lib/desktopFS'
-import { alwaysEndFileWithEXT, getEXTWithPeriod, joinOSPaths } from '@src/lib/paths'
+import {
+  alwaysEndFileWithEXT,
+  getEXTWithPeriod,
+  joinOSPaths,
+} from '@src/lib/paths'
 import { useProjectDirectoryPath } from '@src/machines/systemIO/hooks'
 
 const isFileExplorerEntryOpened = (
@@ -164,6 +168,11 @@ export const ProjectExplorer = ({
           },
           isFake: false,
           activeIndex: activeIndex,
+          rowDelete: () => {
+            systemIOActor.send({type: SystemIOMachineEvents.deleteFileOrFolder, data: {
+              requestedPath: child.path
+            }})
+          },
           rowRenameStart: () => {
             setIsRenaming(true)
             isRenamingRef.current = true
@@ -207,8 +216,10 @@ export const ProjectExplorer = ({
             } else {
               // rename a file
               const originalExt = getEXTWithPeriod(name)
-              console.log(originalExt)
-              const fileNameForcedWithOriginalExt = alwaysEndFileWithEXT(requestedName, originalExt)
+              const fileNameForcedWithOriginalExt = alwaysEndFileWithEXT(
+                requestedName,
+                originalExt
+              )
               if (!fileNameForcedWithOriginalExt) {
                 // TODO: OH NO!
                 return

src/components/Explorer/utils.ts

@@ -2,9 +2,7 @@ import type { ReactNode } from 'react'
 import type { CustomIconName } from '@src/components/CustomIcon'
 import { sortFilesAndDirectories } from '@src/lib/desktopFS'
 import type { FileEntry } from '@src/lib/project'
-import {
-  DEFAULT_FILE_NAME,
-} from '@src/lib/constants'
+import { DEFAULT_FILE_NAME } from '@src/lib/constants'
 
 export interface FileExplorerEntry extends FileEntry {
   parentPath: string

src/lib/paths.ts

@@ -223,12 +223,14 @@ export function desktopSafePathJoin(paths: string[]): string {
 /**
  * Don't pass a folder path, only files with extensions for best results.
  */
-export const alwaysEndFileWithEXT = (filePath: string, ext: string) : string | null => {
-  return filePath
-            ? filePath.endsWith(ext)
-              ? filePath
-              : filePath + ext
-            : null
+export const alwaysEndFileWithEXT = (
+  filePath: string,
+  ext: string | null
+): string | null => {
+  if (ext === null) {
+    return null
+  }
+  return filePath ? (filePath.endsWith(ext) ? filePath : filePath + ext) : null
 }
 
 export const getEXTNoPeriod = (filePath: string) => {

src/machines/systemIO/systemIOMachine.ts

@@ -156,6 +156,12 @@ export const systemIOMachine = setup({
             fileNameWithExtension: string
             absolutePathToParentDirectory: string
           }
+      }
+      | {
+          type: SystemIOMachineEvents.deleteFileOrFolder
+          data: {
+            requestedPath: string
+          }
         },
   },
   actions: {
@@ -420,6 +426,22 @@ export const systemIOMachine = setup({
         }
       }
     ),
+    [SystemIOMachineActors.deleteFileOrFolder]: fromPromise(
+      async ({
+        input,
+      }: {
+        input: {
+          context: SystemIOContext
+          rootContext: AppMachineContext
+          requestedPath: string
+        }
+      }) => {
+        return {
+          message: '',
+          requestedPath: '',
+        }
+      }
+    ),
   },
 }).createMachine({
   initial: SystemIOMachineStates.idle,
@@ -504,6 +526,9 @@ export const systemIOMachine = setup({
         [SystemIOMachineEvents.renameFile]: {
           target: SystemIOMachineStates.renamingFile,
         },
+        [SystemIOMachineEvents.deleteFileOrFolder]: {
+          target: SystemIOMachineStates.deletingFileOrFolder,
+        },
       },
     },
     [SystemIOMachineStates.readingFolders]: {
@@ -855,10 +880,32 @@ export const systemIOMachine = setup({
           return {
             context,
             requestedFileNameWithExtension:
-              event.data.requestedFileNameWithExtension,
+            event.data.requestedFileNameWithExtension,
             fileNameWithExtension: event.data.fileNameWithExtension,
             absolutePathToParentDirectory:
-              event.data.absolutePathToParentDirectory,
+            event.data.absolutePathToParentDirectory,
+            rootContext: self.system.get('root').getSnapshot().context,
+          }
+        },
+        onDone: {
+          target: SystemIOMachineStates.readingFolders,
+          actions: [SystemIOMachineActions.toastSuccess],
+        },
+        onError: {
+          target: SystemIOMachineStates.idle,
+          actions: [SystemIOMachineActions.toastError],
+        },
+      },
+    },
+    [SystemIOMachineStates.deletingFileOrFolder]: {
+      invoke: {
+        id: SystemIOMachineActors.deleteFileOrFolder,
+        src: SystemIOMachineActors.deleteFileOrFolder,
+        input: ({ context, event, self }) => {
+          assertEvent(event, SystemIOMachineEvents.deleteFileOrFolder)
+          return {
+            context,
+            requestedPath: event.data.requestedPath,
             rootContext: self.system.get('root').getSnapshot().context,
           }
         },

src/machines/systemIO/systemIOMachineDesktop.ts

@@ -509,5 +509,21 @@ export const systemIOMachineDesktop = systemIOMachine.provide({
         }
       }
     ),
+    [SystemIOMachineActors.deleteFileOrFolder]: fromPromise(
+      async ({
+        input,
+      }: {
+        input: {
+          context: SystemIOContext
+          requestedPath: string
+        }
+      }) => {
+        await window.electron.rm(input.requestedPath)
+        return {
+          message: 'File deleted successfully',
+          requestedPath: input.requestedPath
+        }
+      }
+    ),
   },
 })

src/machines/systemIO/utils.ts

@@ -18,6 +18,7 @@ export enum SystemIOMachineActors {
   bulkCreateKCLFilesAndNavigateToFile = 'bulk create kcl files and navigate to file',
   renameFolder = 'renameFolder',
   renameFile = 'renameFile',
+  deleteFileOrFolder = 'deleteFileOrFolder'
 }
 
 export enum SystemIOMachineStates {
@@ -37,6 +38,7 @@ export enum SystemIOMachineStates {
   bulkCreatingKCLFilesAndNavigateToFile = 'bulkCreatingKCLFilesAndNavigateToFile',
   renamingFolder = 'renamingFolder',
   renamingFile = 'renamingFile',
+  deletingFileOrFolder = 'deletingFileOrFolder'
 }
 
 const donePrefix = 'xstate.done.actor.'
@@ -67,6 +69,7 @@ export enum SystemIOMachineEvents {
     'bulk create kcl files and navigate to file',
   renameFolder = 'rename folder',
   renameFile = 'rename file',
+  deleteFileOrFolder = 'delete file or folder'
 }
 
 export enum SystemIOMachineActions {