From 9f147f4885f418eda09d1739ba9bb898b9231deb Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Thu, 14 Mar 2019 16:53:56 +0100
Subject: [PATCH] implements timer

---
 src/App.js               | 19 ++--------
 src/components/Timer.css |  3 ++
 src/components/Timer.js  | 80 ++++++++++++++++++++++++++++++++++++++++
 src/index.js             |  1 +
 4 files changed, 88 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Timer.css
 create mode 100644 src/components/Timer.js

diff --git a/src/App.js b/src/App.js
index 7e261ca..ffe120d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,14 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import Timer from './components/Timer';
 import './App.css';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+       <h1>tomadoro</h1>
+       
+       <Timer />
       </div>
     );
   }
diff --git a/src/components/Timer.css b/src/components/Timer.css
new file mode 100644
index 0000000..e307309
--- /dev/null
+++ b/src/components/Timer.css
@@ -0,0 +1,3 @@
+.timer {
+    font-size: 120px; 
+}
\ No newline at end of file
diff --git a/src/components/Timer.js b/src/components/Timer.js
new file mode 100644
index 0000000..bef076f
--- /dev/null
+++ b/src/components/Timer.js
@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import { Button } from 'reactstrap';
+import './Timer.css';
+
+class Timer extends Component {
+
+
+  constructor(props) {
+    super(props);
+    this.defaultSeconds = 1500;
+    this.state = { 
+      seconds: this.defaultSeconds,
+      started: false
+    };
+    this.startTimer = this.startTimer.bind(this);
+    this.stopTimer = this.stopTimer.bind(this);
+    this.resetTimer = this.resetTimer.bind(this);
+  }
+  
+  fmtMSS(s){return(s-(s%=60))/60+(9<s?':':':0')+s}
+
+  tick() {
+    this.setState(state => ({
+      seconds: state.seconds -1
+    }));
+  }
+
+  startTimer() {
+    this.setState({ started: true })
+    this.interval = setInterval(() => this.tick(), 1000);
+  }
+  
+  stopTimer() {
+    this.setState({ started: false });
+    clearInterval(this.interval);
+  }
+
+  resetTimer() {
+    this.stopTimer();
+    this.setState({ seconds: this.defaultSeconds});
+  }
+
+  render() {
+    return (
+      <div className="App">
+        
+        <p class="timer">{this.fmtMSS(this.state.seconds)}</p>
+        
+        <Button 
+          size="lg"
+          color="success"
+          onClick={this.startTimer}
+          disabled={this.state.started}
+        >
+          START
+        </Button>
+
+        <Button 
+          color="danger"
+          size="lg"
+          onClick={this.stopTimer}
+          disabled={!this.state.started}
+        >
+          STOP
+        </Button>
+
+        <Button
+          color="secondary"
+          size="lg"
+          onClick={this.resetTimer}
+          disabled={this.state.started}
+        >
+          RESET
+        </Button>
+      </div>
+    );
+  }
+}
+
+export default Timer;
diff --git a/src/index.js b/src/index.js
index 87d1be5..aac3a39 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';