From f5b01fdd69de13233f9e08ef76979e7c07b1759c Mon Sep 17 00:00:00 2001
From: Mike Bender <mikebender@deephaven.io>
Date: Tue, 20 Aug 2024 16:12:37 -0400
Subject: [PATCH] fix: makeEventFunctions take an array of parameters (#2186)

- Previously every emit required exactly one parameter, which is not the
case
- Allow zero or more parameters
---
 packages/dashboard/src/PanelEvent.ts          |   2 +-
 .../src/utils/EventUtils.test.ts              | 103 ++++++++++++++----
 .../golden-layout/src/utils/EventUtils.ts     |  53 +++++----
 3 files changed, 113 insertions(+), 45 deletions(-)

diff --git a/packages/dashboard/src/PanelEvent.ts b/packages/dashboard/src/PanelEvent.ts
index c15eb98f5..82e735418 100644
--- a/packages/dashboard/src/PanelEvent.ts
+++ b/packages/dashboard/src/PanelEvent.ts
@@ -76,7 +76,7 @@ export const {
   listen: listenForPanelOpen,
   emit: emitPanelOpen,
   useListener: usePanelOpenListener,
-} = makeEventFunctions<PanelOpenEventDetail>(PanelEvent.OPEN);
+} = makeEventFunctions<[detail: PanelOpenEventDetail]>(PanelEvent.OPEN);
 
 // TODO (#2147): Add the rest of the event functions here. Need to create the correct types for all of them.
 
diff --git a/packages/golden-layout/src/utils/EventUtils.test.ts b/packages/golden-layout/src/utils/EventUtils.test.ts
index 956a87d68..f0638fa2f 100644
--- a/packages/golden-layout/src/utils/EventUtils.test.ts
+++ b/packages/golden-layout/src/utils/EventUtils.test.ts
@@ -45,7 +45,7 @@ describe('EventUtils', () => {
 
   it('makeEmitFunction', () => {
     const event = 'test';
-    const emit = makeEmitFunction(event);
+    const emit = makeEmitFunction<unknown>(event);
     const payload = { test: 'test' };
     emit(eventEmitter, payload);
     expect(eventEmitter.emit).toHaveBeenCalledWith(event, payload);
@@ -109,30 +109,93 @@ describe('EventUtils', () => {
   });
 
   describe('makeEventFunctions', () => {
-    const event = 'test';
-    const { listen, emit, useListener } = makeEventFunctions(event);
-    const handler = jest.fn();
+    describe('makeEventFunctions without payload', () => {
+      const event = 'test';
+      const { listen, emit, useListener } = makeEventFunctions(event);
+      const handler = jest.fn();
 
-    it('listen', () => {
-      listen(eventEmitter, handler);
-      expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
-      expect(eventEmitter.off).not.toHaveBeenCalled();
+      it('listen', () => {
+        listen(eventEmitter, handler);
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+      });
+
+      it('emit', () => {
+        emit(eventEmitter);
+        expect(eventEmitter.emit).toHaveBeenCalledWith(event);
+      });
+
+      it('useListener', () => {
+        const { unmount } = renderHook(() =>
+          useListener(eventEmitter, handler)
+        );
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+        jest.clearAllMocks();
+        unmount();
+        expect(eventEmitter.on).not.toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).toHaveBeenCalledWith(event, handler);
+      });
     });
+    describe('makeEventFunctions with payload', () => {
+      type Payload = { test: string };
+      const event = 'test';
+      const { listen, emit, useListener } = makeEventFunctions<Payload>(event);
+      const handler = jest.fn();
+
+      it('listen', () => {
+        listen(eventEmitter, handler);
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+      });
+
+      it('emit', () => {
+        const payload: Payload = { test: 'test' };
+        emit(eventEmitter, payload);
+        expect(eventEmitter.emit).toHaveBeenCalledWith(event, payload);
+      });
 
-    it('emit', () => {
-      const payload = { test: 'test' };
-      emit(eventEmitter, payload);
-      expect(eventEmitter.emit).toHaveBeenCalledWith(event, payload);
+      it('useListener', () => {
+        const { unmount } = renderHook(() =>
+          useListener(eventEmitter, handler)
+        );
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+        jest.clearAllMocks();
+        unmount();
+        expect(eventEmitter.on).not.toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).toHaveBeenCalledWith(event, handler);
+      });
     });
+    describe('makeEventFunctions with multiple parameters', () => {
+      type Payload = [number, string];
+      const event = 'test';
+      const { listen, emit, useListener } = makeEventFunctions<Payload>(event);
+      const handler = jest.fn();
 
-    it('useListener', () => {
-      const { unmount } = renderHook(() => useListener(eventEmitter, handler));
-      expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
-      expect(eventEmitter.off).not.toHaveBeenCalled();
-      jest.clearAllMocks();
-      unmount();
-      expect(eventEmitter.on).not.toHaveBeenCalledWith(event, handler);
-      expect(eventEmitter.off).toHaveBeenCalledWith(event, handler);
+      it('listen', () => {
+        listen(eventEmitter, handler);
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+      });
+
+      it('emit', () => {
+        const payload: Payload = [1, 'test'];
+        emit(eventEmitter, ...payload);
+        expect(eventEmitter.emit).toHaveBeenCalledWith(event, ...payload);
+      });
+
+      it('useListener', () => {
+        const { unmount } = renderHook(() =>
+          useListener(eventEmitter, handler)
+        );
+        expect(eventEmitter.on).toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).not.toHaveBeenCalled();
+        jest.clearAllMocks();
+        unmount();
+        expect(eventEmitter.on).not.toHaveBeenCalledWith(event, handler);
+        expect(eventEmitter.off).toHaveBeenCalledWith(event, handler);
+      });
     });
   });
 });
diff --git a/packages/golden-layout/src/utils/EventUtils.ts b/packages/golden-layout/src/utils/EventUtils.ts
index 9ae97437b..7862d7727 100644
--- a/packages/golden-layout/src/utils/EventUtils.ts
+++ b/packages/golden-layout/src/utils/EventUtils.ts
@@ -1,20 +1,23 @@
-import EventEmitter from './EventEmitter';
 import { useEffect } from 'react';
+import EventEmitter from './EventEmitter';
 
+type AsArray<P> = P extends unknown[] ? P : [P];
+
+export type EventHandlerFunction<P = []> = (...parameters: AsArray<P>) => void;
 export type EventListenerRemover = () => void;
-export type EventListenFunction<TPayload = unknown> = (
+export type EventListenFunction<TParameters = []> = (
   eventEmitter: EventEmitter,
-  handler: (p: TPayload) => void
+  handler: EventHandlerFunction<TParameters>
 ) => EventListenerRemover;
 
-export type EventEmitFunction<TPayload = unknown> = (
+export type EventEmitFunction<TParameters = []> = (
   eventEmitter: EventEmitter,
-  payload: TPayload
+  ...parameters: AsArray<TParameters>
 ) => void;
 
-export type EventListenerHook<TPayload = unknown> = (
+export type EventListenerHook<TParameters = []> = (
   eventEmitter: EventEmitter,
-  handler: (p: TPayload) => void
+  handler: EventHandlerFunction<TParameters>
 ) => void;
 
 /**
@@ -24,10 +27,10 @@ export type EventListenerHook<TPayload = unknown> = (
  * @param handler The handler to call when the event is emitted
  * @returns A function to stop listening for the event
  */
-export function listenForEvent<TPayload>(
+export function listenForEvent<TParameters = []>(
   eventEmitter: EventEmitter,
   event: string,
-  handler: (p: TPayload) => void
+  handler: EventHandlerFunction<TParameters>
 ): EventListenerRemover {
   eventEmitter.on(event, handler);
   return () => {
@@ -35,24 +38,24 @@ export function listenForEvent<TPayload>(
   };
 }
 
-export function makeListenFunction<TPayload>(
+export function makeListenFunction<TParameters = []>(
   event: string
-): EventListenFunction<TPayload> {
+): EventListenFunction<TParameters> {
   return (eventEmitter, handler) =>
     listenForEvent(eventEmitter, event, handler);
 }
 
-export function makeEmitFunction<TPayload>(
+export function makeEmitFunction<TParameters = []>(
   event: string
-): EventEmitFunction<TPayload> {
-  return (eventEmitter, payload) => {
-    eventEmitter.emit(event, payload);
+): EventEmitFunction<TParameters> {
+  return (eventEmitter, ...parameters) => {
+    eventEmitter.emit(event, ...parameters);
   };
 }
 
-export function makeUseListenerFunction<TPayload>(
+export function makeUseListenerFunction<TParameters = []>(
   event: string
-): EventListenerHook<TPayload> {
+): EventListenerHook<TParameters> {
   return (eventEmitter, handler) => {
     useEffect(
       () => listenForEvent(eventEmitter, event, handler),
@@ -66,14 +69,16 @@ export function makeUseListenerFunction<TPayload>(
  * @param event Name of the event to create functions for
  * @returns Listener, Emitter, and Hook functions for the event
  */
-export function makeEventFunctions<TPayload>(event: string): {
-  listen: EventListenFunction<TPayload>;
-  emit: EventEmitFunction<TPayload>;
-  useListener: EventListenerHook<TPayload>;
+export function makeEventFunctions<TParameters = []>(
+  event: string
+): {
+  listen: EventListenFunction<TParameters>;
+  emit: EventEmitFunction<TParameters>;
+  useListener: EventListenerHook<TParameters>;
 } {
   return {
-    listen: makeListenFunction<TPayload>(event),
-    emit: makeEmitFunction<TPayload>(event),
-    useListener: makeUseListenerFunction<TPayload>(event),
+    listen: makeListenFunction<TParameters>(event),
+    emit: makeEmitFunction<TParameters>(event),
+    useListener: makeUseListenerFunction<TParameters>(event),
   };
 }