franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Remade the timer logic and integrate the counter of pomodoros

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-22 21:42:26 -03:00
parent 4ed7f228f9
commit 75ddb4b4ce
5 changed files with 140 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

30
src/components/MainPomodoro.jsx
View File

@@ -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 = () => {
<>
<div className="main-pomodoro">
<MainPomodoroTimer style={style} setTimerOn={setTimerOn} timerOn={timerOn} counter={counter} setCounter={setCounter}/>
<MainPomodoroTimer
style={style}
timerOn={timerOn}
setTimerOn={setTimerOn}
pomodoros={pomodoros}
setPomodoros={setPomodoros}
rests={rests}
setRests={setRests}
longRests={longRests}
setLongRests={setLongRests}
/>
<div className="style-display">
<h4>
@@ -47,7 +59,7 @@ const MainPomodoro = () => {
</div>
<StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
<PomodoroCounter counter={counter}/>
<PomodoroCounter pomodoros={pomodoros} rests={rests} longRests={longRests}/>
</>

151
src/components/MainPomodoroTimer.jsx
View File

@@ -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 = () => {

7
src/components/PomodoroCounter.jsx
View File

@@ -1,17 +1,18 @@
import React from 'react'
const PomodoroCounter = (props) => {
return (
<div className="pomodoro-counter">
<ul>
<li>
<span className="quantity">{props.counter.pomodoros}</span><span className="separator"> - </span>Pomodoros
<span className="quantity">{props.pomodoros}</span><span className="separator"> - </span>Pomodoros
</li>
<li>
<span className="quantity">{props.counter.rests}</span><span className="separator"> - </span>Rests
<span className="quantity">{props.rests}</span><span className="separator"> - </span>Rests
</li>
<li>
<span className="quantity">{props.counter.longRests}</span><span className="separator"> - </span>Long rests
<span className="quantity">{props.longRests}</span><span className="separator"> - </span>Long rests
</li>
</ul>
</div>