Remade the timer logic and integrate the counter of pomodoros

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

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

src/components/MainPomodoro.jsx

@@ -11,13 +11,9 @@ const MainPomodoro = () => {
     const [displayHidden, setDisplayHidden] = useState(true)
     const [timerOn, setTimerOn] = useState(false)
 
-    const [counter, setCounter] = useState(
+    const [pomodoros, setPomodoros] = useState(0)
-        {
+    const [rests, setRests] = useState(0)
-            pomodoros: 0,
+    const [longRests, setLongRests] = useState(0)
-            rests: 0,
-            longRests: 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}/>
         </>
         
 

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)
+                            setMinutes(breakTime.extended.minutes)
-                    console.log(seconds)
+                            setSeconds(breakTime.extended.seconds)
-                    setMinutes(minutes - 1)
+
-    
+                            setWeAreInBreakTime(true)
-                } else {
+                            
-                    const computedSeconds = seconds - 1
+                        }, 1000)
-                    setSeconds(computedSeconds)
+                    }
                 }
-    
-            }, 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) {
+                if (minutes >= 0 || seconds > 0) {
-            
+                
-            idTimeOut = setTimeout(() => {
+                    idTimeOut = startTimer()
-    
+                    
-                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(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 =  () => {

src/components/PomodoroCounter.jsx

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