Add switch pomodoro<->break

src/components/LogoSpin.css

@@ -1,10 +1,5 @@
-img {
-  pointer-events: none;
-}
-
 .App-logo {
     height: 25vmin;
-    pointer-events: none;
     filter: drop-shadow(0 0 0.50rem #f8ff9c);
     align-items: center;
     justify-content: center;

src/components/LogoSpin.js

@@ -14,6 +14,7 @@ class LogoSpin extends Component {
         className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
         src={logo}
         alt="Tomato"
+        onClick={this.props.switchMode}
       ></img>
     )
   }

src/components/Timer.js

@@ -9,20 +9,31 @@ class Timer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      seconds: 1500,
+      seconds: 0,
       started: false,
-      send: false
+      break: false,
+      sendNotification: false
     };
 
     this.handleNotification = this.handleNotification.bind(this);
     this.startTimer = this.startTimer.bind(this);
     this.stopTimer = this.stopTimer.bind(this);
     this.resetTimer = this.resetTimer.bind(this);
+    this.finishedTimer = this.finishedTimer.bind(this);
+    this.switchMode = this.switchMode.bind(this);
+    this.pomodoroMode = this.pomodoroMode.bind(this);
+    this.breakMode = this.breakMode.bind(this);
+
   }
 
+  componentWillMount() {
+    this.pomodoroMode();
+  }
+
+
   handleNotification(flag) {
     this.setState({
-      send: flag
+      sendNotification: flag
     });
   }
 
@@ -35,11 +46,9 @@ class Timer extends Component {
       seconds: state.seconds - 1
     }));
 
-    if (this.state.seconds <= 0) {
+    if (this.state.seconds === 0) {
       this.stopTimer();
-      this.setState({
-        send: true
-      });
+      this.finishedTimer();
     }
   }
 
@@ -47,6 +56,7 @@ class Timer extends Component {
     this.setState({
       started: true
     });
+
     this.interval = setInterval(() => this.tick(), 1000);
   }
 
@@ -54,12 +64,48 @@ class Timer extends Component {
     this.setState({
       started: false
     });
+
     clearInterval(this.interval);
   }
 
   resetTimer() {
-    this.stopTimer();
-    this.setState({ seconds: 1500 });
+    if(this.state.break) {
+      this.breakMode();
+    } else {
+      this.pomodoroMode();
+    }
+  }
+
+  finishedTimer() {
+    this.setState({
+      sendNotification: true,
+    });
+    this.switchMode();
+  }
+
+  switchMode() {
+    if(this.state.break && !this.state.started) {
+      this.pomodoroMode();
+    } else if(!this.state.break && !this.state.started) {
+      this.breakMode();
+    }
+  }
+
+
+  pomodoroMode() {
+    const pomodoroSeconds = 22;
+    this.setState({
+      seconds: pomodoroSeconds,
+      break: false
+    });
+  }
+
+  breakMode() {
+    const breakSeconds = 5
+    this.setState({
+      seconds: breakSeconds,
+      break: true
+    })
   }
 
   render() {    
@@ -70,6 +116,7 @@ class Timer extends Component {
             <Col>
               <LogoSpin
                 isStarted={this.state.started}
+                switchMode={this.switchMode}
               />
             </Col>
           </Row>
@@ -98,7 +145,7 @@ class Timer extends Component {
         </Container>
 
         <Notification
-          send={this.state.send} 
+          send={this.state.sendNotification} 
           handleNotification={this.handleNotification} 
           />
       </div>