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