Pomodoro countdown logic added

src/components/MainPomodoro.jsx

@@ -11,7 +11,13 @@ const MainPomodoro = () => {
     const [displayHidden, setDisplayHidden] = useState(true)
     const [timerOn, setTimerOn] = useState(false)
 
-    //const [counter, setCounter] 
+    const [counter, setCounter] = useState(
+        {
+            pomodoros: 0,
+            rests: 0,
+            longRests: 0
+        }
+    )
 
     const showStyles = () => {
         console.log('Styles Deployed')
@@ -23,7 +29,7 @@ const MainPomodoro = () => {
         <>
             <div className="main-pomodoro">
 
-                <MainPomodoroTimer style={style} timerOn={timerOn}/>
+                <MainPomodoroTimer style={style} setTimerOn={setTimerOn} timerOn={timerOn} counter={counter} setCounter={setCounter}/>
 
                 <div className="style-display">
                     <h4>
@@ -41,7 +47,7 @@ const MainPomodoro = () => {
             </div>
 
             <StyleSelector displayHidden={displayHidden} style={style} setStyle={setStyle}/>
-            <PomodoroCounter />
+            <PomodoroCounter counter={counter}/>
         </>
         
 

src/components/MainPomodoroTimer.jsx

@@ -1,11 +1,13 @@
-import react from 'react'
 import React, {useState} from 'react'
 
 const MainPomodoroTimer = (props) => {
 
     const [minutes, setMinutes] = useState('61')
     const [seconds, setSeconds] = useState('60')
-    
+
+    const [breakTime, setBreakTime] = useState(undefined)
+    const [weAreInBreakTime, setWeAreInBreakTime] = useState(false)
+
     const setTimeStyle = () => {
 
         if (props.style === 'Can I play, Daddy?') {
@@ -14,16 +16,42 @@ const MainPomodoroTimer = (props) => {
             
             setMinutes(minutes)
             setSeconds(seconds)
+
+            setBreakTime(
+                {
+                    normal: {
+                        minutes: 5,
+                        seconds: 0
+                    },
+                    extended: {
+                        minutes: 15,
+                        seconds: 0  
+                    }
+                }
+            )
         }
         
         if (props.style === 'Regular'){
             
-            const minutes = 25
+            const minutes = 0
-            const seconds = 0
+            const seconds = 5
             
             setMinutes(minutes)
             setSeconds(seconds)
 
+            setBreakTime(
+                {
+                    normal: {
+                        minutes: 0,
+                        seconds: 10
+                    },
+                    extended: {
+                        minutes: 15,
+                        seconds: 0  
+                    }
+                }
+            )
+
         }
 
         if (props.style === 'Creative work') {
@@ -32,6 +60,19 @@ const MainPomodoroTimer = (props) => {
             
             setMinutes(minutes)
             setSeconds(seconds)
+
+            setBreakTime(
+                {
+                    normal: {
+                        minutes: 10,
+                        seconds: 0
+                    },
+                    extended: {
+                        minutes: 20,
+                        seconds: 0  
+                    }
+                }
+            )
         }
 
         if (props.style === 'Last minute delivery') {
@@ -40,6 +81,19 @@ const MainPomodoroTimer = (props) => {
             
             setMinutes(minutes)
             setSeconds(seconds)
+
+            setBreakTime(
+                {
+                    normal: {
+                        minutes: 15,
+                        seconds: 0
+                    },
+                    extended: {
+                        minutes: 30,
+                        seconds: 0  
+                    }
+                }
+            )
         }
         
     }
@@ -49,10 +103,11 @@ const MainPomodoroTimer = (props) => {
         setTimeStyle, []
         
     )
+
     React.useEffect ( () => {
         let idTimeOut
 
-        if (props.timerOn) {
+        if (weAreInBreakTime && props.timerOn && minutes >= 0 && seconds > 0) {
 
             idTimeOut = setTimeout(() => {
     
@@ -69,8 +124,44 @@ const MainPomodoroTimer = (props) => {
     
             }, 1000)
              
-        } else {
+        } else if (weAreInBreakTime && props.timerOn && minutes === 0 && seconds === 0) {
-            setTimeStyle()
+            
+            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 () => {

src/components/PomodoroCounter.jsx

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