implemented delete

src/components/FileBrowser.tsx

@@ -2,10 +2,10 @@ import React from "react"
 import { useState } from "react"
 import { useContextMenu } from "react-contexify"
 import uploadFile from "../functions/uploadFile"
-import { useOpenDirQuery } from "../generated/graphql"
+import { useDeleteFileMutation, useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import DragAndDrop from "./DragAndDrop"
-import FileBrowserContextMenu, { CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
+import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
 import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
 
@@ -14,6 +14,8 @@ const FileBrowser: React.FC = () => {
 	const [openFileId, setOpenFileId] = useState("")
 	const [showFile, setShowFile] = useState(false)
 
+	const [deleteMutation] = useDeleteFileMutation()
+
 	const { show: showFileContext } = useContextMenu({
 		id: CONTEXT_MENU_FILE,
 	})
@@ -56,9 +58,23 @@ const FileBrowser: React.FC = () => {
 		})
 	}
 
+	function onContextSelect(action:Action, id: string) {
+		console.debug(action)
+		switch (action) {
+		case Action.FileDelete:
+			deleteMutation({variables:{id}})
+			break
+		
+		default:
+			break
+		}
+	}
+
 	return (
 		<div>
-			<FileBrowserContextMenu/ >
+			<FileBrowserContextMenu
+				onSelect={onContextSelect}
+			/>
 			<DragAndDrop
 				handleDrop={async (files)=>{
 					await handleDrop(files)

src/components/FileBrowserContextMenu.tsx

@@ -5,14 +5,18 @@ import { Item, ItemParams, Menu, Separator, Submenu } from "react-contexify"
 export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
 export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"
 
+export enum Action {
+	FileDelete
+}
+
 interface Props {
-    onSelect?: (action: string, id: string)=>void
+    onSelect?: (action: Action, id: string)=>void
 }
 
 const FileBrowserContextMenu: React.FC<Props> = (props) => {
 
-	function onClick({ props: itemProps, data }:  ItemParams<{id:string}, string>) {
+	function onClick({ props: itemProps, data }:  ItemParams<{id:string}, Action>) {
-		if (itemProps?.id && data){
+		if (itemProps?.id && data != null){
 			props.onSelect?.(data,itemProps.id) 
 		}
 	}
@@ -20,7 +24,7 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
 	return (
 		<>
 			<Menu id={CONTEXT_MENU_FILE} animation={false}>
-				<Item onClick={onClick} data="item1" >Item 1</Item>
+				<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
 				<Item onClick={onClick} data="item2" >Item 2</Item>
 				<Separator />
 				<Item disabled>Disabled</Item>