accounts-frontend/packages/app/components/auth/authError/AuthError.tsx

import React, { ComponentType, useEffect } from 'react';

import { resolve as resolveError } from 'app/services/errorsDict';
import { PanelBodyHeader } from 'app/components/ui/Panel';
import { ValidationError } from 'app/components/ui/form/FormModel';

interface Props {
    error: ValidationError;
    onClose?: () => void;
}

let autoHideTimer: number | null = null;
function resetTimeout(): void {
    if (autoHideTimer) {
        clearTimeout(autoHideTimer);
        autoHideTimer = null;
    }
}

const AuthError: ComponentType<Props> = ({ error, onClose }) => {
    useEffect(() => {
        resetTimeout();

        if (onClose && typeof error !== 'string' && error.payload && error.payload.canRepeatIn) {
            const msLeft = error.payload.canRepeatIn * 1000;
            // 1500 to let the user see, that time is elapsed
            setTimeout(onClose, msLeft - Date.now() + 1500);
        }

        return resetTimeout;
    }, [error, onClose]);

    return (
        <PanelBodyHeader type="error" onClose={onClose}>
            {resolveError(error)}
        </PanelBodyHeader>
    );
};

export default AuthError;