implemented move

src/components/FileBrowser.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { useState } from "react"
 import { useContextMenu } from "react-contexify"
 import uploadFile from "../functions/uploadFile"
-import { useDeleteFileMutation, useOpenDirQuery } from "../generated/graphql"
+import { useCopyMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import DragAndDrop from "./DragAndDrop"
 import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
@@ -15,7 +15,12 @@ const FileBrowser: React.FC = () => {
 	const [openFileId, setOpenFileId] = useState("")
 	const [showFile, setShowFile] = useState(false)
 
+	const [srcID,setSrcID] = useState("")
+	const [pasteAction,setPasteAction] = useState<Action>()
+
 	const [deleteMutation] = useDeleteFileMutation()
+	const [copyMutation] = useCopyMutation()
+	const [moveMutation] = useMoveMutation()
 
 	const { show: showFileContext } = useContextMenu({
 		id: CONTEXT_MENU_FILE,
@@ -60,12 +65,24 @@ const FileBrowser: React.FC = () => {
 	}
 
 	function onContextSelect(action:Action, id: string) {
-		console.debug(action)
 		switch (action) {
 		case Action.FileDelete:
 			deleteMutation({variables:{id}})
 			break
-		
+		case Action.FileCopy:
+		case Action.FileMove:
+			setSrcID(id)
+			setPasteAction(action)
+			break
+		case Action.FilePaste:
+			if (pasteAction === Action.FileCopy){
+				copyMutation({variables:{src:srcID,dest:path}})
+			}
+
+			if (pasteAction === Action.FileMove){
+				moveMutation({variables:{src:srcID,dest:path}})
+			}
+			break
 		default:
 			break
 		}
@@ -75,6 +92,7 @@ const FileBrowser: React.FC = () => {
 		<div>
 			<FileBrowserContextMenu
 				onSelect={onContextSelect}
+				pasteActive={!!srcID}
 			/>
 			<DragAndDrop
 				handleDrop={async (files)=>{

src/components/FileBrowserContextMenu.tsx

@@ -6,11 +6,15 @@ export const CONTEXT_MENU_FILE = "CONTEXT_MENU_FILE"
 export const CONTEXT_MENU_DIR = "CONTEXT_MENU_DIR"
 
 export enum Action {
-	FileDelete
+	FileDelete,
+	FileCopy,
+	FilePaste,
+	FileMove
 }
 
 interface Props {
     onSelect?: (action: Action, id: string)=>void
+	pasteActive?: boolean
 }
 
 const FileBrowserContextMenu: React.FC<Props> = (props) => {
@@ -25,7 +29,9 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
 		<>
 			<Menu id={CONTEXT_MENU_FILE} animation={false}>
 				<Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
-				<Item onClick={onClick} data="item2" >Item 2</Item>
+				<Item onClick={onClick} data={Action.FileCopy} >Copy</Item>
+				<Item onClick={onClick} data={Action.FileMove} >Move</Item>
+				<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
 				<Separator />
 				<Item disabled>Disabled</Item>
 				<Separator />

src/functions/uploadFile.ts

@@ -1,8 +1,4 @@
 async function uploadFile(file:File,id: string): Promise<boolean> {
-	
-	console.debug(file)
-
-
 	const res = await fetch(`/api/file?${new URLSearchParams({id:id}).toString()}`,{
 		method: "POST",
 		headers: {

src/generated/graphql.tsx

@@ -60,8 +60,8 @@ export type RootMutationDeleteArgs = {
 
 
 export type RootMutationMoveArgs = {
-  src: Scalars["ID"];
   dest: Scalars["ID"];
+  src: Scalars["ID"];
 };
 
 export type RootQuery = {
@@ -86,6 +86,20 @@ export type RootQueryFilesArgs = {
   path: Scalars["String"];
 };
 
+export type CopyMutationVariables = Exact<{
+  src: Scalars["ID"];
+  dest: Scalars["ID"];
+}>;
+
+
+export type CopyMutation = (
+  { __typename?: "RootMutation" }
+  & { copy?: Maybe<(
+    { __typename?: "File" }
+    & Pick<File, "id">
+  )> }
+);
+
 export type DeleteFileMutationVariables = Exact<{
   id: Scalars["ID"];
 }>;
@@ -109,6 +123,20 @@ export type GetFileQuery = (
   )> }
 );
 
+export type MoveMutationVariables = Exact<{
+  src: Scalars["ID"];
+  dest: Scalars["ID"];
+}>;
+
+
+export type MoveMutation = (
+  { __typename?: "RootMutation" }
+  & { move?: Maybe<(
+    { __typename?: "File" }
+    & Pick<File, "id">
+  )> }
+);
+
 export type OpenDirQueryVariables = Exact<{
   path: Scalars["String"];
 }>;
@@ -126,6 +154,40 @@ export type OpenDirQuery = (
 );
 
 
+export const CopyDocument = gql`
+    mutation copy($src: ID!, $dest: ID!) {
+  copy(src: $src, dest: $dest) {
+    id
+  }
+}
+    `
+export type CopyMutationFn = Apollo.MutationFunction<CopyMutation, CopyMutationVariables>;
+
+/**
+ * __useCopyMutation__
+ *
+ * To run a mutation, you first call `useCopyMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useCopyMutation` 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 [copyMutation, { data, loading, error }] = useCopyMutation({
+ *   variables: {
+ *      src: // value for 'src'
+ *      dest: // value for 'dest'
+ *   },
+ * });
+ */
+export function useCopyMutation(baseOptions?: Apollo.MutationHookOptions<CopyMutation, CopyMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<CopyMutation, CopyMutationVariables>(CopyDocument, options)
+}
+export type CopyMutationHookResult = ReturnType<typeof useCopyMutation>;
+export type CopyMutationResult = Apollo.MutationResult<CopyMutation>;
+export type CopyMutationOptions = Apollo.BaseMutationOptions<CopyMutation, CopyMutationVariables>;
 export const DeleteFileDocument = gql`
     mutation deleteFile($id: ID!) {
   delete(id: $id)
@@ -196,6 +258,40 @@ export function useGetFileLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Ge
 export type GetFileQueryHookResult = ReturnType<typeof useGetFileQuery>;
 export type GetFileLazyQueryHookResult = ReturnType<typeof useGetFileLazyQuery>;
 export type GetFileQueryResult = Apollo.QueryResult<GetFileQuery, GetFileQueryVariables>;
+export const MoveDocument = gql`
+    mutation move($src: ID!, $dest: ID!) {
+  move(src: $src, dest: $dest) {
+    id
+  }
+}
+    `
+export type MoveMutationFn = Apollo.MutationFunction<MoveMutation, MoveMutationVariables>;
+
+/**
+ * __useMoveMutation__
+ *
+ * To run a mutation, you first call `useMoveMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useMoveMutation` 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 [moveMutation, { data, loading, error }] = useMoveMutation({
+ *   variables: {
+ *      src: // value for 'src'
+ *      dest: // value for 'dest'
+ *   },
+ * });
+ */
+export function useMoveMutation(baseOptions?: Apollo.MutationHookOptions<MoveMutation, MoveMutationVariables>) {
+	const options = {...defaultOptions, ...baseOptions}
+	return Apollo.useMutation<MoveMutation, MoveMutationVariables>(MoveDocument, options)
+}
+export type MoveMutationHookResult = ReturnType<typeof useMoveMutation>;
+export type MoveMutationResult = Apollo.MutationResult<MoveMutation>;
+export type MoveMutationOptions = Apollo.BaseMutationOptions<MoveMutation, MoveMutationVariables>;
 export const OpenDirDocument = gql`
     query openDir($path: String!) {
   files(path: $path) {

src/graphql/copy.graphql

@@ -0,0 +1,5 @@
+mutation copy($src: ID!, $dest: ID!) {
+  copy(src: $src,dest: $dest){
+    id
+  }
+}

src/graphql/move.graphql

@@ -0,0 +1,5 @@
+mutation move($src: ID!, $dest: ID!) {
+  move(src: $src,dest: $dest){
+    id
+  }
+}