s3browser-frontend/src/components/FileBrowser.tsx

import React from "react"
import { useState } from "react"
import { useContextMenu } from "react-contexify"
import uploadFile from "../functions/uploadFile"
import { useCopyMutation, useCreateDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
import Breadcrum from "./Breadcrum"
import CreateDirButton from "./CreateDirButton"
import DragAndDrop from "./DragAndDrop"
import FileBrowserContextMenu, { Action, CONTEXT_MENU_DIR, CONTEXT_MENU_FILE } from "./FileBrowserContextMenu"
import FileBrowserElement from "./FileBrowserElement"
import FileOpen from "./FileOpen"
import FileUploadButton from "./FileUploadButton"

const FileBrowser: React.FC = () => {
	const [path,setPath] = useState("/")
	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 [createDirMutation] = useCreateDirMutation()

	const { show: showFileContext } = useContextMenu({
		id: CONTEXT_MENU_FILE,
	})

	const { show: showDirContext } = useContextMenu({
		id: CONTEXT_MENU_DIR,
	})

	const { data, loading, refetch: refetchDir } = useOpenDirQuery({
		variables:{
			path
		}
	})

	async function handleDrop(files:FileList) {
		const wait: Promise<boolean>[] = []
		for (let i = 0; i < files.length; i++) {
			const file = files[i]
			wait.push(uploadFile(file, path + file.name))
		}

		await Promise.all(wait)
		refetchDir()
	}

	function openFileContextMenu(e: React.MouseEvent, id: string) {
		e.preventDefault()
		showFileContext(e,{
			props:{
				id
			}
		})
	}

	function openDirContextMenu(e: React.MouseEvent, id: string) {
		e.preventDefault()
		showDirContext(e,{
			props:{
				id
			}
		})
	}

	async function onContextSelect(action:Action, id: string) {
		switch (action) {
		case Action.FileDelete:
			await deleteMutation({variables:{id}})
			refetchDir()
			break
		case Action.FileCopy:
		case Action.FileMove:
			setSrcID(id)
			setPasteAction(action)
			break
		case Action.FilePaste:
			if (pasteAction === Action.FileCopy){
				await copyMutation({variables:{src:srcID,dest:path}})
				refetchDir()
			}

			if (pasteAction === Action.FileMove){
				await moveMutation({variables:{src:srcID,dest:path}})
				refetchDir()
			}
			break
		default:
			break
		}
	}

	return (
		<div>
			<FileBrowserContextMenu
				onSelect={onContextSelect}
				pasteActive={!!srcID}
			/>
			<DragAndDrop
				handleDrop={async (files)=>{
					await handleDrop(files)
				}}
			>
				<div className="flex justify-between">
					<Breadcrum path={path} onDirClick={(newPath)=>{
						setPath(newPath)
					}}/>
					<div className="ml-auto">
						<CreateDirButton 
							onPressed={async (dirName)=>{
								await createDirMutation({variables:{path:dirName}})
								refetchDir()
							}}
						/>
					</div>
					<div>
						<FileUploadButton 
							onUpload={(files)=>handleDrop(files)}
						/>
					</div>

				</div>

				<div>
					{loading && 
						<div>Loading...</div> // TODO: center
					}
					<table className="w-full">
						<thead className="border-b-2">
							<tr>
								<th className="text-left">Name</th>
								<th className="text-left">Last Modified</th>
								<th className="text-left">Size</th>
							</tr>
						</thead>
						<tbody className="divide-y">

							{ data?.directorys.map(v => (<FileBrowserElement
								key={v?.id}
								dir={v}
								onClick={(dir)=>{
									setPath(dir.id)
								}}
								onContextMenu={(e)=>{
									openDirContextMenu(e,v.id)
								}}
							/>))}
								
							{ data?.files.map(v => (<FileBrowserElement 
								key={v?.id}
								file={v}
								onClick={(file)=>{
									setOpenFileId(file.id)
									setShowFile(true)
								}}
								onContextMenu={(e)=>{
									openFileContextMenu(e,v.id)
								}}
							/>))}
						</tbody>
					</table>
				</div>
				{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
					setShowFile(false)
				}} />}
			</DragAndDrop>
		</div>
	)
}

export default FileBrowser