diff --git a/src/components/AboutThis.jsx b/src/components/AboutThis.jsx index a9f2a05..5731bf8 100644 --- a/src/components/AboutThis.jsx +++ b/src/components/AboutThis.jsx @@ -1,6 +1,9 @@ import React from 'react' const AboutThis = () => { + + console.log('ABOUT THIS DEPLOYED') + return (
diff --git a/src/components/BannerLogin.jsx b/src/components/BannerLogin.jsx index ebb3842..472f2cd 100644 --- a/src/components/BannerLogin.jsx +++ b/src/components/BannerLogin.jsx @@ -1,6 +1,9 @@ import React from 'react' const BannerLogin = () => { + + console.log('BANNER LOGIN DEPLOYED') + return (

Access to integrate and save your progress with Clockify!

diff --git a/src/components/GoDownArrow.jsx b/src/components/GoDownArrow.jsx index ace1c94..c8b3401 100644 --- a/src/components/GoDownArrow.jsx +++ b/src/components/GoDownArrow.jsx @@ -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 (
diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 3930f7b..4f6ba83 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -3,6 +3,9 @@ import HeaderButton from './HeaderButton' const Header = () => { // + + console.log("HEADER DEPLOYED") + return (

Pomodoro Timer

diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx index eb08a79..938f2ce 100644 --- a/src/components/MainPomodoro.jsx +++ b/src/components/MainPomodoro.jsx @@ -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 ( <>
-
-
{minutes}
-
:
-
{seconds}
-
+ +

@@ -33,7 +33,10 @@ const MainPomodoro = () => {

- +
diff --git a/src/components/MainPomodoroTimer.jsx b/src/components/MainPomodoroTimer.jsx new file mode 100644 index 0000000..9a6b0d5 --- /dev/null +++ b/src/components/MainPomodoroTimer.jsx @@ -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 ( +
+
{formatMinutes()}
+
:
+
{formatSeconds()}
+
+ ) +} + +export default MainPomodoroTimer