mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-11 17:29:37 +02:00
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:
1 file changed
+29
-22
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
@@ -105,27 +105,7 @@ export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) {
|
||||
}
|
||||
}, [isRunning, timeLeft, mode, onStateChange]);
|
||||
|
||||
useEffect(() => {
|
||||
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 = () => {
|
||||
const handleTimerComplete = useCallback(() => {
|
||||
setIsRunning(false);
|
||||
|
||||
// Play notification sound
|
||||
@@ -151,7 +131,34 @@ export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) {
|
||||
setTimeLeft(TIMER_DURATIONS.work);
|
||||
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 = () => {
|
||||
setIsRunning(true);
|
||||
|
||||
Reference in new issue
Block a user