Add drag and drop support

components/codeImage.js

@@ -1,11 +1,30 @@
+import { EOL } from 'os'
 import React from 'react'
+import { NativeTypes } from 'react-dnd-html5-backend'
+import { DropTarget } from 'react-dnd'
 import domtoimage from 'dom-to-image'
 
 const padding = '50px 50px'
 
+const DEFAULT_CODE = `
+const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
+
+const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
+
+const unfold = (f, seed) => {
+  const go = (f, seed, acc) => {
+    const res = f(seed)
+    return res ? go(f, res[1], acc.concat([res[0]])) : acc
+  }
+  return go(f, seed, [])
+}`
+
+const MAX_LINES = 40
+
 class CodeImage extends React.Component {
   constructor () {
     super()
+    this.state = {}
     this.save = this.save.bind(this)
   }
 
@@ -21,12 +40,16 @@ class CodeImage extends React.Component {
   }
 
   render () {
-    return (
+    let code = this.props.children || this.state.droppedContent || DEFAULT_CODE
+    const split = code.split(EOL)
+    if (split.length > MAX_LINES) code = [...split.slice(0, MAX_LINES - 1), '', '...'].join(EOL)
+
+    return this.props.connectDropTarget(
       <div id='section'>
         <div id='container' ref={(container) => { this.container = container }}>
           <pre>
             <code onClick={this.save}>
-              {this.props.children}
+              {code}
             </code>
           </pre>
         </div>
@@ -55,4 +78,21 @@ class CodeImage extends React.Component {
   }
 }
 
-export default CodeImage
+const drop = (props, monitor, component) => {
+  const bundle = monitor.getItem()
+  const file = bundle.files[0]
+  const reader = new FileReader()
+  reader.onload = function(event) {
+    component.setState({
+      droppedContent: event.target.result
+    })
+  };
+  reader.readAsText(file, "UTF-8");
+}
+
+export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
+  canDrop: monitor.canDrop(),
+  item: monitor.getItem()
+}))(CodeImage)

package.json

@@ -17,6 +17,8 @@
     "morgan": "^1.8.2",
     "next": "^2.4.3",
     "react": "^15.5.4",
+    "react-dnd": "^2.4.0",
+    "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "^15.5.4"
   }
 }

pages/index.js

@@ -1,23 +1,12 @@
 import React from 'react'
+import HTML5Backend from 'react-dnd-html5-backend'
+import { DragDropContext } from 'react-dnd'
 import Axios from 'axios'
 
 import CodeImage from '../components/codeImage'
 import api from '../lib/api'
 
-const code = `
-const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
-
-const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
-
-const unfold = (f, seed) => {
-  const go = (f, seed, acc) => {
-    const res = f(seed)
-    return res ? go(f, res[1], acc.concat([res[0]])) : acc
-  }
-  return go(f, seed, [])
-}`
-
-export default class extends React.Component {
+class Home extends React.Component {
   /* pathname, asPath, err, req, res */
   static async getInitialProps ({ asPath }) {
     try {
@@ -42,9 +31,11 @@ export default class extends React.Component {
         </style>
         <h1>Welcome to Code Image</h1>
         <CodeImage>
-          {this.props.content || code}
+          {this.props.content}
         </CodeImage>
       </div>
     )
   }
 }
+
+export default DragDropContext(HTML5Backend)(Home)