From ca9754cd10679ed47711e2b97be1061a7ddb0958 Mon Sep 17 00:00:00 2001
From: Michael Ochmann <michael.ochmann@propeller.de>
Date: Sun, 2 Oct 2022 12:03:09 +0200
Subject: [PATCH] added file dropping support through `withDrop` hoc

addresses #2
---
 contextAPI.js                                |  3 +-
 src/Ation.js                                 | 31 ++++++++-------
 src/WindowManager.js                         |  1 +
 src/ui/src/components/Ation.js               | 35 ++++++++--------
 src/ui/src/higherOrderComponents/withDrop.js | 42 ++++++++++++++++++++
 src/ui/src/index.js                          |  7 +++-
 6 files changed, 86 insertions(+), 33 deletions(-)
 create mode 100644 src/ui/src/higherOrderComponents/withDrop.js

diff --git a/contextAPI.js b/contextAPI.js
index c8d17fb..f371b6e 100644
--- a/contextAPI.js
+++ b/contextAPI.js
@@ -4,5 +4,6 @@ const {contextBridge, ipcRenderer} = require("electron");
 
 contextBridge.exposeInMainWorld("api", {
 	openFileDialog : ()       => ipcRenderer.send("WindowManager::openFileDialog"),
-	openFile       : callback => ipcRenderer.on("Ation::openFile", (_, presentation) => callback(presentation))
+	onFileOpen     : callback => ipcRenderer.on("Ation::openFile", (_, presentation) => callback(presentation)),
+	openFile       : filePath => ipcRenderer.send("WindowManager::openFile", filePath)
 });
\ No newline at end of file
diff --git a/src/Ation.js b/src/Ation.js
index 9b58aa3..a77ab50 100644
--- a/src/Ation.js
+++ b/src/Ation.js
@@ -36,25 +36,28 @@ class Ation {
 		});
 	}
 
-	async openFile() {
+	async openFile(filePath = null) {
 			if (!this.windowManager.mainWindow)
 				return null;
 
-			const result = await dialog.showOpenDialog(this.windowManager.mainWindow, {
-				title   : "open file",
-				filters : [
-					{
-						name       : "Markdown files",
-						extensions : [".md"]
-					}
-				]
-			});
+			if (!filePath) {
+				const result = await dialog.showOpenDialog(this.windowManager.mainWindow, {
+					title   : "open file",
+					filters : [
+						{
+							name       : "Markdown files",
+							extensions : [".md"]
+						}
+					]
+				});
 
-			if (result.canceled || result.filePaths.length < 1)
-				return null;
+				if (result.canceled || result.filePaths.length < 1)
+					return;
+				filePath = result.filePaths[0];
+			}
 
-			const fileContents = await fs.readFile(result.filePaths[0], {encoding : "utf-8"});
-			const basePath     = path.dirname(result.filePaths[0]);
+			const fileContents = await fs.readFile(filePath, {encoding : "utf-8"});
+			const basePath     = path.dirname(filePath);
 			const data         = parser(fileContents);
 
 
diff --git a/src/WindowManager.js b/src/WindowManager.js
index e87e035..5a0ca7b 100644
--- a/src/WindowManager.js
+++ b/src/WindowManager.js
@@ -18,6 +18,7 @@ class WindowManager {
 		app.whenReady().then(() => this.init());
 
 		ipcMain.on("WindowManager::openFileDialog", () => this.app.openFile());
+		ipcMain.on("WindowManager::openFile", (_, path) => this.app.openFile(path));
 	}
 
 	init() {
diff --git a/src/ui/src/components/Ation.js b/src/ui/src/components/Ation.js
index 5945a0f..b2ae917 100644
--- a/src/ui/src/components/Ation.js
+++ b/src/ui/src/components/Ation.js
@@ -19,7 +19,7 @@ const Ation = () => {
 	const [showTips, setShowTips] = useState(false);
 
 	useEffect(() => {
-		window.api.openFile(presentation => {
+		window.api.onFileOpen(presentation => {
 			const [basePath, slideDeck] = presentation;
 			if (!slideDeck)
 				return;
@@ -32,22 +32,25 @@ const Ation = () => {
 		window.api.openFileDialog();
 	}
 
-	if (deck.length < 1)
-		return <NoFile openFile={openFile} />;
-
 	return (
-		<SlideContext.Provider value={{slide, setSlide, mode, setMode, basePath}}>
-			<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
-				<Toolbar openFile={openFile} setShowTips={setShowTips} />
-				<SlidesList deck={deck} />
-				<main className="main">
-					<Slide data={deck[slide] || null} />
-				</main>
-				<Tips show={showTips} />
-			</section>
-			<Blackout show={mode === Mode.BLACKOUT} />
-			<KeyboardControl mode={mode} setMode={setMode} deck={deck} openFile={openFile} setShowTips={setShowTips} />
-		</SlideContext.Provider>
+		<>
+			{deck.length < 1 ?
+				<NoFile openFile={openFile} />
+			: (
+				<SlideContext.Provider value={{slide, setSlide, mode, setMode, basePath}}>
+					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
+						<Toolbar openFile={openFile} setShowTips={setShowTips} />
+						<SlidesList deck={deck} />
+						<main className="main">
+							<Slide data={deck[slide] || null} />
+						</main>
+						<Tips show={showTips} />
+					</section>
+					<Blackout show={mode === Mode.BLACKOUT} />
+					<KeyboardControl mode={mode} setMode={setMode} deck={deck} openFile={openFile} setShowTips={setShowTips} />
+				</SlideContext.Provider>
+			)}
+		</>
 	);
 };
 
diff --git a/src/ui/src/higherOrderComponents/withDrop.js b/src/ui/src/higherOrderComponents/withDrop.js
new file mode 100644
index 0000000..ed5734c
--- /dev/null
+++ b/src/ui/src/higherOrderComponents/withDrop.js
@@ -0,0 +1,42 @@
+import React, {useState} from "react";
+
+const extension = filename => {
+	const parts = filename.split('.');
+
+	return parts[parts.length - 1];
+};
+
+const withDrop = Component => () => {
+	const [drag, setDrag] = useState(false);
+
+	const handleDragOver = event => {
+		event.preventDefault();
+		event.stopPropagation();
+		setDrag(true);
+	};
+
+	const handleDragLeave = event => {
+		event.preventDefault();
+		event.stopPropagation();
+		setDrag(false);
+	}
+
+	const handleDrop = event => {
+		event.preventDefault();
+		event.stopPropagation();
+		const file = event.dataTransfer?.items[0].getAsFile();
+		if (extension(file.name.toLowerCase()) === "md") {
+			window.api.openFile(file.path);
+		}
+		setDrag(false);
+	};
+
+	return (
+		<section onDragLeave={handleDragLeave} onDragOver={handleDragOver} onDrop={handleDrop} style={{opacity : drag ? 0.2 : 1}}>
+			<Component />
+		</section>
+	);
+};
+
+
+export default withDrop;
\ No newline at end of file
diff --git a/src/ui/src/index.js b/src/ui/src/index.js
index 2db8a76..a545a68 100644
--- a/src/ui/src/index.js
+++ b/src/ui/src/index.js
@@ -1,13 +1,16 @@
 import React    from "react";
 import ReactDOM from "react-dom/client";
 
-import Ation from "./components/Ation";
+import Ation    from "./components/Ation";
+import withDrop from "./higherOrderComponents/withDrop";
 
 import "./assets/css/ation.scss";
 
+const App = withDrop(Ation);
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
 	<React.StrictMode>
-		<Ation />
+		<App />
 	</React.StrictMode>
 );
\ No newline at end of file