From 42747c5f640b2346dabbaf7eb4f066ac71337cdc Mon Sep 17 00:00:00 2001 From: Roldan Montilla Jr Date: Fri, 10 Jul 2020 22:12:23 +0800 Subject: [PATCH] perf: improved timer accuracy and overall app performance --- app/package.json | 2 +- app/src/contexts/CounterContext.tsx | 205 +++++++++++++++------------- 2 files changed, 109 insertions(+), 98 deletions(-) diff --git a/app/package.json b/app/package.json index acd6a509..e884ba67 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "productivity-timer", - "version": "2.15.7-beta", + "version": "3.0.0", "private": true, "license": "MIT", "main": "public/electron.js", diff --git a/app/src/contexts/CounterContext.tsx b/app/src/contexts/CounterContext.tsx index a192da3a..5006074b 100644 --- a/app/src/contexts/CounterContext.tsx +++ b/app/src/contexts/CounterContext.tsx @@ -13,6 +13,7 @@ import { setPlay, } from "store"; import { useNotification, useSleepMode } from "hooks"; +import { padNum } from "utils"; import shortBreakStart from "assets/audios/short-break-start.wav"; import shortBreakFinished from "assets/audios/short-break-finished.wav"; @@ -27,13 +28,10 @@ import sixtySecondsLeftLongBreak from "assets/audios/sixty-seconds-left-long-bre import thirtySecondsLeftToWork from "assets/audios/thirty-seconds-left-to-work.wav"; import notificationIconDark from "assets/logos/notification-dark.png"; -import { padNum } from "utils"; type CounterProps = { count: number; - setCount?: React.Dispatch>; duration: number; - setDuration?: React.Dispatch>; timerType?: TimerTypes["timerType"]; resetTimerAction?: () => void; shouldFullscreen?: boolean; @@ -56,8 +54,6 @@ const CounterProvider: React.FC = ({ children }) => { (state: AppStateTypes) => state.settings ); - const [shouldFullscreen, setShouldFullscreen] = useState(false); - const { preventSleep, allowSleep } = useSleepMode(); const notification = useNotification( @@ -68,6 +64,8 @@ const CounterProvider: React.FC = ({ children }) => { settings.notificationProperty !== "none" ); + const [shouldFullscreen, setShouldFullscreen] = useState(false); + const [count, setCount] = useState(config.stayFocus * 60); const [duration, setDuration] = useState(config.stayFocus * 60); @@ -216,113 +214,128 @@ const CounterProvider: React.FC = ({ children }) => { ]); useEffect(() => { - let interval: number; - let counter = count; + let timerInterval: number; if (timer.playing) { - interval = setInterval(() => { - counter--; - setCount(counter); + timerInterval = setInterval(() => { + setCount((prevState) => { + let remaining = prevState - 1; + return remaining; + }); + }, 1000); + } - if (settings.notificationProperty === "extra") { - if (counter === 60) { - if (timer.timerType === SHORT_BREAK) { - notification( - "60 Seconds Left for Short Break", - { body: "Please prepare yourself getting back to work." }, - sixtySecondsLeftShortBreak - ); - } else if (timer.timerType === LONG_BREAK) { + return () => clearInterval(timerInterval); + }, [timer.playing]); + + useEffect(() => { + if (settings.notificationProperty === "extra") { + if (count === 61) { + if (timer.timerType === SHORT_BREAK) { + notification( + "60 Seconds Left for Short Break", + { body: "Please prepare yourself getting back to work." }, + sixtySecondsLeftShortBreak + ); + } else if (timer.timerType === LONG_BREAK) { + notification( + "60 Seconds Left for Long Break", + { body: "Please prepare yourself getting back to work." }, + sixtySecondsLeftLongBreak + ); + } else if (timer.timerType === SPECIAL_BREAK) { + notification( + "60 Seconds Left for Special Break", + { body: "Please prepare yourself getting back to work." }, + sixtySecondsLeftSpecialBreak + ); + } + } else if (count === 31 && timer.timerType === STAY_FOCUS) { + notification( + "30 Seconds Left to Work", + { body: "Please pause all media playing if there's one." }, + thirtySecondsLeftToWork + ); + } + } + + if (count === 0) { + switch (timer.timerType) { + case STAY_FOCUS: + if (timer.round < config.sessionRounds) { + setTimeout(() => { notification( - "60 Seconds Left for Long Break", - { body: "Please prepare yourself getting back to work." }, - sixtySecondsLeftLongBreak + "Work Time Finished", + { body: "It is time to take a short break." }, + shortBreakStart ); - } else if (timer.timerType === SPECIAL_BREAK) { + + dispatch(setTimerType("SHORT_BREAK")); + }, 1000); + } else { + setTimeout(() => { notification( - "60 Seconds Left for Special Break", - { body: "Please prepare yourself getting back to work." }, - sixtySecondsLeftSpecialBreak + "Session Rounds Completed", + { body: "It is time to take a long break." }, + longBreakStart ); - } - } else if (counter === 30 && timer.timerType === STAY_FOCUS) { - notification( - "30 Seconds Left to Work", - { body: "Please pause all media playing if there's one." }, - thirtySecondsLeftToWork - ); - } - } - if (counter === 0) { - switch (timer.timerType) { - case STAY_FOCUS: - if (timer.round < config.sessionRounds) { - dispatch(setTimerType("SHORT_BREAK")); - notification( - "Work Time Finished", - { body: "It is time to take a short break." }, - shortBreakStart - ); - } else { - dispatch(setTimerType("LONG_BREAK")); - notification( - "Session Rounds Completed", - { body: "It is time to take a long break." }, - longBreakStart - ); - } - break; + dispatch(setTimerType("LONG_BREAK")); + }, 1000); + } + break; - case SHORT_BREAK: - dispatch(setTimerType("STAY_FOCUS")); - dispatch(setRound(timer.round + 1)); + case SHORT_BREAK: + setTimeout(() => { + notification( + "Short Break Finished", + { body: "It is time to focus and work again." }, + shortBreakFinished + ); - if (!settings.autoStartWorkTime) { - dispatch(setPlay(false)); - } + dispatch(setTimerType("STAY_FOCUS")); + dispatch(setRound(timer.round + 1)); - notification( - "Short Break Finished", - { body: "It is time to focus and work again." }, - shortBreakFinished - ); - break; + if (!settings.autoStartWorkTime) { + dispatch(setPlay(false)); + } + }, 1000); + break; - case LONG_BREAK: - dispatch(setTimerType("STAY_FOCUS")); - dispatch(setRound(1)); + case LONG_BREAK: + setTimeout(() => { + notification( + "Long Break Finished", + { body: "It is time to focus and work again." }, + longBreakFinished + ); - if (!settings.autoStartWorkTime) { - dispatch(setPlay(false)); - } + dispatch(setTimerType("STAY_FOCUS")); + dispatch(setRound(1)); - notification( - "Long Break Finished", - { body: "It is time to focus and work again." }, - longBreakFinished - ); - break; + if (!settings.autoStartWorkTime) { + dispatch(setPlay(false)); + } + }, 1000); + break; - case SPECIAL_BREAK: - dispatch(setTimerType("STAY_FOCUS")); + case SPECIAL_BREAK: + setTimeout(() => { + notification( + "Special Break Finished", + { body: "It is time to focus and work again." }, + specialBreakFinished + ); - if (!settings.autoStartWorkTime) { - dispatch(setPlay(false)); - } + dispatch(setTimerType("STAY_FOCUS")); - notification( - "Special Break Finished", - { body: "It is time to focus and work again." }, - specialBreakFinished - ); - break; - } - } - }, 1000); + if (!settings.autoStartWorkTime) { + dispatch(setPlay(false)); + } + }, 1000); + break; + } } - - return () => clearInterval(interval); }, [ count, timer.round, @@ -349,12 +362,10 @@ const CounterProvider: React.FC = ({ children }) => { {children}