mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-11 17:29:37 +02:00
fix: synchroniser les instances du Pomodoro Timer en temps réel
- Ajouter un événement custom 'pomodoroStateChange' lors des modifications - Chaque instance écoute cet événement et se synchronise avec localStorage - Quand on met le timer sur pause dans le modal, l'instance cachée se met aussi en pause - Les deux instances restent parfaitement synchronisées
This commit is contained in:
1 file changed
+31
-1
@@ -39,23 +39,53 @@ export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) {
|
||||
});
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Save state to localStorage whenever it changes
|
||||
// Save state to localStorage whenever it changes and dispatch custom event
|
||||
useEffect(() => {
|
||||
localStorage.setItem('pomodoroMode', mode);
|
||||
window.dispatchEvent(new CustomEvent('pomodoroStateChange'));
|
||||
}, [mode]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('pomodoroTimeLeft', timeLeft.toString());
|
||||
window.dispatchEvent(new CustomEvent('pomodoroStateChange'));
|
||||
}, [timeLeft]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('pomodoroIsRunning', isRunning.toString());
|
||||
window.dispatchEvent(new CustomEvent('pomodoroStateChange'));
|
||||
}, [isRunning]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('pomodoroSessionsCompleted', sessionsCompleted.toString());
|
||||
window.dispatchEvent(new CustomEvent('pomodoroStateChange'));
|
||||
}, [sessionsCompleted]);
|
||||
|
||||
// Listen for localStorage changes from other instances
|
||||
useEffect(() => {
|
||||
const handleStorageChange = () => {
|
||||
const savedMode = localStorage.getItem('pomodoroMode') as TimerMode;
|
||||
const savedTimeLeft = localStorage.getItem('pomodoroTimeLeft');
|
||||
const savedIsRunning = localStorage.getItem('pomodoroIsRunning');
|
||||
const savedSessions = localStorage.getItem('pomodoroSessionsCompleted');
|
||||
|
||||
if (savedMode && savedMode !== mode) {
|
||||
setMode(savedMode);
|
||||
}
|
||||
if (savedTimeLeft && parseInt(savedTimeLeft) !== timeLeft) {
|
||||
setTimeLeft(parseInt(savedTimeLeft));
|
||||
}
|
||||
if (savedIsRunning && (savedIsRunning === 'true') !== isRunning) {
|
||||
setIsRunning(savedIsRunning === 'true');
|
||||
}
|
||||
if (savedSessions && parseInt(savedSessions) !== sessionsCompleted) {
|
||||
setSessionsCompleted(parseInt(savedSessions));
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('pomodoroStateChange', handleStorageChange);
|
||||
return () => window.removeEventListener('pomodoroStateChange', handleStorageChange);
|
||||
}, [mode, timeLeft, isRunning, sessionsCompleted]);
|
||||
|
||||
// Function to play notification sound using Web Audio API
|
||||
const playNotificationSound = () => {
|
||||
try {
|
||||
|
||||
Reference in new issue
Block a user