Move Close to React

js/Close.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {connect} from 'react-redux';
+
+
+class Close extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.props.dispatch({type: 'CLOSE'});
+  }
+  render() {
+    return <div
+      id='close'
+      onClick={this.handleClick}
+    />;
+  }
+}
+
+module.exports = connect()(Close);

js/main-window-dom.js

@@ -28,7 +28,7 @@ module.exports = el('div', {id: 'main-window', class: 'loading stop'}, [
     el('div', {id: 'shade-time-holder'}),
     el('div', {id: 'minimize'}),
     el('div', {id: 'shade'}),
-    el('div', {id: 'close'})
+    el('div', {id: 'close-holder'})
   ]),
   el('div', {class: 'status'}, [
     el('div', {id: 'clutter-bar'}, [

js/main-window.js

@@ -12,6 +12,7 @@ import MonoStereo from './MonoStereo.jsx';
 import Repeat from './Repeat.jsx';
 import Shuffle from './Shuffle.jsx';
 import Eject from './Eject.jsx';
+import Close from './Close.jsx';
 
 import '../css/main-window.css';
 
@@ -19,7 +20,6 @@ module.exports = {
   init: function(winamp) {
     this.winamp = winamp;
     this.nodes = {
-      close: document.getElementById('close'),
       shade: document.getElementById('shade'),
       buttonD: document.getElementById('button-d'),
       visualizer: document.getElementById('visualizer'),
@@ -43,6 +43,7 @@ module.exports = {
     this.winamp.renderTo(<Repeat />, document.getElementById('repeat-holder'));
     this.winamp.renderTo(<Shuffle />, document.getElementById('shuffle-holder'));
     this.winamp.renderTo(<Eject />, document.getElementById('eject-holder'));
+    this.winamp.renderTo(<Close />, document.getElementById('close-holder'));
 
     this._registerListeners();
     return this;
@@ -51,10 +52,6 @@ module.exports = {
   _registerListeners: function() {
     var self = this;
 
-    this.nodes.close.onclick = function() {
-      self.winamp.close();
-    };
-
     this.nodes.shade.onclick = function() {
       self.nodes.window.classList.toggle('shade');
     };
@@ -94,7 +91,7 @@ module.exports = {
       self.toggleLlama();
     });
     window.addEventListener('close', function() {
-      self.close();
+      self.nodes.window.classList.add('closed');
     });
 
     this.nodes.window.addEventListener('dragenter', this.dragenter.bind(this));
@@ -107,10 +104,6 @@ module.exports = {
     this.nodes.window.classList.toggle('doubled');
   },
 
-  close: function() {
-    this.nodes.window.classList.add('closed');
-  },
-
   setWorkingIndicator: function() {
     this.nodes.workIndicator.classList.add('selected');
   },

js/reducers.js

@@ -152,6 +152,9 @@ const createReducer = (winamp) => {
       case 'TOGGLE_SHUFFLE':
         winamp.toggleShuffle();
         return state;
+      case 'CLOSE':
+        winamp.close();
+        return state;
       default:
         return state;
     }