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( - PeerAction.VERIFICATION_TOKEN_ENCRYPTED, - groupActionNamespace - ) + usePeerAction({ + peerAction: PeerAction.VERIFICATION_TOKEN_ENCRYPTED, + peerRoom, + }) const [sendVerificationTokenRaw, receiveVerificationTokenRaw] = - peerRoom.makeAction( - PeerAction.VERIFICATION_TOKEN_RAW, - groupActionNamespace - ) + usePeerAction({ + 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 = ({ + peerRoom, + peerAction, +}: { + peerRoom: PeerRoom + peerAction: PeerAction +}): [ActionSender, ActionReceiver, ActionProgress] => { + const [[sender, receiver, progress, detatchReceiver]] = useState(() => + // FIXME: Remove namespace + peerRoom.makeAction(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 = ( peerAction: PeerAction, namespace: string - ): [ActionSender, ActionReceiver, ActionProgress] => { + ): [ActionSender, ActionReceiver, ActionProgress, () => void] => { const [sender, receiver, progress] = this.room.makeAction( `${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 = 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',