stream-chat-react/dist/components/ChannelPreview/hooks/useMessageDeliveryStatus.js

React components to create chat conversations or livestream style chat

import { useCallback, useEffect, useState } from 'react';
import { useChatContext } from '../../../context';
export var MessageDeliveryStatus;
(function (MessageDeliveryStatus) {
    MessageDeliveryStatus["SENT"] = "sent";
    MessageDeliveryStatus["DELIVERED"] = "delivered";
    MessageDeliveryStatus["READ"] = "read";
})(MessageDeliveryStatus || (MessageDeliveryStatus = {}));
export const useMessageDeliveryStatus = ({ channel, lastMessage, }) => {
    const { client } = useChatContext();
    const [messageDeliveryStatus, setMessageDeliveryStatus] = useState();
    const isOwnMessage = useCallback((message) => client.user && message && message.user?.id === client.user.id, [client]);
    useEffect(() => {
        // empty channel
        if (!lastMessage) {
            setMessageDeliveryStatus(undefined);
        }
        const lastMessageIsOwn = isOwnMessage(lastMessage);
        if (!lastMessage?.created_at || !lastMessageIsOwn)
            return;
        const msgRef = {
            msgId: lastMessage.id,
            timestampMs: lastMessage.created_at.getTime(),
        };
        const readersForMessage = channel.messageReceiptsTracker.readersForMessage(msgRef);
        const deliveredForMessage = channel.messageReceiptsTracker.deliveredForMessage(msgRef);
        setMessageDeliveryStatus(readersForMessage.length > 1 ||
            (readersForMessage.length === 1 && readersForMessage[0].id !== client.user?.id)
            ? MessageDeliveryStatus.READ
            : deliveredForMessage.length > 1 ||
                (deliveredForMessage.length === 1 &&
                    deliveredForMessage[0].id !== client.user?.id)
                ? MessageDeliveryStatus.DELIVERED
                : MessageDeliveryStatus.SENT);
    }, [channel, client, isOwnMessage, lastMessage]);
    useEffect(() => {
        const handleMessageNew = (event) => {
            // the last message is not mine, so do not show the delivery status
            if (!isOwnMessage(event.message)) {
                return setMessageDeliveryStatus(undefined);
            }
            return setMessageDeliveryStatus(MessageDeliveryStatus.SENT);
        };
        channel.on('message.new', handleMessageNew);
        return () => {
            channel.off('message.new', handleMessageNew);
        };
    }, [channel, isOwnMessage]);
    useEffect(() => {
        if (!isOwnMessage(lastMessage))
            return;
        const handleMessageDelivered = (event) => {
            if (event.user?.id !== client.user?.id &&
                lastMessage &&
                lastMessage.id === event.last_delivered_message_id)
                setMessageDeliveryStatus(MessageDeliveryStatus.DELIVERED);
        };
        const handleMarkRead = (event) => {
            if (event.user?.id !== client.user?.id)
                setMessageDeliveryStatus(MessageDeliveryStatus.READ);
        };
        channel.on('message.delivered', handleMessageDelivered);
        channel.on('message.read', handleMarkRead);
        return () => {
            channel.off('message.delivered', handleMessageDelivered);
            channel.off('message.read', handleMarkRead);
        };
    }, [channel, client, isOwnMessage, lastMessage]);
    return {
        messageDeliveryStatus,
    };
};