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/components/Room/useRoom.ts

@@ -6,11 +6,7 @@ import { useDebounce } from '@react-hook/debounce'
 
 import { ShellContext } from 'contexts/ShellContext'
 import { SettingsContext } from 'contexts/SettingsContext'
-import {
-  directMessageActionNamespace,
-  groupActionNamespace,
-  PeerAction,
-} from 'models/network'
+import { PeerAction } from 'models/network'
 import {
   AudioState,
   Message,
@@ -36,6 +32,7 @@ import { PeerRoom, PeerHookType } from 'lib/PeerRoom'
 import { notification } from 'services/Notification'
 import { fileTransfer } from 'lib/FileTransfer'
 import { AllowedKeyType, encryption } from 'services/Encryption'
+import { usePeerAction } from 'hooks/usePeerAction'
 
 import { messageTranscriptSizeLimit } from 'config/messaging'
 
@@ -188,15 +185,11 @@ export function useRoom(
     ]
   )
 
-  const peerActionNamespace = isDirectMessageRoom
-    ? directMessageActionNamespace
-    : groupActionNamespace
-
   const [sendTypingStatusChange, receiveTypingStatusChange] =
-    peerRoom.makeAction<TypingStatus>(
-      PeerAction.TYPING_STATUS_CHANGE,
-      peerActionNamespace
-    )
+    usePeerAction<TypingStatus>({
+      peerAction: PeerAction.TYPING_STATUS_CHANGE,
+      peerRoom,
+    })
 
   const [isTyping, setIsTypingDebounced, setIsTyping] = useDebounce(
     false,
@@ -250,24 +243,28 @@ export function useRoom(
     if (isShowingMessages) setUnreadMessages(0)
   }, [isShowingMessages, setUnreadMessages])
 
-  const [sendPeerMetadata, receivePeerMetadata] =
-    peerRoom.makeAction<UserMetadata>(
-      PeerAction.PEER_METADATA,
-      peerActionNamespace
-    )
+  const [sendPeerMetadata, receivePeerMetadata] = usePeerAction<UserMetadata>({
+    peerAction: PeerAction.PEER_METADATA,
+    peerRoom,
+  })
 
-  const [sendMessageTranscript, receiveMessageTranscript] = peerRoom.makeAction<
+  const [sendMessageTranscript, receiveMessageTranscript] = usePeerAction<
     Array<ReceivedMessage | ReceivedInlineMedia>
-  >(PeerAction.MESSAGE_TRANSCRIPT, peerActionNamespace)
+  >({
+    peerAction: PeerAction.MESSAGE_TRANSCRIPT,
+    peerRoom,
+  })
 
-  const [sendPeerMessage, receivePeerMessage] =
-    peerRoom.makeAction<UnsentMessage>(PeerAction.MESSAGE, peerActionNamespace)
+  const [sendPeerMessage, receivePeerMessage] = usePeerAction<UnsentMessage>({
+    peerAction: PeerAction.MESSAGE,
+    peerRoom,
+  })
 
   const [sendPeerInlineMedia, receivePeerInlineMedia] =
-    peerRoom.makeAction<UnsentInlineMedia>(
-      PeerAction.MEDIA_MESSAGE,
-      peerActionNamespace
-    )
+    usePeerAction<UnsentInlineMedia>({
+      peerAction: PeerAction.MEDIA_MESSAGE,
+      peerRoom,
+    })
 
   const { privateKey } = settingsContext.getUserSettings()
 

src/components/Room/useRoomAudio.ts

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useCallback, useState } from 'react'
 
 import { ShellContext } from 'contexts/ShellContext'
-import { groupActionNamespace, PeerAction } from 'models/network'
+import { PeerAction } from 'models/network'
 import {
   AudioState,
   Peer,
@@ -10,6 +10,7 @@ import {
   StreamType,
 } from 'models/chat'
 import { PeerRoom, PeerHookType, PeerStreamType } from 'lib/PeerRoom'
+import { usePeerAction } from 'hooks/usePeerAction'
 
 interface UseRoomAudioConfig {
   peerRoom: PeerRoom
@@ -38,9 +39,12 @@ export function useRoomAudio({ peerRoom }: UseRoomAudioConfig) {
     })()
   }, [audioStream])
 
-  const [sendAudioChange, receiveAudioChange] = peerRoom.makeAction<
+  const [sendAudioChange, receiveAudioChange] = usePeerAction<
     Partial<PeerAudioChannelState>
-  >(PeerAction.AUDIO_CHANGE, groupActionNamespace)
+  >({
+    peerAction: PeerAction.AUDIO_CHANGE,
+    peerRoom,
+  })
 
   receiveAudioChange((peerAudioChannelState, peerId) => {
     setPeerList(peerList => {

src/components/Room/useRoomFileShare.ts

@@ -3,10 +3,11 @@ import { useContext, useEffect, useState } from 'react'
 import { sleep } from 'lib/sleep'
 import { RoomContext } from 'contexts/RoomContext'
 import { ShellContext } from 'contexts/ShellContext'
-import { groupActionNamespace, PeerAction } from 'models/network'
+import { PeerAction } from 'models/network'
 import { FileOfferMetadata, Peer } from 'models/chat'
 import { PeerRoom, PeerHookType } from 'lib/PeerRoom'
 import { fileTransfer } from 'lib/FileTransfer'
+import { usePeerAction } from 'hooks/usePeerAction'
 
 interface UseRoomFileShareConfig {
   onInlineMediaUpload: (files: File[]) => void
@@ -33,10 +34,10 @@ export function useRoomFileShare({
   const { peerOfferedFileMetadata, setPeerOfferedFileMetadata } = roomContext
 
   const [sendFileOfferMetadata, receiveFileOfferMetadata] =
-    peerRoom.makeAction<FileOfferMetadata | null>(
-      PeerAction.FILE_OFFER,
-      groupActionNamespace
-    )
+    usePeerAction<FileOfferMetadata | null>({
+      peerAction: PeerAction.FILE_OFFER,
+      peerRoom,
+    })
 
   receiveFileOfferMetadata((fileOfferMetadata, peerId) => {
     if (fileOfferMetadata) {

src/components/Room/useRoomScreenShare.ts

@@ -3,7 +3,7 @@ import { useContext, useEffect, useCallback, useState } from 'react'
 import { isRecord } from 'lib/type-guards'
 import { RoomContext } from 'contexts/RoomContext'
 import { ShellContext } from 'contexts/ShellContext'
-import { groupActionNamespace, PeerAction } from 'models/network'
+import { PeerAction } from 'models/network'
 import {
   ScreenShareState,
   Peer,
@@ -12,6 +12,7 @@ import {
   AudioState,
 } from 'models/chat'
 import { PeerRoom, PeerHookType, PeerStreamType } from 'lib/PeerRoom'
+import { usePeerAction } from 'hooks/usePeerAction'
 
 interface UseRoomScreenShareConfig {
   peerRoom: PeerRoom
@@ -37,11 +38,12 @@ export function useRoomScreenShare({ peerRoom }: UseRoomScreenShareConfig) {
     setSelfScreenStream,
   } = roomContext
 
-  const [sendScreenShare, receiveScreenShare] =
-    peerRoom.makeAction<ScreenShareState>(
-      PeerAction.SCREEN_SHARE,
-      groupActionNamespace
-    )
+  const [sendScreenShare, receiveScreenShare] = usePeerAction<ScreenShareState>(
+    {
+      peerAction: PeerAction.SCREEN_SHARE,
+      peerRoom,
+    }
+  )
 
   receiveScreenShare((screenState, peerId) => {
     const newPeerList = peerList.map(peer => {

src/components/Room/useRoomVideo.ts

@@ -2,10 +2,11 @@ import { useContext, useEffect, useCallback, useState } from 'react'
 
 import { RoomContext } from 'contexts/RoomContext'
 import { ShellContext } from 'contexts/ShellContext'
-import { groupActionNamespace, PeerAction } from 'models/network'
+import { PeerAction } from 'models/network'
 import { VideoState, Peer, StreamType } from 'models/chat'
 import { PeerRoom, PeerHookType, PeerStreamType } from 'lib/PeerRoom'
 import { isRecord } from 'lib/type-guards'
+import { usePeerAction } from 'hooks/usePeerAction'
 
 interface UseRoomVideoConfig {
   peerRoom: PeerRoom
@@ -68,10 +69,10 @@ export function useRoomVideo({ peerRoom }: UseRoomVideoConfig) {
     })()
   }, [peerRoom, selfVideoStream, setSelfVideoStream])
 
-  const [sendVideoChange, receiveVideoChange] = peerRoom.makeAction<VideoState>(
-    PeerAction.VIDEO_CHANGE,
-    groupActionNamespace
-  )
+  const [sendVideoChange, receiveVideoChange] = usePeerAction<VideoState>({
+    peerAction: PeerAction.VIDEO_CHANGE,
+    peerRoom,
+  })
 
   receiveVideoChange((videoState, peerId) => {
     const newPeerList = peerList.map(peer => {

src/hooks/usePeerAction.ts

@@ -0,0 +1,29 @@
+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(() =>
+    peerRoom.makeAction<T>(peerAction)
+  )
+
+  useEffect(() => {
+    return () => {
+      detatchReceiver()
+    }
+  }, [detatchReceiver])
+
+  return [sender, receiver, progress]
+}

src/lib/PeerRoom/PeerRoom.ts

@@ -177,24 +177,25 @@ export class PeerRoom {
     return peerConnections
   }
 
-  // FIXME: This is subscribing duplicate handlers
-  // FIXME: Remove namespace
   makeAction = <T extends DataPayload>(
-    peerAction: PeerAction,
-    namespace: string
-  ): [ActionSender<T>, ActionReceiver<T>, ActionProgress] => {
+    peerAction: PeerAction
+  ): [ActionSender<T>, ActionReceiver<T>, ActionProgress, () => void] => {
     const [sender, receiver, progress] = this.room.makeAction<T>(
-      `${namespace}.${peerAction}`
+      `${peerAction}`
     )
 
-    const eventName = `peerRoomAction.${namespace}.${peerAction}`
+    const eventName = `peerRoomAction.${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 +206,11 @@ export class PeerRoom {
       eventTarget.dispatchEvent(customEvent)
     })
 
-    return [sender, dispatchReceiver, progress]
+    const detatchDispatchReceiver = () => {
+      eventTarget.removeEventListener(eventName, handler)
+    }
+
+    return [sender, dispatchReceiver, progress, detatchDispatchReceiver]
   }
 
   addStream = (

src/models/network.ts

@@ -1,8 +1,3 @@
-// FIXME: Change these to be an enum
-export const groupActionNamespace = 'g'
-// FIXME: Multiple peer actions are probably overwriting each other
-export const directMessageActionNamespace = 'dm'
-
 // NOTE: Action names are limited to 12 characters, otherwise Trystero breaks.
 export enum PeerAction {
   MESSAGE = 0,

vite.config.ts

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