diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx
index a335245..d324078 100644
--- a/src/components/MainPomodoro.jsx
+++ b/src/components/MainPomodoro.jsx
@@ -11,7 +11,13 @@ const MainPomodoro = () => {
const [displayHidden, setDisplayHidden] = useState(true)
const [timerOn, setTimerOn] = useState(false)
- //const [counter, setCounter]
+ const [counter, setCounter] = useState(
+ {
+ pomodoros: 0,
+ rests: 0,
+ longRests: 0
+ }
+ )
const showStyles = () => {
console.log('Styles Deployed')
@@ -23,7 +29,7 @@ const MainPomodoro = () => {
<>
-
+
@@ -41,7 +47,7 @@ const MainPomodoro = () => {
-
+
>
diff --git a/src/components/MainPomodoroTimer.jsx b/src/components/MainPomodoroTimer.jsx
index 6a06f58..62d25ae 100644
--- a/src/components/MainPomodoroTimer.jsx
+++ b/src/components/MainPomodoroTimer.jsx
@@ -1,11 +1,13 @@
-import react from 'react'
import React, {useState} from 'react'
const MainPomodoroTimer = (props) => {
const [minutes, setMinutes] = useState('61')
const [seconds, setSeconds] = useState('60')
-
+
+ const [breakTime, setBreakTime] = useState(undefined)
+ const [weAreInBreakTime, setWeAreInBreakTime] = useState(false)
+
const setTimeStyle = () => {
if (props.style === 'Can I play, Daddy?') {
@@ -14,16 +16,42 @@ const MainPomodoroTimer = (props) => {
setMinutes(minutes)
setSeconds(seconds)
+
+ setBreakTime(
+ {
+ normal: {
+ minutes: 5,
+ seconds: 0
+ },
+ extended: {
+ minutes: 15,
+ seconds: 0
+ }
+ }
+ )
}
if (props.style === 'Regular'){
- const minutes = 25
- const seconds = 0
+ const minutes = 0
+ const seconds = 5
setMinutes(minutes)
setSeconds(seconds)
+ setBreakTime(
+ {
+ normal: {
+ minutes: 0,
+ seconds: 10
+ },
+ extended: {
+ minutes: 15,
+ seconds: 0
+ }
+ }
+ )
+
}
if (props.style === 'Creative work') {
@@ -32,6 +60,19 @@ const MainPomodoroTimer = (props) => {
setMinutes(minutes)
setSeconds(seconds)
+
+ setBreakTime(
+ {
+ normal: {
+ minutes: 10,
+ seconds: 0
+ },
+ extended: {
+ minutes: 20,
+ seconds: 0
+ }
+ }
+ )
}
if (props.style === 'Last minute delivery') {
@@ -40,6 +81,19 @@ const MainPomodoroTimer = (props) => {
setMinutes(minutes)
setSeconds(seconds)
+
+ setBreakTime(
+ {
+ normal: {
+ minutes: 15,
+ seconds: 0
+ },
+ extended: {
+ minutes: 30,
+ seconds: 0
+ }
+ }
+ )
}
}
@@ -49,10 +103,11 @@ const MainPomodoroTimer = (props) => {
setTimeStyle, []
)
+
React.useEffect ( () => {
let idTimeOut
- if (props.timerOn) {
+ if (weAreInBreakTime && props.timerOn && minutes >= 0 && seconds > 0) {
idTimeOut = setTimeout(() => {
@@ -69,8 +124,44 @@ const MainPomodoroTimer = (props) => {
}, 1000)
- } else {
- setTimeStyle()
+ } else if (weAreInBreakTime && props.timerOn && minutes === 0 && seconds === 0) {
+
+ setTimeout( () => {
+ setWeAreInBreakTime(false)
+ props.setTimerOn(false)
+ setTimeStyle()
+
+ }, 1000)
+ }
+
+ if (props.timerOn && !weAreInBreakTime && minutes >= 0 && seconds > 0) {
+
+ idTimeOut = setTimeout(() => {
+
+ if (seconds === 0) {
+
+ setSeconds(59)
+ console.log(seconds)
+ setMinutes(minutes - 1)
+
+ } else {
+ const computedSeconds = seconds - 1
+ setSeconds(computedSeconds)
+ }
+
+ }, 1000)
+
+ }
+
+ else if (props.timerOn && !weAreInBreakTime){
+
+ setTimeout( () => {
+ setMinutes(breakTime.normal.minutes)
+ setSeconds(breakTime.normal.seconds)
+ setWeAreInBreakTime(true)
+
+ }, 1000)
+
}
return () => {
diff --git a/src/components/PomodoroCounter.jsx b/src/components/PomodoroCounter.jsx
index 90d5407..9e08892 100644
--- a/src/components/PomodoroCounter.jsx
+++ b/src/components/PomodoroCounter.jsx
@@ -1,17 +1,17 @@
import React from 'react'
-const PomodoroCounter = () => {
+const PomodoroCounter = (props) => {
return (
-
- 0 - Pomodoros
+ {props.counter.pomodoros} - Pomodoros
-
- 0 - Rests
+ {props.counter.rests} - Rests
-
- 0 - Long rests
+ {props.counter.longRests} - Long rests