From ea4e52a8052530bf6dd7daeb92e47ca710f89e34 Mon Sep 17 00:00:00 2001 From: theSaLi Date: Sun, 30 May 2021 13:40:58 +0200 Subject: [PATCH 1/3] Bugfix: Pomodoro is not reset after refreshing or switching the view. --- .../components/pomodoroview/PomodoroView.jsx | 67 +++++++++++++++++-- 1 file changed, 62 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/pomodoroview/PomodoroView.jsx b/frontend/src/components/pomodoroview/PomodoroView.jsx index c291b8a..083f2a4 100644 --- a/frontend/src/components/pomodoroview/PomodoroView.jsx +++ b/frontend/src/components/pomodoroview/PomodoroView.jsx @@ -1,5 +1,5 @@ -import React, { useState, useContext, createContext} from "react"; +import React, { useState, useContext, createContext, useEffect} from "react"; import { CountdownCircleTimer } from "react-countdown-circle-timer"; import store from "../../redux-store"; import SubmitRecordService from "../../services/SubmitRecordService"; @@ -69,7 +69,37 @@ function RemainingTimeContextProvider(props) { const [isClockPlaying, setIsClockPlaying] = useState(false); const [workDurationMinutes, setWorkDurationMinutes] = useState(25); const [breakDurationMinutes, setBreakDurationMinutes] = useState(5); + const [m, setM] = useState(25); + const [s, setS] = useState(0); + useEffect ( () => { + setData((data) => setStartTime(data), "startTime") + setData((data) => setIsUserBreaking(data == "true"), "isUserBreaking") + setData((data) => setClockKey(Number(data)), "ClockKey") + setData((data) => setIsClockPlaying(data == "true"), "isClockPlaying") + setData((data) => setWorkDurationMinutes(Number(data)), "workDurationMinutes") + setData((data) => setBreakDurationMinutes(Number(data)), "breakDurationMinutes") + setData((data) => setM(Number(data)), "M") + setData((data) => setS(Number(data)), "S") + }, []) + + useEffect ( () => { + localStorage.setItem("startTime", startTime) + localStorage.setItem("isUserBreaking", isUserBreaking) + localStorage.setItem("ClockKey", ClockKey) + localStorage.setItem("isClockPlaying", isClockPlaying) + localStorage.setItem("workDurationMinutes", workDurationMinutes) + localStorage.setItem("breakDurationMinutes", breakDurationMinutes) + localStorage.setItem("M", m) + localStorage.setItem("S", s) + }) + + function setData(func, key) { + const data = localStorage.getItem(key) + if (data) { + func(data) + } + } return ( {props.children} @@ -100,7 +134,10 @@ function ClockController() { setIsClockPlaying, isUserBreaking, setIsUserBreaking, - isClockPlaying + isClockPlaying, + setM, + setS, + workDurationMinutes } = useContext(remainingTimeContext); const handleSwitch = (flag) => { @@ -114,6 +151,8 @@ function ClockController() { setClockKey((prevKey) => prevKey + 1); setIsClockPlaying(false); setIsUserBreaking(false); + setM(workDurationMinutes); + setS(0) } }; @@ -133,6 +172,8 @@ function ClockSettings() { setIsUserBreaking, setWorkDurationMinutes, setBreakDurationMinutes, + setM, + setS } = useContext(remainingTimeContext); const handleDown = (value,variableSetter) =>{ return ()=>{ @@ -146,7 +187,7 @@ function ClockSettings() { } } const handleChange = (variableSetter) => { // change value - return (event) => variableSetter(event.target.value); + return (event) => variableSetter(Number(event.target.value)); }; return ( @@ -181,6 +222,8 @@ function ClockSettings() { onClick={() => { setWorkDurationMinutes(workMinutes); setBreakDurationMinutes(breakMinutes); + setM(workMinutes); + setS(0); setIsUserBreaking(false); setIsClockPlaying(false); setClockKey((prevKey) => prevKey + 1); @@ -195,9 +238,14 @@ function ClockSettings() { } function RenderTimeWork({ remainingTime }) { + const {setM, setS, breakDurationMinutes} = useContext(remainingTimeContext); const minutes = Math.floor(remainingTime / 60); const seconds = remainingTime % 60; - + setM(minutes); + setS(seconds); + if (minutes == 0 & seconds == 0) { + setM(breakDurationMinutes) + } return (
work
@@ -208,9 +256,14 @@ function RenderTimeWork({ remainingTime }) { // in the future might be different with RenderTimeWork, now is the same function RenderTimeBreak({ remainingTime }) { + const {setM, setS, workDurationMinutes} = useContext(remainingTimeContext); const minutes = Math.floor(remainingTime / 60); const seconds = remainingTime % 60; - + setM(minutes); + setS(seconds); + if (minutes == 0 & seconds == 0) { + setM(workDurationMinutes) + } return (
break
@@ -232,6 +285,8 @@ function PomodoroClock() { breakDurationMinutes, isClockPlaying, setIsClockPlaying, + m, + s, } = useContext(remainingTimeContext); // todo: make a soundService @@ -264,6 +319,7 @@ function PomodoroClock() { {...breakTimerProps} key={100 + ClockKey} isPlaying={isClockPlaying} + initialRemainingTime={m * 60 + s} duration={breakDurationMinutes * 60} onComplete={breakCompleteHandler} > @@ -274,6 +330,7 @@ function PomodoroClock() { {...workTimerProps} key={ClockKey} isPlaying={isClockPlaying} + initialRemainingTime={m * 60 + s} duration={workDurationMinutes * 60} onComplete={workCompleteHandler} > From 02cc08e6c46377b300369044d8419df4ee4ca35c Mon Sep 17 00:00:00 2001 From: theSaLi Date: Sat, 5 Jun 2021 23:00:53 +0200 Subject: [PATCH 2/3] Refactor to enhance readability. --- .../components/pomodoroview/PomodoroView.jsx | 94 +++++++++++-------- 1 file changed, 55 insertions(+), 39 deletions(-) diff --git a/frontend/src/components/pomodoroview/PomodoroView.jsx b/frontend/src/components/pomodoroview/PomodoroView.jsx index 083f2a4..fdde58b 100644 --- a/frontend/src/components/pomodoroview/PomodoroView.jsx +++ b/frontend/src/components/pomodoroview/PomodoroView.jsx @@ -69,18 +69,19 @@ function RemainingTimeContextProvider(props) { const [isClockPlaying, setIsClockPlaying] = useState(false); const [workDurationMinutes, setWorkDurationMinutes] = useState(25); const [breakDurationMinutes, setBreakDurationMinutes] = useState(5); - const [m, setM] = useState(25); - const [s, setS] = useState(0); + const [minute, setMinute] = useState(25); + const [second, setSecond] = useState(0); useEffect ( () => { - setData((data) => setStartTime(data), "startTime") - setData((data) => setIsUserBreaking(data == "true"), "isUserBreaking") - setData((data) => setClockKey(Number(data)), "ClockKey") - setData((data) => setIsClockPlaying(data == "true"), "isClockPlaying") - setData((data) => setWorkDurationMinutes(Number(data)), "workDurationMinutes") - setData((data) => setBreakDurationMinutes(Number(data)), "breakDurationMinutes") - setData((data) => setM(Number(data)), "M") - setData((data) => setS(Number(data)), "S") + loadItemFromLocalStorage("startTime", setStartTime, "string") + loadItemFromLocalStorage("isUserBreaking", setIsUserBreaking, "boolean") + loadItemFromLocalStorage("ClockKey", setClockKey, "number") + loadItemFromLocalStorage("isClockPlaying", setIsClockPlaying, "boolean") + loadItemFromLocalStorage("workDurationMinutes", setWorkDurationMinutes, "number") + loadItemFromLocalStorage("breakDurationMinutes", setBreakDurationMinutes, "number") + loadItemFromLocalStorage("Minute", setMinute, "number") + loadItemFromLocalStorage("Second", setSecond, "number") + loadItemFromLocalStorage("Second", setSecond, "number") }, []) useEffect ( () => { @@ -90,16 +91,31 @@ function RemainingTimeContextProvider(props) { localStorage.setItem("isClockPlaying", isClockPlaying) localStorage.setItem("workDurationMinutes", workDurationMinutes) localStorage.setItem("breakDurationMinutes", breakDurationMinutes) - localStorage.setItem("M", m) - localStorage.setItem("S", s) + localStorage.setItem("Minute", minute) + localStorage.setItem("Second", second) }) - function setData(func, key) { - const data = localStorage.getItem(key) + /** + * Load a item from the local storage with the key itemName and set the item with the itemSetFunc. + * itemType indicates what type the item should be converted to. Since local storage only stores strings, + * the item needs to be converted. + * @param {*} itemName + * @param {*} itemSetFunc + * @param {*} itemType ONLY choose from "string", "boolean" and "number" + */ + function loadItemFromLocalStorage(itemName, itemSetFunc, itemType) { + const data = localStorage.getItem(itemName) if (data) { - func(data) + if (itemType == "boolean") { + itemSetFunc(data == "true") + } else if (itemType == "number") { + itemSetFunc(Number(data)) + } else if (itemType == "string") { + itemSetFunc(data) + } } } + return ( {props.children} @@ -135,8 +151,8 @@ function ClockController() { isUserBreaking, setIsUserBreaking, isClockPlaying, - setM, - setS, + setMinute, + setSecond, workDurationMinutes } = useContext(remainingTimeContext); @@ -151,8 +167,8 @@ function ClockController() { setClockKey((prevKey) => prevKey + 1); setIsClockPlaying(false); setIsUserBreaking(false); - setM(workDurationMinutes); - setS(0) + setMinute(workDurationMinutes); + setSecond(0) } }; @@ -172,8 +188,8 @@ function ClockSettings() { setIsUserBreaking, setWorkDurationMinutes, setBreakDurationMinutes, - setM, - setS + setMinute, + setSecond } = useContext(remainingTimeContext); const handleDown = (value,variableSetter) =>{ return ()=>{ @@ -222,8 +238,8 @@ function ClockSettings() { onClick={() => { setWorkDurationMinutes(workMinutes); setBreakDurationMinutes(breakMinutes); - setM(workMinutes); - setS(0); + setMinute(workMinutes); + setSecond(0); setIsUserBreaking(false); setIsClockPlaying(false); setClockKey((prevKey) => prevKey + 1); @@ -238,13 +254,13 @@ function ClockSettings() { } function RenderTimeWork({ remainingTime }) { - const {setM, setS, breakDurationMinutes} = useContext(remainingTimeContext); + const {setMinute, setSecond, breakDurationMinutes} = useContext(remainingTimeContext); const minutes = Math.floor(remainingTime / 60); const seconds = remainingTime % 60; - setM(minutes); - setS(seconds); + setMinute(minutes); + setSecond(seconds); if (minutes == 0 & seconds == 0) { - setM(breakDurationMinutes) + setMinute(breakDurationMinutes) } return (
@@ -256,13 +272,13 @@ function RenderTimeWork({ remainingTime }) { // in the future might be different with RenderTimeWork, now is the same function RenderTimeBreak({ remainingTime }) { - const {setM, setS, workDurationMinutes} = useContext(remainingTimeContext); + const {setMinute, setSecond, workDurationMinutes} = useContext(remainingTimeContext); const minutes = Math.floor(remainingTime / 60); const seconds = remainingTime % 60; - setM(minutes); - setS(seconds); + setMinute(minutes); + setSecond(seconds); if (minutes == 0 & seconds == 0) { - setM(workDurationMinutes) + setMinute(workDurationMinutes) } return (
@@ -285,8 +301,8 @@ function PomodoroClock() { breakDurationMinutes, isClockPlaying, setIsClockPlaying, - m, - s, + minute, + second, } = useContext(remainingTimeContext); // todo: make a soundService @@ -319,7 +335,7 @@ function PomodoroClock() { {...breakTimerProps} key={100 + ClockKey} isPlaying={isClockPlaying} - initialRemainingTime={m * 60 + s} + initialRemainingTime={minute * 60 + second} duration={breakDurationMinutes * 60} onComplete={breakCompleteHandler} > @@ -330,7 +346,7 @@ function PomodoroClock() { {...workTimerProps} key={ClockKey} isPlaying={isClockPlaying} - initialRemainingTime={m * 60 + s} + initialRemainingTime={minute * 60 + second} duration={workDurationMinutes * 60} onComplete={workCompleteHandler} > From b51aeb7a856f5aee1329d1b739d3a641bbfeac57 Mon Sep 17 00:00:00 2001 From: theSaLi Date: Sun, 6 Jun 2021 15:56:35 +0200 Subject: [PATCH 3/3] Remove one duplicated line. --- frontend/src/components/pomodoroview/PomodoroView.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/pomodoroview/PomodoroView.jsx b/frontend/src/components/pomodoroview/PomodoroView.jsx index fdde58b..d244a81 100644 --- a/frontend/src/components/pomodoroview/PomodoroView.jsx +++ b/frontend/src/components/pomodoroview/PomodoroView.jsx @@ -81,7 +81,6 @@ function RemainingTimeContextProvider(props) { loadItemFromLocalStorage("breakDurationMinutes", setBreakDurationMinutes, "number") loadItemFromLocalStorage("Minute", setMinute, "number") loadItemFromLocalStorage("Second", setSecond, "number") - loadItemFromLocalStorage("Second", setSecond, "number") }, []) useEffect ( () => {