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
+30
-23
@@ -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);
|
||||||
|
|||||||
Reference in new issue
Block a user