Abstract dropping files. Add to playlist

js/components/DropTarget.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { loadFileFromReference } from "../actionCreators";
+
+export class DropTarget extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleDrop = this.handleDrop.bind(this);
+  }
+
+  supress(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  handleDrop(e) {
+    this.supress(e);
+    const { files } = e.dataTransfer;
+    if (files[0]) {
+      this.props.loadFileFromReference(files[0]);
+    }
+  }
+
+  render() {
+    // eslint-disable-next-line no-shadow, no-unused-vars
+    const { loadFileFromReference, ...passThroughProps } = this.props;
+    return (
+      <div
+        {...passThroughProps}
+        onDragEnter={this.supress}
+        onDragOver={this.supress}
+        onDrop={this.handleDrop}
+      />
+    );
+  }
+}
+
+export default connect(null, { loadFileFromReference })(DropTarget);

js/components/MainWindow/index.js

@@ -4,6 +4,7 @@ import classnames from "classnames";
 
 import { WINDOWS } from "../../constants";
 
+import DropTarget from "../DropTarget";
 import MiniTime from "../MiniTime";
 
 import ActionButtons from "./ActionButtons";
@@ -28,34 +29,18 @@ import MainVolume from "./MainVolume";
 
 import { SET_FOCUSED_WINDOW } from "../../actionTypes";
 
-import { loadFileFromReference } from "../../actionCreators";
-
 import "../../../css/main-window.css";
 
 export class MainWindow extends React.Component {
   constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
-    this.handleDrop = this.handleDrop.bind(this);
   }
 
   handleClick() {
     this.props.setFocus();
   }
 
-  supress(e) {
-    e.stopPropagation();
-    e.preventDefault();
-  }
-
-  handleDrop(e) {
-    this.supress(e);
-    const { files } = e.dataTransfer;
-    if (files[0]) {
-      this.props.loadFileFromReference(files[0]);
-    }
-  }
-
   render() {
     const {
       focused,
@@ -82,13 +67,10 @@ export class MainWindow extends React.Component {
     });
 
     return (
-      <div
+      <DropTarget
         id="main-window"
         className={className}
         onMouseDown={this.handleClick}
-        onDragEnter={this.supress}
-        onDragOver={this.supress}
-        onDrop={this.handleDrop}
       >
         <div id="title-bar" className="selected title-bard draggable">
           <MainContextMenu fileInput={this.props.fileInput} />
@@ -132,7 +114,7 @@ export class MainWindow extends React.Component {
           href="https://github.com/captbaritone/winamp2-js"
           title="About"
         />
-      </div>
+      </DropTarget>
     );
   }
 }
@@ -147,7 +129,6 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = {
-  setFocus: () => ({ type: SET_FOCUSED_WINDOW, window: WINDOWS.MAIN }),
-  loadFileFromReference
+  setFocus: () => ({ type: SET_FOCUSED_WINDOW, window: WINDOWS.MAIN })
 };
 export default connect(mapStateToProps, mapDispatchToProps)(MainWindow);

js/components/PlaylistWindow/__snapshots__/index.test.js.snap

@@ -4,6 +4,9 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
 <div
   className="window draggable"
   id="playlist-window"
+  onDragEnter={[Function]}
+  onDragOver={[Function]}
+  onDrop={[Function]}
   onMouseDown={[Function]}
   style={
     Object {
@@ -267,6 +270,7 @@ exports[`PlaylistWindow renders to snapshot 1`] = `
     >
       <div
         className="playlist-visualizer"
+        onClick={[Function]}
       />
       <div
         className="playlist-running-time-display draggable"

js/components/PlaylistWindow/index.js

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import classnames from "classnames";
 import Slider from "rc-slider/lib/Slider";
 
+import DropTarget from "../DropTarget";
 import MiniTime from "../MiniTime";
 import PlaylistShade from "./PlaylistShade";
 import Track from "./Track";
@@ -91,7 +92,7 @@ const PlaylistWindow = props => {
   const tracks = trackOrder.slice(offset, offset + numberOfVisibleTracks);
 
   return (
-    <div
+    <DropTarget
       id="playlist-window"
       className={classes}
       style={style}
@@ -161,7 +162,7 @@ const PlaylistWindow = props => {
           <ResizeTarget />
         </div>
       </div>
-    </div>
+    </DropTarget>
   );
 };