scrum-poker-internal/resources/js/composables/useRoomEmotes.ts

import { onScopeDispose, watch } from 'vue';

import { getEcho } from '@/lib/echo';
import type { PaperBallThrownPayload } from '@/types/emote';

const PAPER_BALL_EVENT = '.room.emote.thrown';

export function useRoomEmotes(
    roomId: () => string,
    onPaperBallThrown: (payload: PaperBallThrownPayload) => void,
): void {
    const stopWatchingRoom = watch(
        roomId,
        (nextRoomId, _previousRoomId, onCleanup) => {
            const channel = getEcho().channel(`rooms.${nextRoomId}`);

            channel.listen(PAPER_BALL_EVENT, onPaperBallThrown);

            onCleanup(() => {
                channel.stopListening(PAPER_BALL_EVENT, onPaperBallThrown);
            });
        },
        { immediate: true },
    );

    onScopeDispose(stopWatchingRoom);
}