refactoring: split component, functional component, inline style.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "tomadoro",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tomadoro",
   "description": "tomadoro",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "private": true,
   "engines": {
     "npm": "6.4.1",
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "bootstrap": "^4.3.1",
+    "prop-types": "^15.7.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-scripts": "^3.2.0",

src/App.css

@@ -1,57 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
-
-body {
-  background-color: #2e2929; /* e74c3c f04d3b  272222 */
-  user-select: none;
-  font-family: 'Fredoka One', cursive;
-  color: white;
-  margin: 0;
-  padding: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.title {
-  font-weight: bold;
-}
-
-.App {
-  text-align: center;
-  color: #131313;
-}
-
-.App-header {
-  display: flex;
-  min-height: 5vh;
-  flex-direction: column;
-  text-align: 'left';
-  align-items: center;
-  justify-content: center;
-  font-size: 44px;
-  color: white;  
-  text-shadow:  0 2px 4px #909090; /* 909090 */
-  margin-bottom: 6px;
-}
-
-a {
-  color: #f1fb61;
-}
-
-a:hover {
-  color: #fddec0;
-}
-
-.footer {
-  font-family: Arial, Helvetica, sans-serif;
-  margin-top: 8px;
-  color: #ffffff;
-  text-shadow:  0 2px 3px #a3a3a3;
-}
-
-
-.timer {
-  font-size: 110px; 
-  font-weight: normal;
-  text-shadow:  0 2px 3px #8a8888; /*0 0 1px #4b4b4b, 0 0 5px rgb(193, 194, 190);  a3a3a3*/
-  color: white;
-}

src/App.js

@@ -1,180 +0,0 @@
-import React, { Component } from 'react';
-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 {
-  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">
-          tomadoro
-        </div>
-
-        <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
-          this.state.startClickNotification ? (
-            <Notification
-              send={this.state.sendNotification}
-              handleNotification={this.handleNotification} />)
-            : ''}
-
-        <div className="footer">
-          <p>
-            <a href="https://github.com/frsposito/tomadoro">tomadoro</a>{` `}
-            by <a href="https://github.com/frsposito">Francesco Esposito</a>
-          </p>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default App;

src/components/Box.css

@@ -1,16 +0,0 @@
-.button {
-    font-size: 16px;
-    font-weight: lighter;
-    height: 50px;
-    border-radius: 30px;
-    width: 100%;
-    margin: 4px 0px 4px 0px;
-}
-
-.box {
-    padding: 6px;
-    background-color: white;
-    border-radius: 6px;
-    border-bottom: 16px solid #c84132;
-    box-shadow: 0 2px 3px #8a8888;
-}

src/components/Box.js

@@ -1,27 +1,37 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Button, Row, Col } from 'reactstrap';
-import './Box.css';
+import PropTypes from 'prop-types';
 
-class Box extends Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+const box = props => {
+  const buttonStyle = {
+    fontSize: '16px',
+    fontWeight: 'lighter',
+    height: '50px',
+    borderRadius: '30px',
+    width: '100%',
+    margin: '4px 0px 4px 0px'
+  };
+
+  const boxStyle = {
+    padding: '6px',
+    backgroundColor: 'white',
+    borderRadius: '6px',
+    borderBottom: '16px solid #c84132',
+    boxShadow: '0 2px 3px #8a8888'
+  };
 
-  render() {
   return (
-      <div className="box">
+    <div style={boxStyle}>
         <Row>
           <Col xs="12">
             <Button
-              className="button"
+              style={buttonStyle}
               block
               size="lg"
               color="success"
-              onClick={this.props.startTimer}
-              disabled={this.props.isStarted || this.props.seconds===0}
-            >
+              onClick={props.startButton}
+              disabled={props.isStarted || props.seconds===0}>
               START
             </Button>
           </Col>
@@ -29,23 +39,21 @@ class Box extends Component {
         <Row>
           <Col xs="6">
             <Button
-              className="button"
+              style={buttonStyle}
               color="danger"
               size="lg"
-              onClick={this.props.stopTimer}
-              disabled={!this.props.isStarted}
-            >
+              onClick={props.stopButton}
+              disabled={!props.isStarted}>
               STOP
              </Button>
           </Col>
           <Col xs="6">
               <Button
-                className="button"
+                style={buttonStyle}
                 color="secondary"
                 size="lg"
-                onClick={this.props.resetTimer}
-                disabled={this.props.isStarted}
-              >
+                onClick={props.resetButton}
+                disabled={props.isStarted}>
                 RESET
                 </Button>
             </Col>
@@ -53,6 +61,13 @@ class Box extends Component {
       </div>
   );
 }
-    }
 
-    export default Box;
+box.propTypes = {
+  startButton: PropTypes.func.isRequired,
+  stopButton: PropTypes.func.isRequired,
+  resetButton: PropTypes.func.isRequired,
+  isStarted: PropTypes.bool.isRequired,
+  seconds: PropTypes.number.isRequired
+};
+
+export default box;

src/components/Footer.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const footer = () => {
+  const style = {
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    marginTop: '8px',
+    color: '#ffffff',
+    textShadow: '0 2px 3px #a3a3a3'
+  };
+
+  return (
+    <div style={style}>
+      <p>
+        <a href="https://github.com/frsposito/tomadoro">tomadoro</a>{` `}
+        by <a href="https://github.com/frsposito">Francesco Esposito</a>
+      </p>
+    </div>
+  );
+  
+};
+
+export default footer;

src/components/Headbar.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const headbar = () => {
+  const style = {
+    display: 'flex',
+    minHeight: '5vh',
+    flexDirection: 'column',
+    textAlign: 'left',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '44px',
+    color: 'white',  
+    textShadow:  '0 2px 4px #909090', 
+    marginBottom: '6px'
+  };
+
+  return (
+    <div style={style}>
+      tomadoro
+    </div>
+  );
+};
+
+
+export default headbar;

src/components/Logo.js

@@ -1,25 +1,26 @@
-import React, { Component } from 'react';
-import logoSVG from '../logo.svg';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import logoSVG from '../assets/logo.svg';
 import './Logo.css';
 
-class Logo extends Component {
-  constructor(props) {
-    super(props);
-    this.defaultClassName = 'App-logo-rotation';
-    }
+const logo = props => {
+  const logoRotationClass = 'App-logo-rotation';
 
-  render() {
   return (
     <img 
-        className={`App-logo ${this.props.isStarted ? this.defaultClassName: ''}`}
+        className={`App-logo ${props.isStarted ? logoRotationClass: ''}`}
         src={logoSVG}
         alt="Tomato"
         title="Click on the tomato to change modes"
-        onClick={this.props.switchMode}
+        onClick={props.click} 
       ></img>
   )
 }
 
-}
+logo.propTypes = {
+  isStarted: PropTypes.bool.isRequired,
+  click: PropTypes.func.isRequired
+}; 
 
-export default Logo;
+export default logo;

src/components/Timer.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from 'prop-types';
+
+import { formatMinute } from '../utils';
+
+const timer = props => {
+  const style = {
+    fontSize: "110px",
+    fontWeight: "normal",
+    color: "white",
+    textShadow: "0 2px 3px #8a8888"
+  };
+
+  return (
+    <div style={style} >
+      { formatMinute(props.seconds) }
+    </div>
+  )
+  ;
+};
+
+timer.propTypes = {
+  seconds: PropTypes.number.isRequired
+};
+
+
+export default timer;

src/containers/App.css

@@ -0,0 +1,22 @@
+@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
+
+body {
+  background-color: #2e2929;
+  text-align: center;
+  color: #131313;
+  user-select: none;
+  font-family: 'Fredoka One', cursive;
+  color: white;
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: #f1fb61;
+}
+
+a:hover {
+  color: #fddec0;
+}

src/containers/App.js

@@ -0,0 +1,152 @@
+import React, { Component } from 'react';
+import { Container, Row, Col } from 'reactstrap';
+
+import Notification from './Notification';
+import Headbar from '../components/Headbar';
+import Timer from '../components/Timer';
+import Logo from '../components/Logo';
+import Box from '../components/Box';
+import Footer from '../components/Footer';
+import { formatMinute } from '../utils';
+
+import './App.css';
+ 
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.APP_NAME = 'tomadoro';
+    this.POMODORO_SECONDS = 1500;
+    this.BREAK_SECONDS = 300;
+
+    this.state = {
+      seconds: this.POMODORO_SECONDS,
+      started: false,
+      break: false,
+      activePopupNotification: false, 
+      sendNotificationFlag: false
+    };
+  }
+ 
+  tick = () => {
+    this.setState(state => ({ seconds: state.seconds - 1}));
+
+    document.title = `(${formatMinute(this.state.seconds)}) ${this.APP_NAME}`;
+
+    if (this.state.seconds === 0) {
+      this.stopTimer();
+      this.finishedTimer();
+    }
+  };
+
+  startTimer = () => {
+    this.setState({ started: true, activePopupNotification: 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.APP_NAME;
+  }
+
+  finishedTimer = () => {
+    this.setState({
+      sendNotificationFlag: true
+    });
+
+    this.changeMode();
+  }
+
+  changeMode = () => {
+    if (this.state.break && !this.state.started) {
+      this.pomodoroMode();
+    } else if (!this.state.break && !this.state.started) {
+      this.breakMode();
+    }
+  }
+
+  pomodoroMode = () => {
+    this.setState({
+      seconds: this.POMODORO_SECONDS,
+      break: false
+    });
+  }
+
+  breakMode = () => {
+    this.setState({
+      seconds: this.BREAK_SECONDS,
+      break: true
+    });
+  }
+
+  handleNotification = flag => {
+    this.setState({
+      sendNotificationFlag: flag
+    });
+  }
+
+  render() {
+    let notification = null;
+
+    if (this.state.activePopupNotification) {
+      notification = (
+        <Notification
+        send={this.state.sendNotificationFlag}
+        handleNotification={this.handleNotification} />
+      );
+    }
+
+    return (
+      <div>
+        {notification}
+        <Headbar />
+        <Container>
+          <Row>
+            <Col>
+              <Logo
+                isStarted={this.state.started}
+                click={this.changeMode} />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Timer seconds={this.state.seconds} />
+            </Col>
+          </Row>
+          <Row>
+            <Col
+              sm={{ size: 10, offset: 1 }}
+              md={{ size: 8, offset: 2 }}
+              lg={{ size: 6, offset: 3 }} >
+              <Box
+                startButton={this.startTimer}
+                stopButton={this.stopTimer}
+                resetButton={this.resetTimer}
+                isStarted={this.state.started}
+                seconds={this.state.seconds} />
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <Footer />
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default App;

src/containers/Notification.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import WebNotification from 'react-web-notification';
-import sound from '../sound.mp3';
+import sound from '../assets/sound.mp3';
 
 class Notification extends Component {
   constructor(props) {

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import App from './App';
+import App from './containers/App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/utils.js

@@ -0,0 +1,3 @@
+export const formatMinute = s => {
+  return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
+};