From 05d157c32eb521735f2bd0ab7f4faccaee9e06e0 Mon Sep 17 00:00:00 2001
From: Francesco Esposito <33671357+frab1t@users.noreply.github.com>
Date: Thu, 18 Apr 2019 17:44:32 +0200
Subject: [PATCH] Edit app (remove timer)

---
 src/App.css              |   7 ++
 src/App.js               | 170 ++++++++++++++++++++++++++++++++++++---
 src/components/Timer.css |   6 --
 src/components/Timer.js  | 159 ------------------------------------
 4 files changed, 166 insertions(+), 176 deletions(-)
 delete mode 100644 src/components/Timer.css
 delete mode 100644 src/components/Timer.js

diff --git a/src/App.css b/src/App.css
index 1c28c52..6e0f3f6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -50,3 +50,10 @@ a:hover {
   text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);
 }
 
+
+.timer {
+  font-size: 100px; 
+  font-weight: normal;
+  text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
+  color: white;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index f0f1326..e5c57cd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,172 @@
 import React, { Component } from 'react';
-import Timer from './components/Timer';
+import { Container, Row, Col } from 'reactstrap';
+import Logo from './components/Logo';
+import Box from './components/Box';
+import Notification from './components/Notification';
 import './App.css';
 
 class App extends Component {
-  render() {
+  constructor(props) {
+    super(props);
+
+    this.appName = 'tomadoro';
+    this.pomodoroSeconds = 1500;
+    this.breakSeconds = 300;
+    
+    this.state = {
+      startClickNotification: false, // TODO: refactoring identificativo 
+      seconds: 0,
+      started: false,
+      break: false,
+      sendNotification: false
+    };
+
+    // binding
+    this.startTimer = this.startTimer.bind(this);
+    this.stopTimer = this.stopTimer.bind(this);
+    this.resetTimer = this.resetTimer.bind(this);
+    this.terminatedTimer = this.terminatedTimer.bind(this);
+    this.pomodoroMode = this.pomodoroMode.bind(this);
+    this.breakMode = this.breakMode.bind(this);
+    this.switchMode = this.switchMode.bind(this);
+    this.formatMinute = this.formatMinute.bind(this);
+    this.handleNotification = this.handleNotification.bind(this);
+  }
+
+  componentWillMount() {
+    this.pomodoroMode();
+  }
+
+  formatMinute(s) {
+    return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
+  }
+
+  tick() {
+    this.setState(state => ({
+      seconds: state.seconds -1
+    }));
+
+    document.title = `(${this.formatMinute(this.state.seconds)}) ${this.appName}`;
+    
+    if (this.state.seconds === 0) {
+      this.stopTimer();
+      this.terminatedTimer();
+    }
+  }
+
+  startTimer() {
+    this.setState({
+      started: true,
+      startClickNotification: true
+    });
+
+    this.interval = setInterval(() => this.tick(), 1000);
+  } 
+
+  stopTimer() {
+    this.setState({
+      started: false
+    });
+
+    clearInterval(this.interval);
+  }
+
+  resetTimer() {
+    if(this.state.break) {
+      this.breakMode();
+    } else {
+      this.pomodoroMode();
+    }
+
+    document.title = this.appName;
+  }
+
+  terminatedTimer() {
+    this.setState({
+      sendNotification: true
+    });
+
+    this.switchMode();
+  }
+
+  pomodoroMode() {
+    this.setState({
+      seconds: this.pomodoroSeconds,
+      break: false
+    });
+  }
+
+  breakMode() {
+    this.setState({
+      seconds: this.breakSeconds,
+      break: true
+    });
+  }
+  
+  switchMode() { // TODO: refactoring naming
+    if(this.state.break && !this.state.started) {
+      this.pomodoroMode();
+    } else if(!this.state.break && !this.state.started) {
+      this.breakMode();
+    }
+  }
+
+  handleNotification(flag) {
+    this.setState({
+      sendNotification: flag
+    });
+  }
+
+  render() {    
     return (
       <div className="App">
-        <div
-          className="App-header"
-        >
+        <div className="App-header">
           tomadoro
         </div>
         
-        <div>
-          <Timer />
-        </div>
+        <Container>
+          <Row>
+            <Col>
+              <Logo
+                isStarted={this.state.started}
+                switchMode={this.switchMode}
+              />
+            </Col>
+          </Row>
 
-        <div
-          className="footer"
-        >
+          <Row>
+            <Col>
+              <p className="timer">
+                {this.formatMinute(this.state.seconds)}
+              </p>
+            </Col>
+          </Row>
+
+          <Row>
+            <Col 
+              sm={{size: 10, offset: 1}} 
+              md={{size: 8, offset: 2}} 
+              lg={{ size: 6, offset: 3 }}
+            >
+              <Box 
+                startTimer={this.startTimer}
+                stopTimer={this.stopTimer}
+                isStarted={this.state.started}
+                resetTimer={this.resetTimer}
+                seconds={this.state.seconds}
+              />
+            </Col>
+          </Row>
+        </Container>
+
+        { // notification
+        this.state.startClickNotification ? (
+          <Notification 
+          send={this.state.sendNotification}
+          handleNotification={this.handleNotification} />) 
+        : ''}
+
+        <div className="footer">
           <p>
             <a href="https://github.com/frab1t/tomadoro">tomadoro</a>{` `}
             by <a href="https://twitter.com/frab1t">@frab1t</a> (Francesco Esposito)
diff --git a/src/components/Timer.css b/src/components/Timer.css
deleted file mode 100644
index 727b9e3..0000000
--- a/src/components/Timer.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.timer {
-    font-size: 100px; 
-    font-weight: normal;
-    text-shadow: 0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);
-    color: white;
-}
\ No newline at end of file
diff --git a/src/components/Timer.js b/src/components/Timer.js
deleted file mode 100644
index d154ff6..0000000
--- a/src/components/Timer.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { Component } from 'react';
-import { Container, Row, Col } from 'reactstrap';
-import Notification from './Notification';
-import Box from './Box';
-import Logo from './Logo';
-import './Timer.css';
-
-class Timer extends Component {
-  constructor(props) {
-    super(props);
-    this.appName = 'tomadoro';
-    this.state = {
-      seconds: 0,
-      started: 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({
-      sendNotification: flag
-    });
-  }
-
-  formatMinute(s) {
-    return (s - (s %= 60)) / 60 + (9 < s ? ':' : ':0') + s;
-  }
-  
-  tick() {
-    this.setState(state => ({
-      seconds: state.seconds - 1
-    }));
-
-    document.title=`(${this.formatMinute(this.state.seconds)}) ${this.appName}`; 
-
-    if (this.state.seconds === 0) {
-      this.stopTimer();
-      this.finishedTimer();
-    }
-  }
-
-  startTimer() {
-    this.setState({
-      started: true
-    });
-
-    this.interval = setInterval(() => this.tick(), 1000);
-  }
-
-  stopTimer() {
-    this.setState({
-      started: false
-    });
-
-    clearInterval(this.interval);
-  }
-
-  resetTimer() {
-    if(this.state.break) {
-      this.breakMode();
-    } else {
-      this.pomodoroMode();
-    }
-
-    document.title = this.appName;
-  }
-
-  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 = 1500;
-    this.setState({
-      seconds: pomodoroSeconds,
-      break: false
-    });
-  }
-
-  breakMode() {
-    const breakSeconds = 300
-    this.setState({
-      seconds: breakSeconds,
-      break: true
-    })
-  }
-
-  render() {    
-    return (
-      <div className="App">
-        <Container>
-          <Row>
-            <Col>
-              <Logo
-                isStarted={this.state.started}
-                switchMode={this.switchMode}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              <p
-                className="timer"
-              >
-                {this.formatMinute(this.state.seconds)}
-              </p>
-            </Col>
-          </Row>
-          <Row>
-            <Col sm={{size: 10, offset: 1}} md={{size: 8, offset: 2}} lg={{ size: 6, offset: 3 }}>
-              <Box
-                startTimer={this.startTimer}
-                stopTimer={this.stopTimer}
-                isStarted={this.state.started}
-                resetTimer={this.resetTimer}
-                seconds={this.state.seconds}
-              />
-            </Col>
-          </Row>
-        </Container>
-
-        <Notification
-          send={this.state.sendNotification} 
-          handleNotification={this.handleNotification} 
-          />
-      </div>
-    );
-  }
-}
-
-export default Timer;