RocketChat/Rocket.Chat

View on GitHub
apps/meteor/client/views/root/hooks/useEscapeKeyStroke.ts

Summary

Maintainability
A
1 hr
Test Coverage
import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
import { useEffect } from 'react';

import GenericModal from '../../../components/GenericModal';
import { imperativeModal } from '../../../lib/imperativeModal';
import { useClearUnreadAllMessagesMutation } from './useClearUnreadAllMessagesMutation';

export const useEscapeKeyStroke = () => {
    const dispatchToastMessage = useToastMessageDispatch();
    const t = useTranslation();

    const clearUnreadAllMessagesMutation = useClearUnreadAllMessagesMutation({
        onError: (error) => {
            dispatchToastMessage({ type: 'error', message: error });
        },
        onMutate: () => {
            imperativeModal.close();
        },
    });

    useEffect(() => {
        const handleKeyDown = (event: KeyboardEvent) => {
            if (event.code !== 'Escape' || !(event.shiftKey === true || event.ctrlKey === true)) {
                return;
            }

            event.preventDefault();
            event.stopPropagation();

            imperativeModal.open({
                component: GenericModal,
                props: {
                    children: t('Are_you_sure_you_want_to_clear_all_unread_messages'),
                    variant: 'warning',
                    title: t('Clear_all_unreads_question'),
                    confirmText: t('Yes_clear_all'),
                    onClose: imperativeModal.close,
                    onCancel: imperativeModal.close,
                    onConfirm: clearUnreadAllMessagesMutation.mutate,
                },
            });
        };

        document.body.addEventListener('keydown', handleKeyDown);

        return () => {
            document.body.removeEventListener('keydown', handleKeyDown);
        };
    }, [clearUnreadAllMessagesMutation.mutate, dispatchToastMessage, t]);
};