remove react-dnd dependencies + use react-dropzone instead (#648)

components/Editor.js

@@ -1,12 +1,10 @@
 // Theirs
 import url from 'url'
 import React from 'react'
-import HTML5Backend from 'react-dnd-html5-backend'
-import { DragDropContext } from 'react-dnd'
 import domtoimage from 'dom-to-image'
-import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
 import Spinner from 'react-spinner'
 import dynamic from 'next/dynamic'
+import Dropzone from 'react-dropzone'
 
 // Ours
 import Button from './Button'
@@ -245,6 +243,14 @@ class Editor extends React.Component {
   }
 
   onDrop([file]) {
+    if (!file) return
+
+    const reader = new FileReader()
+
+    // TODO abstract this into Dropperx
+    reader.onload = event => {
+      file.content = event.target.result
+
       if (isImage(file)) {
         this.updateState({
           backgroundImage: file.content,
@@ -257,6 +263,13 @@ class Editor extends React.Component {
       }
     }
 
+    if (isImage(file)) {
+      reader.readAsDataURL(file)
+    } else {
+      reader.readAsText(file, 'UTF-8')
+    }
+  }
+
   updateTheme(theme) {
     this.updateSetting('theme', theme)
   }
@@ -325,7 +338,11 @@ class Editor extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="editor">
+        <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
+          {({ getRootProps, isDragAccept }) => {
+            const root = getRootProps()
+            return (
+              <div className="editor" {...root}>
                 <Toolbar>
                   <Themes key={theme} updateTheme={this.updateTheme} theme={theme} />
                   <Dropdown
@@ -376,11 +393,9 @@ class Editor extends React.Component {
                   </div>
                 </Toolbar>
 
-          <ReadFileDropContainer readAs={readAs} onDrop={this.onDrop}>
-            {({ isOver, canDrop }) => (
                 <Overlay
-                isOver={isOver || canDrop}
+                  isOver={isDragAccept}
-                title={`Drop your file here to import ${isOver ? '✋' : '✊'}`}
+                  title={`Drop your file here to import ${isDragAccept ? '✋' : '✊'}`}
                 >
                   {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
                   <Carbon
@@ -395,12 +410,14 @@ class Editor extends React.Component {
                     {code != null ? code : DEFAULT_CODE}
                   </Carbon>
                 </Overlay>
-            )}
-          </ReadFileDropContainer>
               </div>
+            )
+          }}
+        </Dropzone>
         <style jsx>
           {`
             .editor {
+              outline: none;
               background: ${COLORS.BLACK};
               border: 3px solid ${COLORS.SECONDARY};
               border-radius: 8px;
@@ -429,17 +446,10 @@ function isImage(file) {
   return file.type.split('/')[0] === 'image'
 }
 
-function readAs(file) {
-  if (isImage(file)) {
-    return DATA_URL
-  }
-  return TEXT
-}
-
 Editor.defaultProps = {
   api: {},
   onUpdate: () => {},
   onReset: () => {}
 }
 
-export default DragDropContext(HTML5Backend)(Editor)
+export default Editor

package.json

@@ -26,7 +26,6 @@
     "cross-env": "^5.2.0",
     "dom-to-image": "^2.5.2",
     "downshift": "^3.1.12",
-    "dropperx": "0.2.1",
     "escape-goat": "^1.3.0",
     "graphql": "^14.1.1",
     "highlight.js": "^9.13.1",
@@ -43,9 +42,8 @@
     "react-codemirror2": "^5.1.0",
     "react-color": "^2.17.0",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^5.0.0",
-    "react-dnd-html5-backend": "^5.0.0",
     "react-dom": "^16.7.0",
+    "react-dropzone": "^8.0.3",
     "react-image-crop": "6.0.0",
     "react-spinner": "^0.2.7",
     "react-syntax-highlight": "^15.3.1",
@@ -81,7 +79,6 @@
         ],
         "ignore": [
           "graphql",
-          "react-dnd-html5-backend",
           "react-dom",
           "webpack"
         ]