From 08bdbc389a35050108545416261d2927649381af Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 28 Nov 2025 21:54:07 +0000
Subject: [PATCH] fix: maintenir le timer Pomodoro actif quand le modal se
 ferme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 src/components/PomodoroTimer.tsx | 53 ++++++++++++++++++--------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/PomodoroTimer.tsx b/src/components/PomodoroTimer.tsx
index 0aaa4a8..da420d9 100644
--- a/src/components/PomodoroTimer.tsx
+++ b/src/components/PomodoroTimer.tsx
@@ -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);