From 5d95ffaa9ac90c33c6073d1a90f9c338d094e061 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <me@jeremyckahn.com>
Date: Sun, 24 Nov 2024 11:27:17 -0600
Subject: [PATCH] fixup! refactor(#141): [wip] enable multiple action receivers

---
 src/components/Room/usePeerVerification.ts | 19 +++++++-------
 src/hooks/usePeerAction.ts                 | 30 ++++++++++++++++++++++
 src/lib/PeerRoom/PeerRoom.ts               | 16 +++++++++---
 vite.config.ts                             |  1 +
 4 files changed, 53 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/usePeerAction.ts

diff --git a/src/components/Room/usePeerVerification.ts b/src/components/Room/usePeerVerification.ts
index c4cd43ccc..b6948ef7e 100644
--- a/src/components/Room/usePeerVerification.ts
+++ b/src/components/Room/usePeerVerification.ts
@@ -3,9 +3,10 @@ import { ShellContext } from 'contexts/ShellContext'
 import { Peer, PeerVerificationState } from 'models/chat'
 import { encryption } from 'services/Encryption'
 import { PeerRoom } from 'lib/PeerRoom'
-import { groupActionNamespace, PeerAction } from 'models/network'
+import { PeerAction } from 'models/network'
 import { verificationTimeout } from 'config/messaging'
 import { usePeerNameDisplay } from 'components/PeerNameDisplay'
+import { usePeerAction } from 'hooks/usePeerAction'
 
 interface UserPeerVerificationProps {
   peerRoom: PeerRoom
@@ -23,16 +24,16 @@ export const usePeerVerification = ({
   const { getDisplayUsername } = usePeerNameDisplay()
 
   const [sendVerificationTokenEncrypted, receiveVerificationTokenEncrypted] =
-    peerRoom.makeAction<ArrayBuffer>(
-      PeerAction.VERIFICATION_TOKEN_ENCRYPTED,
-      groupActionNamespace
-    )
+    usePeerAction<ArrayBuffer>({
+      peerAction: PeerAction.VERIFICATION_TOKEN_ENCRYPTED,
+      peerRoom,
+    })
 
   const [sendVerificationTokenRaw, receiveVerificationTokenRaw] =
-    peerRoom.makeAction<string>(
-      PeerAction.VERIFICATION_TOKEN_RAW,
-      groupActionNamespace
-    )
+    usePeerAction<string>({
+      peerAction: PeerAction.VERIFICATION_TOKEN_RAW,
+      peerRoom,
+    })
 
   const initPeerVerification = useCallback(
     async (peer: Peer) => {
diff --git a/src/hooks/usePeerAction.ts b/src/hooks/usePeerAction.ts
new file mode 100644
index 000000000..5808821be
--- /dev/null
+++ b/src/hooks/usePeerAction.ts
@@ -0,0 +1,30 @@
+import { PeerRoom } from 'lib/PeerRoom'
+import { PeerAction } from 'models/network'
+import { useEffect, useState } from 'react'
+import {
+  ActionProgress,
+  ActionReceiver,
+  ActionSender,
+  DataPayload,
+} from 'trystero'
+
+export const usePeerAction = <T extends DataPayload>({
+  peerRoom,
+  peerAction,
+}: {
+  peerRoom: PeerRoom
+  peerAction: PeerAction
+}): [ActionSender<T>, ActionReceiver<T>, ActionProgress] => {
+  const [[sender, receiver, progress, detatchReceiver]] = useState(() =>
+    // FIXME: Remove namespace
+    peerRoom.makeAction<T>(peerAction, '')
+  )
+
+  useEffect(() => {
+    return () => {
+      detatchReceiver()
+    }
+  }, [detatchReceiver])
+
+  return [sender, receiver, progress]
+}
diff --git a/src/lib/PeerRoom/PeerRoom.ts b/src/lib/PeerRoom/PeerRoom.ts
index 445d805ab..bc987b556 100644
--- a/src/lib/PeerRoom/PeerRoom.ts
+++ b/src/lib/PeerRoom/PeerRoom.ts
@@ -182,7 +182,7 @@ export class PeerRoom {
   makeAction = <T extends DataPayload>(
     peerAction: PeerAction,
     namespace: string
-  ): [ActionSender<T>, ActionReceiver<T>, ActionProgress] => {
+  ): [ActionSender<T>, ActionReceiver<T>, ActionProgress, () => void] => {
     const [sender, receiver, progress] = this.room.makeAction<T>(
       `${namespace}.${peerAction}`
     )
@@ -190,11 +190,15 @@ export class PeerRoom {
     const eventName = `peerRoomAction.${namespace}.${peerAction}`
     const eventTarget = new EventTarget()
 
+    let handler: EventListenerOrEventListenerObject | null = null
+
     const dispatchReceiver: ActionReceiver<T> = callback => {
-      eventTarget.addEventListener(eventName, event => {
+      handler = (event: Event): void => {
         // @ts-expect-error
         callback(...event.detail)
-      })
+      }
+
+      eventTarget.addEventListener(eventName, handler)
     }
 
     receiver((...args) => {
@@ -205,7 +209,11 @@ export class PeerRoom {
       eventTarget.dispatchEvent(customEvent)
     })
 
-    return [sender, dispatchReceiver, progress]
+    const detatchDispatchReceiver = () => {
+      eventTarget.removeEventListener(eventName, handler)
+    }
+
+    return [sender, dispatchReceiver, progress, detatchDispatchReceiver]
   }
 
   addStream = (
diff --git a/vite.config.ts b/vite.config.ts
index 38870844d..83cf69c34 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,6 +14,7 @@ import { manifest } from './manifest'
 
 const srcPaths = [
   'components',
+  'hooks',
   'config',
   'contexts',
   'lib',