From 713a96efc5ff4783e5093ad68d255ceef6fefa76 Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Sun, 1 Aug 2021 21:42:26 +0200
Subject: [PATCH] added drag and drop to file browser

---
 src/components/FileBrowser.tsx | 86 +++++++++++++++++++---------------
 1 file changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/components/FileBrowser.tsx b/src/components/FileBrowser.tsx
index 4f8f0ec..e1889ed 100644
--- a/src/components/FileBrowser.tsx
+++ b/src/components/FileBrowser.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { useState } from "react"
 import { useOpenDirQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
+import DragAndDrop from "./DragAndDrop"
 import FileBrowserElement from "./FileBrowserElement"
 import FileOpen from "./FileOpen"
 
@@ -16,46 +17,57 @@ const FileBrowser: React.FC = () => {
 		}
 	})
 
+	function handleDrop(files:FileList) {
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i]
+			console.debug(file) // TODO
+		}
+	}
+
 	return (
 		<div>
-			<Breadcrum path={path} onDirClick={(newPath)=>{
-				setPath(newPath)
-			}}/>
-			<div>
-				{loading && 
-					<div className="loading loading-lg"></div> // TODO: center
-				}
-				<table className="table table-striped table-hover">
-					<thead>
-						<tr>
-							<th>Name</th>
-							<th>Size</th>
-						</tr>
-					</thead>
-					<tbody>
+			<DragAndDrop
+				handleDrop={handleDrop}
+			>
+				<Breadcrum path={path} onDirClick={(newPath)=>{
+					setPath(newPath)
+				}}/>
+				<div>
+					{loading && 
+						<div className="loading loading-lg"></div> // TODO: center
+					}
+					<table className="table table-striped table-hover">
+						<thead>
+							<tr>
+								<th>Name</th>
+								<th>Size</th>
+							</tr>
+						</thead>
+						<tbody>
 
-						{ data?.directorys.map(v => (<FileBrowserElement
-							key={v?.id}
-							dir={v}
-							onClick={(dir)=>{
-								setPath(dir.id)
-							}}
-						/>))}
-							
-						{ data?.files.map(v => (<FileBrowserElement 
-							key={v?.id}
-							file={v}
-							onClick={(file)=>{
-								setOpenFileId(file.id)
-								setShowFile(true)
-							}}
-						/>))}
-					</tbody>
-				</table>
-			</div>
-			{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
-				setShowFile(false)
-			}} />}
+							{ data?.directorys.map(v => (<FileBrowserElement
+								key={v?.id}
+								dir={v}
+								onClick={(dir)=>{
+									setPath(dir.id)
+								}}
+							/>))}
+								
+							{ data?.files.map(v => (<FileBrowserElement 
+								key={v?.id}
+								file={v}
+								onClick={(file)=>{
+									setOpenFileId(file.id)
+									setShowFile(true)
+								}}
+							/>))}
+						</tbody>
+					</table>
+				</div>
+				{<FileOpen id={openFileId} show={showFile} onCloseClick={()=>{
+					setShowFile(false)
+				}} />}
+			</DragAndDrop>
 		</div>
 	)
 }