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

Added Timer logic

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-20 18:40:43 -03:00
parent ac140b997a
commit e4df25e1b9
6 changed files with 111 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/AboutThis.jsx
View File

@@ -1,6 +1,9 @@
import React from 'react'
const AboutThis = () => {
console.log('ABOUT THIS DEPLOYED')
return (
<div id="about-this">
<div className="titles">

3
src/components/BannerLogin.jsx
View File

@@ -1,6 +1,9 @@
import React from 'react'
const BannerLogin = () => {
console.log('BANNER LOGIN DEPLOYED')
return (
<div className="banner-login">
<p>Access to integrate and save your progress with Clockify!</p>

3
src/components/GoDownArrow.jsx
View File

@@ -2,6 +2,9 @@ import React from 'react'
import { Link, animateScroll as scroll } from "react-scroll";
const GoDownArrow = () => {
console.log('GO DOWN ARROW DEPLOYED')
return (
<div className="go-down">
<Link to="about-this" smooth={true}><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></Link>

3
src/components/Header.jsx
View File

@@ -3,6 +3,9 @@ import HeaderButton from './HeaderButton'
const Header = () => {
//<HeaderButton/>
console.log("HEADER DEPLOYED")
return (
<header className="header-main-page">
<h1>Pomodoro Timer</h1>

19
src/components/MainPomodoro.jsx
View File

@@ -1,13 +1,14 @@
import React, {useState} from 'react'
import MainPomodoroTimer from './MainPomodoroTimer'
import StyleSelector from './StyleSelector'
const MainPomodoro = () => {
const [minutes, setMinutes] = useState('61')
const [seconds, setSeconds] = useState('60')
console.log('MAIN POMODORO DEPLOYED')
const [style, setStyle] = useState('Regular')
const [displayHidden, setDisplayHidden] = useState(true)
const [timerOn, setTimerOn] = useState(false)
const showStyles = () => {
console.log('Styles Deployed')
@@ -15,14 +16,13 @@ const MainPomodoro = () => {
setDisplayHidden(!displayHidden)
}
console.log(timerOn)
return (
<>
<div className="main-pomodoro">
<div className="timer">
<div className="minutes">{minutes}</div>
<div className="separator">:</div>
<div className="seconds">{seconds}</div>
</div>
<MainPomodoroTimer style={style} timerOn={timerOn}/>
<div className="style-display">
<h4>
@@ -33,7 +33,10 @@ const MainPomodoro = () => {
</h3>
</div>
<button class="start-pomodoro">START</button>
<button class="start-pomodoro" onClick={() => setTimerOn(!timerOn)}>{
timerOn ? 'STOP' : 'START'
}</button>
</div>
<StyleSelector displayHidden={displayHidden}/>

88
src/components/MainPomodoroTimer.jsx Normal file
View File

@@ -0,0 +1,88 @@
import react from 'react'
import React, {useState} from 'react'
const MainPomodoroTimer = (props) => {
const [minutes, setMinutes] = useState('61')
const [seconds, setSeconds] = useState('60')
const setTimeStyle = () => {
if (props.style === 'Regular'){
const minutes = 25
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
}
}
React.useEffect (
setTimeStyle, []
)
React.useEffect ( () => {
let idTimeOut
if (props.timerOn) {
idTimeOut = setTimeout(() => {
if (seconds === 0) {
setSeconds(59)
console.log(seconds)
setMinutes(minutes - 1)
} else {
const computedSeconds = seconds - 1
setSeconds(computedSeconds)
}
}, 1000)
} else {
setTimeStyle()
}
return () => {
clearInterval(idTimeOut)
}
}
)
const formatMinutes = () => {
if (minutes < 10) {
return '0' + minutes
}
else {
return minutes
}
}
const formatSeconds = () => {
if (seconds < 10) {
return '0' + seconds
}
else {
return seconds
}
}
return (
<div className="timer">
<div className="minutes">{formatMinutes()}</div>
<div className="separator">:</div>
<div className="seconds">{formatSeconds()}</div>
</div>
)
}
export default MainPomodoroTimer