+
+ );
+
+};
+
+export default footer;
\ No newline at end of file
diff --git a/src/components/Headbar.js b/src/components/Headbar.js
new file mode 100644
index 0000000..1d7f253
--- /dev/null
+++ b/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 (
+ + tomadoro{` `} + by Francesco Esposito +
+
+ tomadoro
+
+ );
+};
+
+
+export default headbar;
\ No newline at end of file
diff --git a/src/components/Logo.js b/src/components/Logo.js
index d8b3162..a984945 100644
--- a/src/components/Logo.js
+++ b/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 (
-
+ { formatMinute(props.seconds) }
+
+ )
+ ;
+};
+
+timer.propTypes = {
+ seconds: PropTypes.number.isRequired
+};
+
+
+export default timer;
diff --git a/src/containers/App.css b/src/containers/App.css
new file mode 100644
index 0000000..6b3aa37
--- /dev/null
+++ b/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;
+}
diff --git a/src/containers/App.js b/src/containers/App.js
new file mode 100644
index 0000000..8294205
--- /dev/null
+++ b/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}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/App.test.js b/src/containers/App.test.js
similarity index 100%
rename from src/App.test.js
rename to src/containers/App.test.js
diff --git a/src/components/Notification.js b/src/containers/Notification.js
similarity index 97%
rename from src/components/Notification.js
rename to src/containers/Notification.js
index 617a6eb..fdf3ebb 100644
--- a/src/components/Notification.js
+++ b/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) {
diff --git a/src/index.js b/src/index.js
index 5d9961d..e047d30 100644
--- a/src/index.js
+++ b/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(