fix conflicts

afonsopacifer · May 4, 2016 · 9381f94 · 9381f94
2 parents cf296f1 + 2be40f4
commit 9381f94
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 29 deletions.
diff --git a/src/js/app.js b/src/js/app.js
@@ -4,21 +4,29 @@ import Footer from "./footer.js";
 import GithubCorner from "react-github-corner";
 import Title from 'react-title-component'
 
-const Pomodoro = React.createClass({
+class Pomodoro extends React.Component {
 
-  getInitialState () {
-    return {
+  constructor() {
+    super();
+    this.state = {
       time: 0,
       play: false,
       timeType: 0,
       title: ''
     };
-  },
+    // Bind early, avoid function creation on render loop
+    this.setTimeForCode = this.setTime.bind(this, 1500);
+    this.setTimeForSocial = this.setTime.bind(this, 300);
+    this.setTimeForCoffee = this.setTime.bind(this, 900);
+    this.reset = this.reset.bind(this);
+    this.play = this.play.bind(this);
+    this.elapseTime = this.elapseTime.bind(this);
+  }
 
   componentDidMount() {
     this.setTime(1500);
     Notification.requestPermission();
-  },
+  }
 
   elapseTime() {
     if (this.state.time === 0) {
@@ -29,46 +37,46 @@ const Pomodoro = React.createClass({
       let newState = this.state.time - 1;
       this.setState({time: newState, title: this.getTitle(newState)});
     }
-  },
+  }
 
   format(seconds) {
     let m = Math.floor(seconds % 3600 / 60);
     let s = Math.floor(seconds % 3600 % 60);
     let timeFormated = ((m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s;
     return timeFormated;
-  },
+  }
 
   formatType(timeType) {
     let timeTypeFormated;
     if(timeType === 1500){timeTypeFormated = "code";}
     if(timeType === 300){timeTypeFormated = "social";}
     if(timeType === 900){timeTypeFormated = "coffee";}
     return timeTypeFormated;
-  },
+  }
 
   play() {
     if(this.state.play) { return false; }
     clearInterval(this.interval);
     this.interval = setInterval(this.elapseTime, 1000);
     this.setState({play: true});
-  },
+  }
 
-  reset(resetFor) {
+  reset(resetFor = this.state.time) {
     clearInterval(this.interval);
     let time = this.format(resetFor);
     this.setState({play: false});
-  },
+  }
 
   setTime(newTime) {
     this.reset(newTime);
     this.setState({time: newTime, timeType: newTime, title: this.getTitle(newTime)});
-  },
+  }
 
   getTitle(time) {
     time = typeof time === 'undefined' ? this.state.time : time;
     let _title = this.format(time) + ' | Pomodoro timer';
     return _title;
-  },
+  }
 
   alert() {
     // vibration
@@ -97,7 +105,7 @@ const Pomodoro = React.createClass({
         });
       }
     }
-  },
+  }
 
   render() {
     return (
@@ -120,9 +128,9 @@ const Pomodoro = React.createClass({
           </div>
 
           <div className="container">
-            <button className="btn" onClick={this.setTime.bind(this, 1500)}>Code</button>
-            <button className="btn" onClick={this.setTime.bind(this, 300)}>Social</button>
-            <button className="btn" onClick={this.setTime.bind(this, 900)}>Coffee</button>
+            <button className="btn" onClick={this.setTimeForCode}>Code</button>
+            <button className="btn" onClick={this.setTimeForSocial}>Social</button>
+            <button className="btn" onClick={this.setTimeForCoffee}>Coffee</button>
           </div>
 
         </div> {/* main */}
@@ -136,7 +144,7 @@ const Pomodoro = React.createClass({
 
               <div className="controlsPlay">
                 <button className="play btnIcon" onClick={this.play}></button>
-                <button className="stop btnIcon" onClick={this.reset.bind(this, this.state.time)}></button>
+                <button className="stop btnIcon" onClick={this.reset}></button>
               </div>
 
               <div className="controlsCheck">
@@ -171,7 +179,6 @@ const Pomodoro = React.createClass({
       </div> /* bottomBar */
     )
   }
-
-});
+}
 
 ReactDom.render(<Pomodoro/>, document.getElementById('app'));
diff --git a/src/js/footer.js b/src/js/footer.js
@@ -1,13 +1,11 @@
 import React from 'react';
 
-const Footer = React.createClass({
-  render() {
-    return (
-      <footer className="credits">
-        Made with <span className="heart"></span> by <a href="https://github.com/afonsopacifer" className="link" target="_blank">@afonsopacifer</a>
-      </footer>
-    )
-  }
-});
+function Footer() {
+  return (
+    <footer className="credits">
+      Made with <span className="heart"></span> by <a href="https://github.com/afonsopacifer" className="link" target="_blank">@afonsopacifer</a>
+    </footer>
+  );
+}
 
 export default Footer;