Push drop zone down to dialog

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)}
             />
         </>

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
+        setDropZone(false);
-        // before, keep it open.
-
-        console.log(`open mode ${props.openMode}`);
         if (props.openMode === SendDialog.OPEN_MODE_DRAG) {
-            props.onClose();
+            props.onClose(); // Only close dialog if it was not open before dragging file in
-        } else {
-            props.onHideDropZone();
         }
     };
 
@@ -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/>}