diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx index 0f27269..d1e450c 100644 --- a/src/components/FileBrowser.tsx +++ b/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 (
- + { await handleDrop(files) diff --git a/src/components/FileBrowserContextMenu.tsx b/src/components/FileBrowserContextMenu.tsx index 7d861e1..d2d53e9 100644 --- a/src/components/FileBrowserContextMenu.tsx +++ b/src/components/FileBrowserContextMenu.tsx @@ -5,22 +5,26 @@ 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) => { - function onClick({ props: itemProps, data }: ItemParams<{id:string}, string>) { - if (itemProps?.id && data){ - props.onSelect?.(data,itemProps.id) + function onClick({ props: itemProps, data }: ItemParams<{id:string}, Action>) { + if (itemProps?.id && data != null){ + props.onSelect?.(data,itemProps.id) } } return ( <> - Item 1 + Delete Item 2 Disabled