Add support for `EventTarget` to `useEventEmitter()` (#9060)

src/hooks/useEventEmitter.ts

@@ -32,7 +32,9 @@ export function useTypedEventEmitter<
     useEventEmitter(emitter, eventName, handler);
 }
 
-// Hook to wrap event emitter on and removeListener in hook lifecycle
+/**
+ * Hook to wrap an EventEmitter on and off in hook lifecycle
+ */
 export function useEventEmitter(
     emitter: EventEmitter | undefined,
     eventName: string | symbol,
@@ -59,7 +61,44 @@ export function useEventEmitter(
 
             // Remove event listener on cleanup
             return () => {
-                emitter.removeListener(eventName, eventListener);
+                emitter.off(eventName, eventListener);
+            };
+        },
+        [eventName, emitter], // Re-run if eventName or emitter changes
+    );
+}
+
+/**
+ * Hook to wrap an EventTarget addEventListener and removeEventListener in hook
+ * lifecycle
+ */
+export function useEventTarget(
+    emitter: EventTarget | undefined,
+    eventName: string,
+    handler: Handler,
+): void {
+    // Create a ref that stores handler
+    const savedHandler = useRef(handler);
+
+    // Update ref.current value if handler changes.
+    useEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+
+    useEffect(
+        () => {
+            // allow disabling this hook by passing a falsy emitter
+            if (!emitter) return;
+
+            // Create event listener that calls handler function stored in ref
+            const eventListener = (...args) => savedHandler.current(...args);
+
+            // Add event listener
+            emitter.addEventListener(eventName, eventListener);
+
+            // Remove event listener on cleanup
+            return () => {
+                emitter.removeEventListener(eventName, eventListener);
             };
         },
         [eventName, emitter], // Re-run if eventName or emitter changes
@@ -94,3 +133,18 @@ export function useEventEmitterState<T>(
     useEventEmitter(emitter, eventName, handler);
     return value;
 }
+
+export function useEventTargetState<T>(
+    target: EventTarget | undefined,
+    eventName: string,
+    fn: Mapper<T>,
+): T {
+    const [value, setValue] = useState<T>(fn());
+    const handler = useCallback((...args: any[]) => {
+        setValue(fn(...args));
+    }, [fn]);
+    // re-run when the emitter changes
+    useEffect(handler, [target]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEventTarget(target, eventName, handler);
+    return value;
+}

test/test-utils/test-utils.ts

@@ -382,6 +382,7 @@ export function mkStubRoom(roomId: string = null, name: string, client: MatrixCl
             members: {},
             getJoinRule: jest.fn().mockReturnValue(JoinRule.Invite),
             on: jest.fn(),
+            off: jest.fn(),
         } as unknown as RoomState,
         tags: {},
         setBlacklistUnverifiedDevices: jest.fn(),