feat: page changes to long break after every 2 short breaks

elhagen13 · Nov 29, 2023 · 8b9262f · 8b9262f
1 parent d8c2867
commit 8b9262f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "start": "cd packages/studywell-frontend && npm start",
     "test": "echo \"Error: no test specified\"",
     "lint": "n && npx prettier --check .",
-    "dev": "nodemon studywell-backend/backend.js"
+    "dev": "nodemon studywell-backend/backend.js",
+    "build": "cd packages/studywell-frontend && npm build"
   },
   "author": "",
   "license": "ISC",

diff --git a/packages/studywell-frontend/src/App.js b/packages/studywell-frontend/src/App.js
@@ -5,16 +5,35 @@ import LongBreak from "./pages/LongBreak";
 import MainScreen from "./pages/MainScreen";
 import Navbar from "./components/navbar/NavBar";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import React, { useState } from "react";
 
 function App() {
+  const [breakCount, setBreakCount] = useState(1);
+
   return (
     <BrowserRouter>
       <Navbar />
       <Routes>
-        <Route path="/" element={<MainScreen />} />
-        <Route path="/short" element={<ShortBreak />} />
-        <Route path="/long" element={<LongBreak />} />
-      </Routes>
+        <Route path="/" element={
+          <MainScreen 
+            breakCount={breakCount}
+            setBreakCount={setBreakCount}
+          />}
+        />
+        <Route path="/short" element={
+          <ShortBreak 
+            breakCount={breakCount}
+            setBreakCount={setBreakCount}
+
+          />}
+        />        
+        <Route path="/long" element={
+          <LongBreak 
+            breakCount={breakCount}
+            setBreakCount={setBreakCount}
+
+          />}
+        />      </Routes>
     </BrowserRouter>
   );
 }

diff --git a/packages/studywell-frontend/src/components/timer/Timer.js b/packages/studywell-frontend/src/components/timer/Timer.js
@@ -10,27 +10,39 @@ import bluemingsound from "../../sounds/blueming-alarm.mp3"; // Update the path
 import { useNavigate } from "react-router-dom"; // Import useNavigate
 
 function Timer(props) {
+
   const [minutes, setMinutes] = useState(props.time);
   const [seconds, setSeconds] = useState(0);
   const [timerOn, setTimerOn] = useState(false);
   const [timerDone, setTimerDone] = useState(false);
   const timerRef = useRef(null);
   const navigate = useNavigate();
-  const [breakCount, setBreakCount] = useState(0);
+
 
   const audio = useMemo(() => new Audio(bluemingsound), []);
+  const breakCount = props.breakCount;
+  const page = props.page;
 
   const endTimer = useCallback(() => {
     setTimerDone(true);
     audio.play();
-    setBreakCount((count) => count + 1);
+    if (page === "main"){
+      props.setBreakCount((count) => count + 1);
+
+    }
     console.log(breakCount);
-    if (breakCount % 3 === 0) {
-      navigate("/long");
-    } else {
-      navigate("/short");
+    if(page === "short" || page === "long"){
+      navigate("/")
+    }
+    else{
+      if (breakCount % 3 === 0) {
+
+        navigate("/long");
+      } else {
+        navigate("/short");
+      }
     }
-  }, [audio, breakCount, navigate]);
+  }, [audio, navigate, breakCount, props, page]);
 
   useEffect(() => {
     if (timerOn) {

diff --git a/packages/studywell-frontend/src/pages/LongBreak.js b/packages/studywell-frontend/src/pages/LongBreak.js
@@ -21,7 +21,7 @@ const CloseButton = ({ onClose, isVisible }) => {
   );
 };
 
-function LongBreak() {
+function LongBreak({breakCount, setBreakCount}) {
   const [tasks, setTasks] = useState([]);
   const [isVisible, setIsVisible] = useState(true);
 
@@ -45,7 +45,7 @@ function LongBreak() {
   return (
     <div id="MainScreen">
       <div className="container">
-        <Timer time={3} />
+        <Timer time={3} breakCount={breakCount} setBreakCount={setBreakCount} page={"long"}/>
       </div>
 
       <div className={isVisible ? "task_bar_on" : "task_bar_off"}>

diff --git a/packages/studywell-frontend/src/pages/MainScreen.js b/packages/studywell-frontend/src/pages/MainScreen.js
@@ -21,7 +21,7 @@ const CloseButton = ({ onClose, isVisible }) => {
   );
 };
 
-function MainScreen() {
+function MainScreen({breakCount, setBreakCount}) {
   const [tasks, setTasks] = useState([]);
   const [isVisible, setIsVisible] = useState(true);
 
@@ -45,7 +45,7 @@ function MainScreen() {
   return (
     <div id="MainScreen">
       <div className="container">
-        <Timer time={1} />
+        <Timer time={1} breakCount={breakCount} setBreakCount={setBreakCount} page={"main"}/>
       </div>
 
       <div className={isVisible ? "task_bar_on" : "task_bar_off"}>

diff --git a/packages/studywell-frontend/src/pages/ShortBreak.js b/packages/studywell-frontend/src/pages/ShortBreak.js
@@ -21,7 +21,7 @@ const CloseButton = ({ onClose, isVisible }) => {
   );
 };
 
-function ShortBreak() {
+function ShortBreak({breakCount, setBreakCount}) {
   const [tasks, setTasks] = useState([]);
   const [isVisible, setIsVisible] = useState(true);
 
@@ -45,7 +45,7 @@ function ShortBreak() {
   return (
     <div id="MainScreen">
       <div className="container">
-        <Timer time={3} />
+        <Timer time={2} breakCount={breakCount} setBreakCount={setBreakCount} page={"short"}/>
       </div>
 
       <div className={isVisible ? "task_bar_on" : "task_bar_off"}>