diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index d4e5e0b..d095417 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -75,7 +75,6 @@ export function Menu() {
return (
<>
-
setIsOpen(o)}>
diff --git a/src/components/modals/sleep-timer/sleep-timer.tsx b/src/components/modals/sleep-timer/sleep-timer.tsx
index 49eb74c..c3b5c8e 100644
--- a/src/components/modals/sleep-timer/sleep-timer.tsx
+++ b/src/components/modals/sleep-timer/sleep-timer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
import { Modal } from '@/components/modal';
import { FaPlay, FaUndo } from 'react-icons/fa/index';
import { useSoundStore } from '@/store';
@@ -18,7 +18,8 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
const [minutes, setMinutes] = useState('0');
const [running, setRunning] = useState(false);
const [timeLeft, setTimeLeft] = useState(0);
- const [timerId, setTimerId] = useState(undefined);
+
+ const timerId = useRef();
const pause = useSoundStore(state => state.pause);
@@ -33,9 +34,8 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
setTimeLeft(calculateTotalSeconds());
}, [calculateTotalSeconds]);
- // Handle multiple clicks on this. Only the latest click should be taken into account
const handleStart = () => {
- if (timerId) clearInterval(timerId);
+ if (timerId.current) clearInterval(timerId.current);
setTimeLeft(calculateTotalSeconds);
setRunning(true);
@@ -54,12 +54,12 @@ export function SleepTimerModal({ onClose, show }: SleepTimerModalProps) {
});
}, 1000);
- setTimerId(newTimerId);
+ timerId.current = newTimerId;
}
};
const handleReset = () => {
- if (timerId) clearInterval(timerId);
+ if (timerId.current) clearInterval(timerId.current);
setTimeLeft(0);
setRunning(false);
};