fixup! refactor(#141): [wip] enable multiple action receivers

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) => {

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]
+}

src/lib/PeerRoom/PeerRoom.ts

@@ -182,19 +182,23 @@ 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}`
     )
 
     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 = (

vite.config.ts

@@ -14,6 +14,7 @@ import { manifest } from './manifest'
 
 const srcPaths = [
   'components',
+  'hooks',
   'config',
   'contexts',
   'lib',