fix(useBell): fix Sentry error

benji6 · Nov 12, 2024 · 28a9f45 · 28a9f45
1 parent b0ee6a4
commit 28a9f45
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 20 deletions.
diff --git a/client/src/components/hooks/useWakeLock.ts b/client/src/components/hooks/useWakeLock.ts
@@ -1,15 +1,29 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
-export default function useWakeLock() {
+interface WakeLock {
+  enable(): void;
+  disable(): void;
+}
+
+export default function useWakeLock(): WakeLock | undefined {
   const [wakeLockSentinel, setWakeLockSentinel] = useState<WakeLockSentinel>();
+  const wakeLockRef = useRef<WakeLock>();
+
+  const enable = useCallback(() => {
+    if (wakeLockSentinel && !wakeLockSentinel.released) return;
+    navigator.wakeLock.request("screen").then(setWakeLockSentinel);
+  }, [wakeLockSentinel]);
+
+  const disable = useCallback(
+    () => wakeLockSentinel?.release(),
+    [wakeLockSentinel],
+  );
 
   useEffect(() => () => void wakeLockSentinel?.release(), [wakeLockSentinel]);
 
-  return {
-    enable: useCallback(() => {
-      if (wakeLockSentinel && !wakeLockSentinel.released) return;
-      navigator.wakeLock.request("screen").then(setWakeLockSentinel);
-    }, [wakeLockSentinel]),
-    disable: useCallback(() => wakeLockSentinel?.release(), [wakeLockSentinel]),
-  };
+  useEffect(() => {
+    wakeLockRef.current = { enable, disable };
+  }, [enable, disable]);
+
+  return wakeLockRef.current;
 }
diff --git a/client/src/components/pages/Meditation/Meditate/MeditationTimer/index.tsx b/client/src/components/pages/Meditation/Meditate/MeditationTimer/index.tsx
@@ -42,11 +42,11 @@ export default function MeditationTimer() {
     navigate("/meditation");
   }, [navigate]);
   const onPause = useCallback(() => {
-    wakeLock.disable();
+    wakeLock?.disable();
     localDispatch({ payload: "PAUSED", type: "timerState/set" });
   }, [wakeLock]);
   const onPlay = useCallback(() => {
-    wakeLock.enable();
+    wakeLock?.enable();
     initialTime.current =
       Date.now() + roundedSecondsRemaining * 1e3 - timerDurationInSeconds * 1e3;
     localDispatch({ payload: "TIMING", type: "timerState/set" });
@@ -98,10 +98,10 @@ export default function MeditationTimer() {
   ]);
 
   useEffect(() => {
-    wakeLock.enable();
+    wakeLock?.enable();
     return () => {
       bell?.stop();
-      wakeLock.disable();
+      wakeLock?.disable();
     };
   }, [bell, wakeLock]);
 
@@ -122,7 +122,7 @@ export default function MeditationTimer() {
 
       localDispatch({ payload: new Date(), type: "timeFinished/set" });
       bell?.start();
-      wakeLock.disable();
+      wakeLock?.disable();
     });
     return () => void (abort = true);
   }, [

diff --git a/client/src/components/pages/Meditation/Meditate/MeditationTimer/useBell.ts b/client/src/components/pages/Meditation/Meditate/MeditationTimer/useBell.ts
@@ -33,11 +33,11 @@ export default function useBell(): Bell | undefined {
 
     bellRef.current = {
       async start() {
-        stop();
+        this.stop();
         bufferSource = audioContext.createBufferSource();
         bufferSource.connect(audioContext.destination);
         bufferSource.buffer = await audioBufferPromise;
-        bufferSource.onended = stop;
+        bufferSource.onended = () => this.stop();
         bufferSource.start();
       },
       stop() {

diff --git a/client/src/components/pages/Meditation/Meditate/OpenEndedMeditation/index.tsx b/client/src/components/pages/Meditation/Meditate/OpenEndedMeditation/index.tsx
@@ -33,19 +33,19 @@ export default function OpenEndedMeditation() {
     navigate("/");
   }, [dispatch, geolocation, navigate, roundedSecondsElapsed]);
   const onPause = useCallback(() => {
-    wakeLock.disable();
+    wakeLock?.disable();
     setIsPaused(true);
   }, [wakeLock]);
   const onPlay = useCallback(() => {
-    wakeLock.enable();
+    wakeLock?.enable();
     initialTime.current = Date.now() - roundedSecondsElapsed * 1e3;
     setIsPaused(false);
   }, [roundedSecondsElapsed, wakeLock]);
   const onUndim = useCallback(() => setIsDimmerEnabled(false), []);
 
   useEffect(() => {
-    wakeLock.enable();
-    return () => void wakeLock.disable();
+    wakeLock?.enable();
+    return () => void wakeLock?.disable();
   }, [wakeLock]);
 
   useEffect(() => {