From 1f121fe98a3a409cec7eef2b8cccf1979b805042 Mon Sep 17 00:00:00 2001
From: ramfox <kasey@qri.io>
Date: Fri, 8 Nov 2019 17:36:50 -0500
Subject: [PATCH] feat(drag-and-drop): drag and drop a data file to create a
 dataset

First, we add `showDragDrop` state to the App component. This will get refactored to the state tree. We add a `onDragEnter` handler to the App div. This event will trigger the `drag-drop` div mask to render (this should also get refactored to a separate component, potentially). Currently we have `onDragEnter`, `onDragOver`, `onDragLeave`, and `onDrop` handler attached to the `drag-drop` div mask. `onDragLeave` and `onDrop` close the `drag-drop` mask. This thread was very helpful: https://stackoverflow.com/questions/19841859/full-page-drag-and-drop-files-website
---
 app/components/App.tsx   | 54 +++++++++++++++++++++++++++++++++++-----
 app/scss/_drag-drop.scss | 13 ++++++++++
 app/scss/_welcome.scss   |  5 ++--
 app/scss/style.scss      |  1 +
 4 files changed, 65 insertions(+), 8 deletions(-)
 create mode 100644 app/scss/_drag-drop.scss

diff --git a/app/components/App.tsx b/app/components/App.tsx
index edb9cc13..e03e9f70 100644
--- a/app/components/App.tsx
+++ b/app/components/App.tsx
@@ -71,6 +71,7 @@ interface AppState {
   currentModal: Modal
   sessionID: string
   peername: string
+  showDragDrop: boolean
 }
 
 const noModalObject: HideModal = {
@@ -84,7 +85,8 @@ class App extends React.Component<AppProps, AppState> {
     this.state = {
       currentModal: noModalObject,
       sessionID: this.props.sessionID,
-      peername: this.props.peername
+      peername: this.props.peername,
+      showDragDrop: false
     }
 
     this.renderModal = this.renderModal.bind(this)
@@ -260,6 +262,41 @@ class App extends React.Component<AppProps, AppState> {
     )
   }
 
+  private renderDragDrop () {
+    return (
+      <div
+        onDragEnter={(event) => {
+          event.stopPropagation()
+          event.preventDefault()
+          this.setState({ showDragDrop: true })
+          console.log('enter')
+        }}
+        onDragOver={(event) => {
+          event.stopPropagation()
+          event.preventDefault()
+          this.setState({ showDragDrop: true })
+          console.log('over')
+        }}
+        onDragLeave={(event) => {
+          event.stopPropagation()
+          event.preventDefault()
+          this.setState({ showDragDrop: false })
+          console.log('leave')
+        }}
+        onDrop={(event) => {
+          this.setState({ showDragDrop: false })
+          console.log(event.dataTransfer.files[0].name)
+          event.preventDefault()
+          console.log('drop')
+        }}
+        className='drag-drop'
+        id='drag-drop'
+      >
+      DRAG AND DROP!
+      </div>
+    )
+  }
+
   render () {
     const {
       toast,
@@ -272,12 +309,17 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     return (
-      <div style={{
-        height: '100%',
-        position: 'relative',
-        overflow: 'hidden'
-      }}>
+      <div className='drag'
+        onDragEnter={() => {
+          this.setState({ showDragDrop: true })
+        }}
+        style={{
+          height: '100%',
+          position: 'relative',
+          overflow: 'hidden'
+        }}>
         {this.renderAppError()}
+        {this.state.showDragDrop && this.renderDragDrop() }
         {this.renderModal()}
         <Router>
           <RoutesContainer />
diff --git a/app/scss/_drag-drop.scss b/app/scss/_drag-drop.scss
new file mode 100644
index 00000000..3b7c58e7
--- /dev/null
+++ b/app/scss/_drag-drop.scss
@@ -0,0 +1,13 @@
+.drag-drop {
+  background: rgba($color: #000000, $alpha: .6);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
\ No newline at end of file
diff --git a/app/scss/_welcome.scss b/app/scss/_welcome.scss
index 27f14419..fa38c234 100644
--- a/app/scss/_welcome.scss
+++ b/app/scss/_welcome.scss
@@ -15,8 +15,9 @@
     bottom: 0;
   }
 
-#app-loading { z-index: 201 }
-#app-error { z-index: 200 }
+#app-loading { z-index: 250 }
+#app-error { z-index: 249 }
+#drag-drop { z-index: 200 }
 #welcome-page { z-index: 199 }
 #signup-page { z-index: 198 }
 #signin-page { z-index: 197 }
diff --git a/app/scss/style.scss b/app/scss/style.scss
index af34be57..29d1bb4a 100755
--- a/app/scss/style.scss
+++ b/app/scss/style.scss
@@ -24,6 +24,7 @@
 @import "stylesheet";
 
 @import "dataset";
+@import "drag-drop";
 @import "saveform";
 @import "dataset-list";
 @import "welcome";