diff --git a/package-lock.json b/package-lock.json
index 19672d5..0dfff4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
+ "react-countdown": "^2.3.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
@@ -16415,6 +16416,18 @@
"node": ">=10"
}
},
+ "node_modules/react-countdown": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.2.tgz",
+ "integrity": "sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==",
+ "dependencies": {
+ "prop-types": "^15.7.2"
+ },
+ "peerDependencies": {
+ "react": ">= 15",
+ "react-dom": ">= 15"
+ }
+ },
"node_modules/react-dev-utils": {
"version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -34386,6 +34399,14 @@
"whatwg-fetch": "^3.4.1"
}
},
+ "react-countdown": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/react-countdown/-/react-countdown-2.3.2.tgz",
+ "integrity": "sha512-Q4SADotHtgOxNWhDdvgupmKVL0pMB9DvoFcxv5AzjsxVhzOVxnttMbAywgqeOdruwEAmnPhOhNv/awAgkwru2w==",
+ "requires": {
+ "prop-types": "^15.7.2"
+ }
+ },
"react-dev-utils": {
"version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
diff --git a/package.json b/package.json
index 0689256..df3f8b0 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
+ "react-countdown": "^2.3.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx
index d324078..eae351f 100644
--- a/src/components/MainPomodoro.jsx
+++ b/src/components/MainPomodoro.jsx
@@ -11,13 +11,9 @@ const MainPomodoro = () => {
const [displayHidden, setDisplayHidden] = useState(true)
const [timerOn, setTimerOn] = useState(false)
- const [counter, setCounter] = useState(
- {
- pomodoros: 0,
- rests: 0,
- longRests: 0
- }
- )
+ const [pomodoros, setPomodoros] = useState(0)
+ const [rests, setRests] = useState(0)
+ const [longRests, setLongRests] = useState(0)
const showStyles = () => {
console.log('Styles Deployed')
@@ -29,7 +25,23 @@ const MainPomodoro = () => {
<>
-
+
+
@@ -47,7 +59,7 @@ const MainPomodoro = () => {
-
+
>
diff --git a/src/components/MainPomodoroTimer.jsx b/src/components/MainPomodoroTimer.jsx
index 62d25ae..729f65b 100644
--- a/src/components/MainPomodoroTimer.jsx
+++ b/src/components/MainPomodoroTimer.jsx
@@ -1,4 +1,5 @@
import React, {useState} from 'react'
+import Countdown from 'react-countdown'
const MainPomodoroTimer = (props) => {
@@ -8,6 +9,8 @@ const MainPomodoroTimer = (props) => {
const [breakTime, setBreakTime] = useState(undefined)
const [weAreInBreakTime, setWeAreInBreakTime] = useState(false)
+ const [restCounter, setRestCounter] = useState(0)
+
const setTimeStyle = () => {
if (props.style === 'Can I play, Daddy?') {
@@ -34,7 +37,7 @@ const MainPomodoroTimer = (props) => {
if (props.style === 'Regular'){
const minutes = 0
- const seconds = 5
+ const seconds = 2
setMinutes(minutes)
setSeconds(seconds)
@@ -43,11 +46,11 @@ const MainPomodoroTimer = (props) => {
{
normal: {
minutes: 0,
- seconds: 10
+ seconds: 1
},
extended: {
minutes: 15,
- seconds: 0
+ seconds: 1
}
}
)
@@ -98,76 +101,108 @@ const MainPomodoroTimer = (props) => {
}
-
React.useEffect (
setTimeStyle, []
)
+ const startTimer = (velocity = 1) => {
+ return setTimeout(() => {
+
+ if (seconds === 0) {
+
+ setSeconds(59)
+ setMinutes((minutes - 1))
+
+ }
+
+ else {
+ setSeconds((seconds - 1))
+ }
+
+ }, (1000 / velocity))
+ }
+
React.useEffect ( () => {
let idTimeOut
- if (weAreInBreakTime && props.timerOn && minutes >= 0 && seconds > 0) {
+ if (props.timerOn) {
- idTimeOut = setTimeout(() => {
+ if(!weAreInBreakTime) {
+
+ if (minutes === 0 && seconds === 0) {
+
+ if (restCounter !== 3){
+
+ setTimeout( () => {
+ props.setPomodoros(props.pomodoros + 1)
+
+ setRestCounter((restCounter + 1))
- if (seconds === 0) {
+ setMinutes(breakTime.normal.minutes)
+ setSeconds(breakTime.normal.seconds)
+
+ setWeAreInBreakTime(true)
+
+ }, 1000)
+
+ }
+
+ if (restCounter === 3) {
+
+ setTimeout( () => {
+
+ props.setPomodoros(props.pomodoros + 1)
- setSeconds(59)
- console.log(seconds)
- setMinutes(minutes - 1)
-
- } else {
- const computedSeconds = seconds - 1
- setSeconds(computedSeconds)
+ setMinutes(breakTime.extended.minutes)
+ setSeconds(breakTime.extended.seconds)
+
+ setWeAreInBreakTime(true)
+
+ }, 1000)
+ }
}
-
- }, 1000)
-
- } 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 () => {
- clearInterval(idTimeOut)
+ if (minutes >= 0 || seconds > 0) {
+
+ idTimeOut = startTimer()
+
+ }
}
- }
+
+ if(weAreInBreakTime) {
+
+ if (minutes === 0 && seconds === 0) {
+
+ setTimeout( () => {
+
+ if (restCounter === 4) {
+ props.setLongRests(props.longRests + 1)
+ setRestCounter(0)
+
+ } else {
+ props.setRests(props.rests + 1)
+ }
+ setWeAreInBreakTime(false)
+ props.setTimerOn(false)
+ setTimeStyle()
+
+ }, 1000)
+ }
+
+ if (minutes >= 0 || seconds > 0) {
+
+ idTimeOut = startTimer()
+
+ }
+ }
+
+ return () => {
+ clearInterval(idTimeOut)
+ }
+ }
+ }, [props.timerOn, minutes, seconds, breakTime, setMinutes, setSeconds]
)
const formatMinutes = () => {
diff --git a/src/components/PomodoroCounter.jsx b/src/components/PomodoroCounter.jsx
index 9e08892..4e7a209 100644
--- a/src/components/PomodoroCounter.jsx
+++ b/src/components/PomodoroCounter.jsx
@@ -1,17 +1,18 @@
import React from 'react'
const PomodoroCounter = (props) => {
+
return (
-
- {props.counter.pomodoros} - Pomodoros
+ {props.pomodoros} - Pomodoros
-
- {props.counter.rests} - Rests
+ {props.rests} - Rests
-
- {props.counter.longRests} - Long rests
+ {props.longRests} - Long rests