Skip to content
Snippets Groups Projects
Commit cf38d62d authored by Duc Phan's avatar Duc Phan :speech_balloon:
Browse files

Merge branch 'duke' into 'main'

add eyecare mode

See merge request !9
parents ec74bbfe 745bda5c
Branches duke main
No related tags found
1 merge request!9add eyecare mode
......@@ -14,8 +14,8 @@ function StudyMethod({method, setMethod }) {
<option value="pomodoro">Pomodoro</option>
<option value="flowtime">Flowtime Technique</option>
<option value="ultradian">Ultradian Sprints</option>
<option value = "eyecare">Eye Care</option>
</select>
<button onClick={setMethod(method)}>Confirm method</button>
</div>
);
}
......
......@@ -8,28 +8,31 @@ import { useState, useRef, useEffect } from "react";
function TimeDuration({ hour, setHour, minute, setMinute, method }) {
const [second, setSecond] = useState(0);
const [targetSeconds, setTargetSeconds] = useState(0);
const [isRunning, setIsRunning] = useState(false)
const [mode, setMode] = useState("work")
const [isRunning, setIsRunning] = useState(false);
const [mode, setMode] = useState("work");
const intervalID = useRef(null); // This holds the interval ID across renders
const handleTimeInput = () => {
const second = convertInput(hour, minute);
return second
}
return second;
};
const notifyUser = async () => {
//notify between work and break
const message = mode !== "work"
? "Take a break!"
: "Time to work!";
if (Notification.permission !== "granted") {
await Notification.requestPermission();
}
if (Notification.permission === "granted") {
new Notification(message);
} else if (Notification.permission !== "denied") {
const permission = await Notification.requestPermission();
if (permission === "granted") {
new Notification(message);
let message;
if (method == "pomodoro") {
message = mode === "work" ? "Take a 5 minutes break!" : "Back to work!";
} else if (method == "eyecare") {
message = mode === "work" ? "Rest your eyes" : "Back to work!";
} else {
message = mode !== "work" ? "Take a break!" : "Time to work!";
}
new Notification(message);
}
};
......@@ -47,19 +50,24 @@ function TimeDuration({hour, setHour, minute, setMinute, method}) {
};
useEffect(() => {
if(!isRunning) return; //avooid shooting this when time is 0 and no method initialized
if (!isRunning) return;
if (second === 0 && intervalID.current) {
(async () => {
await notifyUser(); // wait for the notification process to finish
clearInterval(intervalID.current);
notifyUser();
if (method !== "regular") {
if (mode === "work") {
// Subtract 25 min from target
setTargetSeconds(prev => prev - 25 * 60);
if (method === "pomodoro") {
setTargetSeconds((prev) => prev - 25*60);
} else if (method === "eyecare") {
setTargetSeconds((prev) => prev - 20 * 60);
}
startBreak();
} else {
startWork();
}
}
})(); // immediately invoked function
}
}, [second, mode, method, isRunning]);
......@@ -75,15 +83,14 @@ function TimeDuration({hour, setHour, minute, setMinute, method}) {
function runTime() {
intervalID.current = setInterval(() => {
setSecond(prev => {
setSecond((prev) => {
if (prev == 0) {
clearInterval(intervalID.current);
return 0;
}
return prev - 1
})
}, 1000
)
return prev - 1;
});
}, 1000);
}
function startTimer() {
......@@ -94,8 +101,7 @@ function TimeDuration({hour, setHour, minute, setMinute, method}) {
const totalStudyTime = handleTimeInput(); // the goal the user entered
setTargetSeconds(totalStudyTime);
startWork();
}
else{
} else {
const totalSec = handleTimeInput();
setSecond(totalSec); //set the second only when the user prompt inputs
runTime();
......@@ -103,36 +109,44 @@ function TimeDuration({hour, setHour, minute, setMinute, method}) {
}
function startWork() {
if(method == "pomodoro"){
setMode("work");
if (method == "pomodoro") {
setHour(0);
setMinute(25);
setSecond(25 *60 ); // 25 minutes
runTime();
} else if (method == "eyecare"){
setHour(0);
setMinute(20);
setSecond(20 * 60); // 20 minutes
runTime();
}
else if (method == "flowtime") {
runTime()
runTime();
} else if (method == "ultradian") {
runTime()
runTime();
}
}
function startBreak() {
if(method == "pomodoro"){
setMode("break");
if (method == "pomodoro") {
setHour(0);
setMinute(5);
setSecond(5 *60); // 5 minutes
runTime();
}
else if (method == "flowtime"){
runTime()
} else if (method == "flowtime") {
runTime();
} else if (method == "ultradian") {
runTime();
} else if (method == "eyecare"){
setHour(0);
setMinute(0);
setSecond(20); //the eyes need to rest for 20 seconds
runTime()
}
}
return (
<div className="time-duration-box">
<h3>Time Duration ({mode})</h3>
......@@ -155,14 +169,31 @@ function TimeDuration({hour, setHour, minute, setMinute, method}) {
/>
</div>
<button onClick={startTimer}>Start timer</button>
<button onClick={() => { clearInterval(intervalID.current); setIsRunning(false); }}>Stop timer</button>
<button
onClick={() => {
clearInterval(intervalID.current);
setIsRunning(false);
}}
>
Stop timer
</button>
<button onClick={runTime}>Resume</button>
<button onClick={() => { clearInterval(intervalID.current); setSecond(0); setIsRunning(false); }}>Reset timer</button>
<button
onClick={() => {
clearInterval(intervalID.current);
setSecond(0);
setIsRunning(false);
}}
>
Reset timer
</button>
<h3>Hour: {Math.floor(second / 3600)}</h3>
<h3>Minute: {Math.floor((second % 3600) / 60)}</h3>
<h3>Second: {second % 60}</h3>
{method === "pomodoro" && (
<h4>Remaining Study Time: {Math.floor(targetSeconds / 60) - 25 } minutes</h4>
<h4>
Remaining Study Time: {Math.floor(targetSeconds / 60) - 25} minutes
</h4>
)}
</div>
);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment