stream-chat-react/dist/components/Chat/hooks/useChat.js

React components to create chat conversations or livestream style chat

import { useCallback, useEffect, useRef, useState } from 'react';
import { defaultDateTimeParser, defaultTranslatorFunction, isLanguageSupported, Streami18n, } from '../../../i18n';
export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialNavOpen, }) => {
    const [translators, setTranslators] = useState({
        t: defaultTranslatorFunction,
        tDateTimeParser: defaultDateTimeParser,
        userLanguage: 'en',
    });
    const [channel, setChannel] = useState();
    const [mutes, setMutes] = useState([]);
    const [navOpen, setNavOpen] = useState(initialNavOpen);
    const [latestMessageDatesByChannels, setLatestMessageDatesByChannels] = useState({});
    const clientMutes = client.user?.mutes ?? [];
    const closeMobileNav = () => setNavOpen(false);
    const openMobileNav = () => setTimeout(() => setNavOpen(true), 100);
    const appSettings = useRef(null);
    const getAppSettings = () => {
        if (appSettings.current) {
            return appSettings.current;
        }
        appSettings.current = client.getAppSettings();
        return appSettings.current;
    };
    useEffect(() => {
        if (!client)
            return;
        const version = "13.6.2";
        const userAgent = client.getUserAgent();
        if (!userAgent.includes('stream-chat-react')) {
            // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
            // the upper-case text between double underscores is replaced with the actual semantic version of the library
            client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
        }
        client.threads.registerSubscriptions();
        client.polls.registerSubscriptions();
        client.reminders.registerSubscriptions();
        client.reminders.initTimers();
        return () => {
            client.threads.unregisterSubscriptions();
            client.polls.unregisterSubscriptions();
            client.reminders.unregisterSubscriptions();
            client.reminders.clearTimers();
        };
    }, [client]);
    useEffect(() => {
        setMutes(clientMutes);
        const handleEvent = (event) => {
            setMutes(event.me?.mutes || []);
        };
        client.on('notification.mutes_updated', handleEvent);
        return () => client.off('notification.mutes_updated', handleEvent);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [clientMutes?.length]);
    useEffect(() => {
        let userLanguage = client.user?.language;
        if (!userLanguage) {
            const browserLanguage = window.navigator.language.slice(0, 2); // just get language code, not country-specific version
            userLanguage = isLanguageSupported(browserLanguage)
                ? browserLanguage
                : defaultLanguage;
        }
        const streami18n = i18nInstance || new Streami18n({ language: userLanguage });
        streami18n.registerSetLanguageCallback((t) => setTranslators((prevTranslator) => ({ ...prevTranslator, t })));
        streami18n.getTranslators().then((translator) => {
            setTranslators({
                ...translator,
                userLanguage: userLanguage || defaultLanguage,
            });
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [i18nInstance]);
    const setActiveChannel = useCallback(async (activeChannel, watchers = {}, event) => {
        if (event && event.preventDefault)
            event.preventDefault();
        if (activeChannel && Object.keys(watchers).length) {
            await activeChannel.query({ watch: true, watchers });
        }
        setChannel(activeChannel);
        closeMobileNav();
    }, []);
    useEffect(() => {
        setLatestMessageDatesByChannels({});
    }, [client.user?.id]);
    return {
        channel,
        closeMobileNav,
        getAppSettings,
        latestMessageDatesByChannels,
        mutes,
        navOpen,
        openMobileNav,
        setActiveChannel,
        translators,
    };
};