Rename componentDidUnmount & move bind call to constructors (#54)

* Rename componentDidUnmount to componentWillUnmount

* Move .bind(this) call to constructor in a few components

Closes #34.

src/components/App.js

@@ -24,7 +24,7 @@ export default class App extends React.Component {
     SupportStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     SupportStore.unlisten(this._onChange)
   }
 

src/components/ChromeNotice.js

@@ -24,7 +24,7 @@ export default class ChromeNotice extends React.Component {
     SupportStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     DownloadStore.unlisten(this._onChange)
     SupportStore.unlisten(this._onChange)
   }

src/components/DownloadButton.js

@@ -1,6 +1,10 @@
 import React from 'react'
 
 export default class DownloadButton extends React.Component {
+  constructor() {
+    super()
+    this.onClick = this.onClick.bind(this)
+  }
 
   onClick(e) {
     this.props.onClick(e)
@@ -9,7 +13,7 @@ export default class DownloadButton extends React.Component {
   render() {
     return <button
       className="download-button"
-      onClick={this.onClick.bind(this)}>
+      onClick={this.onClick}>
       Download
     </button>
   }

src/components/DownloadPage.js

@@ -17,13 +17,15 @@ export default class DownloadPage extends React.Component {
     this._onChange = () => {
       this.setState(DownloadStore.getState())
     }
+
+    this.downloadFile = this.downloadFile.bind(this)
   }
 
   componentDidMount() {
     DownloadStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     DownloadStore.unlisten(this._onChange)
   }
 
@@ -43,7 +45,7 @@ export default class DownloadPage extends React.Component {
 
           <ChromeNotice />
           <p className="notice">Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)} &middot; Down: {formatSize(this.state.speedDown)}</p>
-          <DownloadButton onClick={this.downloadFile.bind(this)} />
+          <DownloadButton onClick={this.downloadFile} />
 
         </div>
 

src/components/DropZone.js

@@ -5,6 +5,11 @@ export default class DropZone extends React.Component {
   constructor() {
     super()
     this.state = { focus: false }
+
+    this.onDragEnter = this.onDragEnter.bind(this)
+    this.onDragLeave = this.onDragLeave.bind(this)
+    this.onDragOver = this.onDragOver.bind(this)
+    this.onDrop = this.onDrop.bind(this)
   }
 
   onDragEnter() {
@@ -31,10 +36,10 @@ export default class DropZone extends React.Component {
 
   render() {
     return <div className="drop-zone" ref="root"
-      onDragEnter={this.onDragEnter.bind(this)}
-      onDragLeave={this.onDragLeave.bind(this)}
-      onDragOver={this.onDragOver.bind(this)}
-      onDrop={this.onDrop.bind(this)}>
+      onDragEnter={this.onDragEnter}
+      onDragLeave={this.onDragLeave}
+      onDragOver={this.onDragOver}
+      onDrop={this.onDrop}>
 
       <div className="drop-zone-overlay"
         hidden={!this.state.focus}

src/components/ErrorPage.js

@@ -17,7 +17,7 @@ export default class ErrorPage extends React.Component {
     ErrorStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     ErrorStore.unlisten(this._onChange)
   }
 

src/components/Tempalink.js

@@ -1,6 +1,10 @@
 import React from 'react'
 
 export default class Tempalink extends React.Component {
+  constructor() {
+    super()
+    this.onClick = this.onClick.bind(this)
+  }
 
   onClick() {
     this.refs.input.getDOMNode().setSelectionRange(0, 9999)
@@ -10,7 +14,7 @@ export default class Tempalink extends React.Component {
     var url = window.location.origin + '/' + this.props.token
     return <input
       className="tempalink"
-      onClick={this.onClick.bind(this)}
+      onClick={this.onClick}
       readOnly
       ref="input"
       type="text"

src/components/UploadPage.js

@@ -16,13 +16,15 @@ export default class UploadPage extends React.Component {
     this._onChange = () => {
       this.setState(UploadStore.getState())
     }
+
+    this.uploadFile = this.uploadFile.bind(this)
   }
 
   componentDidMount() {
     UploadStore.listen(this._onChange)
   }
 
-  componentDidUnmount() {
+  componentWillUnmount() {
     UploadStore.unlisten(this._onChange)
   }
 
@@ -41,7 +43,7 @@ export default class UploadPage extends React.Component {
     switch (this.state.status) {
       case 'ready':
 
-        return <DropZone onDrop={this.uploadFile.bind(this)}>
+        return <DropZone onDrop={this.uploadFile}>
           <div className="page">
 
             <Spinner dir="up" />

src/components/Uploader.js

@@ -3,6 +3,10 @@ import React from 'react';
 import UploadActions from '@app/actions/UploadActions';
 
 export default class UploadPage extends React.Component {
+  constructor() {
+    super()
+    this.uploadFile = this.uploadFile.bind(this)
+  }
 
   uploadFile(file) {
     UploadActions.uploadFile(file);
@@ -12,7 +16,7 @@ export default class UploadPage extends React.Component {
     switch (this.props.status) {
       case 'ready':
         return <div>
-          <DropZone onDrop={this.uploadFile.bind(this)} />
+          <DropZone onDrop={this.uploadFile} />
           <Arrow dir="up" />
         </div>;
         break;