refactor: Leverage AbortController to remove events (#195)

Author: dwesolow

web_ui/src/hooks/event-listener/event-listener.hook.ts

@@ -35,22 +35,27 @@ export function useEventListener<
     }, [handler]);
 
     useEffect(() => {
+        const controller = new AbortController();
         const targetElement = determineTargetElement(element);
 
         if (targetElement === null) {
             return;
         }
 
-        const eventListener: (event: EventType[EventName]) => void = (event) => {
-            if (savedHandler.current !== undefined) {
-                savedHandler.current(event);
+        targetElement.addEventListener(
+            eventName,
+            (event) => {
+                if (savedHandler.current !== undefined) {
+                    savedHandler.current(event as EventType[EventName]);
+                }
+            },
+            {
+                signal: controller.signal,
             }
-        };
-
-        targetElement.addEventListener(eventName, eventListener as EventListenerOrEventListenerObject);
+        );
 
         return () => {
-            targetElement.removeEventListener(eventName, eventListener as EventListenerOrEventListenerObject);
+            controller.abort();
         };
     }, [eventName, element]);
 }

web_ui/src/hooks/use-storage/use-storage.ts

@@ -14,22 +14,26 @@ export const useStorage = () => {
     const [isOpenDialogAccessDenied, setIsOpenDialogAccessDenied] = useState<boolean>(false);
 
     useEffect(() => {
-        const listenerCallback = () => {
-            if (localStorage.getItem(LOCAL_STORAGE_KEYS.UNAUTHORIZED) === 'true') {
-                errorHandler({ message: StatusCodes.UNAUTHORIZED });
-                removeLocalStorageKey(LOCAL_STORAGE_KEYS.UNAUTHORIZED);
-            } else if (localStorage.getItem(LOCAL_STORAGE_KEYS.SERVICE_UNAVAILABLE) === 'true') {
-                errorHandler({ message: StatusCodes.SERVICE_UNAVAILABLE });
-                removeLocalStorageKey(LOCAL_STORAGE_KEYS.SERVICE_UNAVAILABLE);
-            } else if (localStorage.getItem(LOCAL_STORAGE_KEYS.PROJECT_ACCESS_DENIED) === 'true') {
-                setIsOpenDialogAccessDenied(true);
-            }
-        };
-
-        window.addEventListener('storage', listenerCallback);
+        const controller = new AbortController();
+
+        window.addEventListener(
+            'storage',
+            () => {
+                if (localStorage.getItem(LOCAL_STORAGE_KEYS.UNAUTHORIZED) === 'true') {
+                    errorHandler({ message: StatusCodes.UNAUTHORIZED });
+                    removeLocalStorageKey(LOCAL_STORAGE_KEYS.UNAUTHORIZED);
+                } else if (localStorage.getItem(LOCAL_STORAGE_KEYS.SERVICE_UNAVAILABLE) === 'true') {
+                    errorHandler({ message: StatusCodes.SERVICE_UNAVAILABLE });
+                    removeLocalStorageKey(LOCAL_STORAGE_KEYS.SERVICE_UNAVAILABLE);
+                } else if (localStorage.getItem(LOCAL_STORAGE_KEYS.PROJECT_ACCESS_DENIED) === 'true') {
+                    setIsOpenDialogAccessDenied(true);
+                }
+            },
+            { signal: controller.signal }
+        );
 
         return () => {
-            window.removeEventListener('storage', listenerCallback);
+            controller.abort();
         };
     }, [errorHandler]);
 

web_ui/src/pages/camera-page/providers/video-recording-provider.component.tsx

@@ -40,6 +40,7 @@ const onValidChunk = runWhen<BlobEvent>(({ data }) => data.size > 0);
 
 export const VideoRecordingProvider = ({ children }: { children: ReactNode }) => {
     const { webcamRef } = useDeviceSettings();
+    const controller = useRef(new AbortController());
     const timeoutId = useRef<ReturnType<typeof setInterval> | null>(null);
     const recordedChunks = useRef<Blob[]>([]);
     const mediaRecorderRef = useRef<MediaRecorder | null>(null);
@@ -48,8 +49,11 @@ export const VideoRecordingProvider = ({ children }: { children: ReactNode }) =>
     const [recordedSeconds, setRecordedSeconds] = useState(0);
 
     useEffect(() => {
+        const abortController = controller.current;
+
         return () => {
             timeoutId.current && clearInterval(timeoutId.current);
+            abortController.abort();
         };
     }, []);
 
@@ -68,14 +72,19 @@ export const VideoRecordingProvider = ({ children }: { children: ReactNode }) =>
 
             mediaRecorderRef.current.addEventListener(
                 DataEvents.DataAvailable,
-                onValidChunk(({ data }: BlobEvent) => recordedChunks.current.push(data))
+                onValidChunk(({ data }: BlobEvent) => recordedChunks.current.push(data)),
+                { signal: controller.current.signal }
             );
 
-            mediaRecorderRef.current.addEventListener(DataEvents.Stop, () => {
-                onVideoReady(new File(recordedChunks.current, `${name}.${format}`, { type: `video/${format}` }));
+            mediaRecorderRef.current.addEventListener(
+                DataEvents.Stop,
+                () => {
+                    onVideoReady(new File(recordedChunks.current, `${name}.${format}`, { type: `video/${format}` }));
 
-                recordedChunks.current = [];
-            });
+                    recordedChunks.current = [];
+                },
+                { signal: controller.current.signal }
+            );
 
             mediaRecorderRef.current.start();
         };

web_ui/src/pages/camera-support/use-camera.hook.tsx

@@ -1,7 +1,7 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { RefObject, useCallback, useRef, useState } from 'react';
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 
 import { isEmpty } from 'lodash-es';
 import Webcam from 'react-webcam';
@@ -37,6 +37,7 @@ const defaultMediaConstraints: Partial<MediaTrackSettings> = {
 
 export const useCamera = (): UseCameraProps => {
     const webcamRef = useRef<Webcam>(null);
+    const controller = useRef(new AbortController());
     const mediaRecorderRef = useRef<MediaRecorder | null>(null);
 
     const [recordingVideo, setRecordingVideo] = useState(false);
@@ -93,7 +94,9 @@ export const useCamera = (): UseCameraProps => {
             mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
                 mimeType: 'video/webm',
             });
-            mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
+            mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable, {
+                signal: controller.current.signal,
+            });
             mediaRecorderRef.current.start();
         }
     }, [handleDataAvailable]);
@@ -170,6 +173,14 @@ export const useCamera = (): UseCameraProps => {
         }));
     };
 
+    useEffect(() => {
+        const abortController = controller.current;
+
+        return () => {
+            abortController.abort();
+        };
+    }, []);
+
     return {
         webcamRef,
         handleDownloadVideo,