From 7716b1e81e7c97f55b286f929a5eba75065c6e6a Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Sun, 3 Apr 2022 22:42:56 -0400
Subject: [PATCH] Push drop zone down to dialog

---
 web/src/components/App.js        | 16 ++--------------
 web/src/components/SendDialog.js | 23 +++++++++++++----------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/web/src/components/App.js b/web/src/components/App.js
index fecd8731..44e2d3b0 100644
--- a/web/src/components/App.js
+++ b/web/src/components/App.js
@@ -126,25 +126,15 @@ const Messaging = (props) => {
     const [message, setMessage] = useState("");
     const [dialogKey, setDialogKey] = useState(0);
     const [dialogOpenMode, setDialogOpenMode] = useState("");
-    const [showDropZone, setShowDropZone] = useState(false);
 
     const subscription = props.selected;
     const selectedTopicUrl = (subscription) ? topicUrl(subscription.baseUrl, subscription.topic) : "";
 
-    useEffect(() => {
-        window.addEventListener('dragenter', () => {
-            setDialogOpenMode(prev => (prev) ? prev : SendDialog.OPEN_MODE_DRAG); // Only update if not already open
-            setShowDropZone(true);
-        });
-    }, []);
-
     const handleOpenDialogClick = () => {
         setDialogOpenMode(SendDialog.OPEN_MODE_DEFAULT);
-        setShowDropZone(false);
     };
 
     const handleSendDialogClose = () => {
-        setShowDropZone(false);
         setDialogOpenMode("");
         setDialogKey(prev => prev+1);
     };
@@ -159,13 +149,11 @@ const Messaging = (props) => {
             />}
             <SendDialog
                 key={`sendDialog${dialogKey}`} // Resets dialog when canceled/closed
+                openMode={dialogOpenMode}
                 topicUrl={selectedTopicUrl}
                 message={message}
-                open={!!dialogOpenMode}
-                openMode={dialogOpenMode}
-                dropZone={showDropZone}
                 onClose={handleSendDialogClose}
-                onHideDropZone={() => setShowDropZone(false)}
+                onDragEnter={() => setDialogOpenMode(prev => (prev) ? prev : SendDialog.OPEN_MODE_DRAG)} // Only update if not already open
                 onResetOpenMode={() => setDialogOpenMode(SendDialog.OPEN_MODE_DEFAULT)}
             />
         </>
diff --git a/web/src/components/SendDialog.js b/web/src/components/SendDialog.js
index da8ba95f..b79cd4f6 100644
--- a/web/src/components/SendDialog.js
+++ b/web/src/components/SendDialog.js
@@ -54,11 +54,19 @@ const SendDialog = (props) => {
     const [status, setStatus] = useState("");
     const disabled = !!activeRequest;
 
+    const [dropZone, setDropZone] = useState(false);
     const [sendButtonEnabled, setSendButtonEnabled] = useState(true);
 
-    const dropZone = props.dropZone;
+    const open = !!props.openMode;
     const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
+    useEffect(() => {
+        window.addEventListener('dragenter', () => {
+            props.onDragEnter();
+            setDropZone(true);
+        });
+    }, []);
+
     useEffect(() => {
         setTopicUrl(props.topicUrl);
         setShowTopicUrl(props.topicUrl === "")
@@ -165,7 +173,7 @@ const SendDialog = (props) => {
 
     const handleAttachFileDrop = async (ev) => {
         ev.preventDefault();
-        props.onHideDropZone();
+        setDropZone(false);
         await updateAttachFile(ev.dataTransfer.files[0]);
     };
 
@@ -177,14 +185,9 @@ const SendDialog = (props) => {
     };
 
     const handleAttachFileDragLeave = () => {
-        // When the dialog was opened by dragging a file in, close it. If it was open
-        // before, keep it open.
-
-        console.log(`open mode ${props.openMode}`);
+        setDropZone(false);
         if (props.openMode === SendDialog.OPEN_MODE_DRAG) {
-            props.onClose();
-        } else {
-            props.onHideDropZone();
+            props.onClose(); // Only close dialog if it was not open before dragging file in
         }
     };
 
@@ -194,7 +197,7 @@ const SendDialog = (props) => {
                 onDrop={handleAttachFileDrop}
                 onDragLeave={handleAttachFileDragLeave}/>
             }
-            <Dialog maxWidth="md" open={props.open} onClose={props.onCancel} fullScreen={fullScreen}>
+            <Dialog maxWidth="md" open={open} onClose={props.onCancel} fullScreen={fullScreen}>
                 <DialogTitle>Publish to {shortUrl(topicUrl)}</DialogTitle>
                 <DialogContent>
                     {dropZone && <DropBox/>}