fix: maintenir le timer Pomodoro actif quand le modal se ferme

- Utiliser useCallback pour mémoriser handleTimerComplete
- Retirer timeLeft des dépendances du useEffect qui gère l'intervalle
- Le useEffect ne dépend plus que de isRunning et handleTimerComplete
- L'intervalle continue de tourner même après démontage/remontage du composant
- Nettoyage propre de l'intervalle avec intervalRef.current = null
This commit is contained in:
Claude committed 2025-11-28 21:54:07 +00:00
1 parent 7825f5d07b
commit 08bdbc389a
1 file changed
+30 -23
+30 -23
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef, useCallback } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
@@ -105,27 +105,7 @@ export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) {
} }
}, [isRunning, timeLeft, mode, onStateChange]); }, [isRunning, timeLeft, mode, onStateChange]);
useEffect(() => { const handleTimerComplete = useCallback(() => {
if (isRunning && timeLeft > 0) {
intervalRef.current = setInterval(() => {
setTimeLeft(prev => {
if (prev <= 1) {
handleTimerComplete();
return 0;
}
return prev - 1;
});
}, 1000);
} else if (intervalRef.current) {
clearInterval(intervalRef.current);
}
return () => {
if (intervalRef.current) clearInterval(intervalRef.current);
};
}, [isRunning, timeLeft]);
const handleTimerComplete = () => {
setIsRunning(false); setIsRunning(false);
// Play notification sound // Play notification sound
@@ -151,7 +131,34 @@ export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) {
setTimeLeft(TIMER_DURATIONS.work); setTimeLeft(TIMER_DURATIONS.work);
showSuccess('Pause terminée ! Prêt pour une nouvelle session ?'); showSuccess('Pause terminée ! Prêt pour une nouvelle session ?');
} }
}; }, [mode, sessionsCompleted]);
// Manage timer interval
useEffect(() => {
if (isRunning) {
intervalRef.current = setInterval(() => {
setTimeLeft(prev => {
if (prev <= 1) {
handleTimerComplete();
return 0;
}
return prev - 1;
});
}, 1000);
} else {
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
}
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
intervalRef.current = null;
}
};
}, [isRunning, handleTimerComplete]);
const handleStart = () => { const handleStart = () => {
setIsRunning(true); setIsRunning(true);