edit readme(screenshot)

README.md

@@ -1,19 +1,61 @@
-# tomadoro
-A timer based on the Pomodoro Technique
+<h1 align="center">Welcome to tomadoro 🍅</h1>
+<p>
+  <img alt="Version" src="https://img.shields.io/badge/version-1.7.0-blue.svg?cacheSeconds=2592000" />
+  <a href="https://github.com/franjsco/tomadoro/graphs/commit-activity" target="_blank">
+    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
+  </a>
+  <a href="https://github.com/franjsco/tomadoro/blob/master/LICENSE" target="_blank">
+    <img alt="License: GPL--3.0--or--later" src="https://img.shields.io/github/license/franjsco/tomadoro" />
+  </a>
+  <a href="https://twitter.com/franjsco" target="_blank">
+    <img alt="Twitter: franjsco" src="https://img.shields.io/twitter/follow/franjsco.svg?style=social" />
+  </a>
+</p>
 
-![tomadoro screenshot](screenshot.png)
+> A timer based on the Pomodoro Technique
 
-Technologies: 
-* HTML5 and CSS
-* JavaScript 
-* React.js
-* Bootstrap (reactstrap)
+### ✨ [Demo](https://franjsco.github.io/tomadoro/)
 
-## Demo
-Try tomadoro: https://frab1t.github.io/tomadoro/
+![tomadoro screenshot](screenshot.jpg) 
 
-## License
-GPLv3
+## Install
 
----
-Made with ❤️ by Francesco Esposito ([@frab1t](https://github.com/frab1t))
+```sh
+npm install
+```
+
+## Usage
+
+**Development**
+```sh
+npm run start
+```
+
+**Production**
+```sh
+npm run build
+npm install -g serve
+serve -s build
+```
+Other Solutions: [here](https://create-react-app.dev/docs/deployment/)
+
+## Author
+
+👤 **franjsco (Francesco Esposito)**
+
+* Website: https://franjsco.github.io/
+* Twitter: [@franjsco](https://twitter.com/franjsco)
+* Github: [@franjsco](https://github.com/franjsco)
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## 📝 License
+Copyright © 2020 [franjsco (Francesco Esposito)](https://github.com/franjsco).<br />
+This project is [GPL--3.0--or--later](https://github.com/franjsco/tomadoro/blob/master/LICENSE) licensed.
+
+Photo by Zoltan Tasi on Unsplash
+
+***
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

package.json

@@ -1,17 +1,18 @@
 {
   "name": "tomadoro",
   "description": "tomadoro",
-  "version": "1.0.0",
+  "version": "1.7.0",
   "private": true,
   "engines": {
     "npm": "6.4.1",
     "node": "10.15.0"
   },
   "dependencies": {
-    "bootstrap": "^4.3.1",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "react-scripts": "2.1.8",
+    "bootstrap": "^4.4.1",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
     "react-web-notification": "^0.5.0",
     "reactstrap": "^7.1.0"
   },
@@ -23,7 +24,7 @@
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   },
-  "homepage": "http://frab1t.github.io/tomadoro",
+  "homepage": "http://franjsco.github.io/tomadoro",
   "eslintConfig": {
     "extends": "react-app"
   },
@@ -35,11 +36,11 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/frab1t/tomadoro.git"
+    "url": "git+https://github.com/franjsco/tomadoro.git"
   },
-  "author": "frab1t",
+  "author": "franjsco",
   "license": "GPL-3.0-or-later",
   "devDependencies": {
-    "gh-pages": "^2.0.1"
+    "gh-pages": "^2.2.0"
   }
 }

src/App.css

@@ -1,52 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
-
-body {
-  background-color: #f04d3b; /* e74c3c */
-  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 {
-  background-color: #c94233; /*c0392b*/
-  display: flex;
-  min-height: 5vh;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(25px + 2vmin);
-  color: white;  
-  text-shadow: 0 0 1px #2b0f0f, 0 0 2px rgb(193, 194, 190);
-  margin-bottom: 20px;
-  box-shadow: 0 0 2px #cf4242, 0 0 6px #2B2D1F;
-
-}
-
-a {
-  color: #f1fb61;
-}
-
-a:hover {
-  color: #fddec0;
-}
-
-.footer {
-  font-family: Arial, Helvetica, sans-serif;
-  margin-top: 15px;
-  color: #ffffff;
-  text-shadow: 0 0 2px #cf4242, 0 0 3px rgb(193, 194, 190);
-}
-

src/App.js

@@ -1,32 +0,0 @@
-import React, { Component } from 'react';
-import Timer from './components/Timer';
-import './App.css';
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <div
-          className="App-header"
-        >
-          tomadoro
-        </div>
-        
-        <div>
-          <Timer />
-        </div>
-
-        <div
-          className="footer"
-        >
-          <p>
-            <a href="https://github.com/frab1t/tomadoro">tomadoro</a>{` `}
-            by <a href="https://twitter.com/frab1t">@frab1t</a> (Francesco Esposito)
-          </p>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default App;

src/components/Box.css

@@ -1,26 +0,0 @@
-.button {
-    font-size: 16px;
-    font-weight: lighter;
-    height: 50px;
-    border-radius: 40px;
-    width: 100%;
-    margin: 5px 0px 5px 0px;
-    transition: all .2s ease-in-out;
-    box-shadow:0 0 1px #111110, 0 0 10px rgb(193, 194, 190);
-}
-
-.box {
-    padding: 10px;
-    background-color: white;
-    border-radius: 10px;
-    box-shadow:0 0 1px #111010, 0 0 10px rgb(193, 194, 190);
-}
-
-.button:hover { 
-    transform: scale(1.01); 
-}
-
-.button:focus { 
-    transform: scale(1.01); 
-    box-shadow:0 0 5px #111010, 0 0 10px rgb(193, 194, 190);
-}

src/components/Box.js

@@ -1,58 +1,73 @@
-import React, { Component } from 'react';
-import { Button, Row, Col } from 'reactstrap';
-import './Box.css';
+import React from 'react';
+import { Button, Row, Col, Card, CardBody } from 'reactstrap';
+import PropTypes from 'prop-types';
 
-class Box extends Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+const box = props => {
+  const buttonStyle = {
+    fontSize: '20px',
+    height: '54px',
+    borderRadius: '24px',
+    width: '100%',
+    margin: '4px 0px 4px 0px'
+  };
 
-  render() {
-    return (
-      <div className="box">
-        <Row>
+  const boxStyle = {
+    padding: '2px',
+    borderRadius: '14px',
+    background: 'rgb(0,0,0, 0.4)'
+  };
+
+  
+  return (
+    <Card style={boxStyle}>
+      <CardBody>
+      <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}
-            >
-              START
+              onClick={props.startButton}
+              disabled={props.isStarted || props.seconds===0}>
+              Start
             </Button>
           </Col>
         </Row>
         <Row>
           <Col xs="6">
             <Button
-              className="button"
+              style={buttonStyle}
               color="danger"
               size="lg"
-              onClick={this.props.stopTimer}
-              disabled={!this.props.isStarted}
-            >
-              STOP
+              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}
-              >
-                RESET
+                onClick={props.resetButton}
+                disabled={props.isStarted}>
+                Reset
                 </Button>
             </Col>
         </Row>
-      </div>
-        );
-      }
-    }
-    
-    export default Box;
+      </CardBody>
+    </Card>
+  );
+}
+
+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,19 @@
+import React from 'react';
+
+const footer = () => {
+  const style = {
+    marginTop: '2px'
+  };
+
+  return (
+    <div style={style}>
+      <p>
+        <a href="https://github.com/franjsco/tomadoro">tomadoro</a>{` `}
+        by <a href="https://github.com/franjsco">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: '4vh',
+    flexDirection: 'column',
+    textAlign: 'left',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '44px',
+    color: 'white',  
+    textShadow:  '0 2px 2px #1f1f1f', 
+    marginBottom: '2px'
+  };
+
+  return (
+    <div style={style}>
+      tomadoro
+    </div>
+  );
+};
+
+
+export default headbar;

src/components/Logo.css

@@ -1,13 +1,13 @@
 .App-logo {
-    height: 130px;
-    filter: drop-shadow(0 0 0.30rem #f8ff9c);
+    height: 140px;
+    filter: drop-shadow(0 0 0.58rem #1f1f1f);
     align-items: center;
     justify-content: center;
     text-align: center;
     transition: all .3s ease-in-out;
 }
 
-.App-logo:hover { transform: scale(1.2); }
+.App-logo:hover { transform: scale(1.1); }
 
 .App-logo-rotation {
     animation: App-logo-spin infinite 5s linear;

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: ''}`}
+  return (
+    <img 
+        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>
-    )
-  }
-
+  );
 }
 
-export default Logo;
+logo.propTypes = {
+  isStarted: PropTypes.bool.isRequired,
+  click: PropTypes.func.isRequired
+}; 
+
+export default logo;

src/components/Timer.css

@@ -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;
-}

src/components/Timer.js

@@ -1,159 +1,26 @@
-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';
+import React from "react";
+import PropTypes from 'prop-types';
 
-class Timer extends Component {
-  constructor(props) {
-    super(props);
-    this.appName = 'tomadoro';
-    this.state = {
-      seconds: 0,
-      started: false,
-      break: false,
-      sendNotification: false
-    };
+import { formatMinute } from '../utils';
 
-    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);
+const timer = props => {
+  const style = {
+    fontSize: "120px",
+    fontWeight: "normal",
+    textShadow: "0 2px 2px #1f1f1f"
+  };
 
-  }
+  return (
+    <div style={style} >
+      { formatMinute(props.seconds) }
+    </div>
+  )
+  ;
+};
 
-  componentWillMount() {
-    this.pomodoroMode();
-  }
+timer.propTypes = {
+  seconds: PropTypes.number.isRequired
+};
 
 
-  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;
+export default timer;

src/containers/App.css

@@ -0,0 +1,24 @@
+@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
+
+body {
+  background-image: url('../assets/bg.jpg');
+  background-position: 'center';
+  background-size: cover;
+  background-color: #2e2e2e;
+  text-align: center;
+  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: #d45a45;
+}
+
+a:hover {
+  color: #f6f6f3;
+}

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;
+};