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>

src/generated/graphql.tsx

@@ -86,6 +86,16 @@ export type RootQueryFilesArgs = {
   path: Scalars["String"];
 };
 
+export type DeleteFileMutationVariables = Exact<{
+  id: Scalars["ID"];
+}>;
+
+
+export type DeleteFileMutation = (
+  { __typename?: "RootMutation" }
+  & Pick<RootMutation, "delete">
+);
+
 export type GetFileQueryVariables = Exact<{
   id: Scalars["ID"];
 }>;
@@ -116,6 +126,37 @@ export type OpenDirQuery = (
 );
 
 
+export const DeleteFileDocument = gql`
+    mutation deleteFile($id: ID!) {
+  delete(id: $id)
+}
+    `
+export type DeleteFileMutationFn = Apollo.MutationFunction<DeleteFileMutation, DeleteFileMutationVariables>;
+
+/**
+ * __useDeleteFileMutation__
+ *
+ * To run a mutation, you first call `useDeleteFileMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useDeleteFileMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [deleteFileMutation, { data, loading, error }] = useDeleteFileMutation({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useDeleteFileMutation(baseOptions?: Apollo.MutationHookOptions<DeleteFileMutation, DeleteFileMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<DeleteFileMutation, DeleteFileMutationVariables>(DeleteFileDocument, options)
+}
+export type DeleteFileMutationHookResult = ReturnType<typeof useDeleteFileMutation>;
+export type DeleteFileMutationResult = Apollo.MutationResult<DeleteFileMutation>;
+export type DeleteFileMutationOptions = Apollo.BaseMutationOptions<DeleteFileMutation, DeleteFileMutationVariables>;
 export const GetFileDocument = gql`
     query getFile($id: ID!) {
   file(id: $id) {

src/graphql/deleteFile.graphql

@@ -0,0 +1,3 @@
+mutation deleteFile($id: ID!) {
+  delete(id:$id)
+}