show.error.details.js

import React, {Component} from 'react';
import UIConstants from './utils/ui.constants';
import { Toast } from 'primereact/toast';

export class ShowErrorDetails extends Component {
    constructor(props) {
        super(props);
        this.state={
            buttonLabel: 'Show Details',
            showDetails: false,
            errTooltip: 'Click here to show error details',
            showDetailsCSS: 'none'
        }
        this.showHideErrorDetails = this.showHideErrorDetails.bind(this);
        this.copyErrorDetailsToClipboard = this.copyErrorDetailsToClipboard.bind(this);
    }

    /**
     * Show/Hide the Error details
     */
    showHideErrorDetails() {
        if(this.state.buttonLabel === 'Show Details') {
            this.setState({buttonLabel: 'Hide Details',  errTooltip: 'Click here to hide error details', showDetailsCSS: 'inline'});
        }   else {
            this.setState({buttonLabel: 'Show Details', showDetails: true, errTooltip: 'Click here to show error details', showDetailsCSS: 'none'})
        }
    }

    /**
     * Copy the error details to clipboard
     */
    async copyErrorDetailsToClipboard() {
        try {
            const queryOpts = { name: 'clipboard-write', allowWithoutGesture: true };
            await navigator.permissions.query(queryOpts);
            await navigator.clipboard.writeText(this.props.response.request.response);
            this.growl.show({severity: 'success', summary: '', detail: 'Error details copied to clipboard'});
        }   catch(error) {
            try{
                const elem = document.createElement('textarea');
                elem.value = this.props.response.request.response;
                document.body.appendChild(elem);
                elem.select();
                document.execCommand('copy');
                document.body.removeChild(elem);
            } catch (error) {
                this.growl.show({severity: 'error', summary: 'Warning', detail: 'Unable to copy the data to clipboard'});
            }
        }
    }

    render() {
        const httpStatusMsg = UIConstants.httpStatusMessages[this.props.response.status];
        const data = httpStatusMsg? httpStatusMsg.detail: '';
        var message = '['+this.props.response.status+'] '+JSON.stringify(this.props.response.statusText)+ ' ['+data+']';
        return (
            <div>
                <Toast ref={(ref) => this.growl =ref}/>
                <div>
                    {message}
                </div>
                <div>
                    <div className="show_error_hide" >
                        <button className="p-link" onClick={this.showHideErrorDetails} 
                            title={this.state.errTooltip} style={{color: '#1e71d9', fontSize: "14px"}}>{this.state.buttonLabel}</button>
                        <button className="p-link" onClick={this.copyErrorDetailsToClipboard} tooltip="Copy the error details to clipboard"
                            style={{marginLeft: '1em', color: '#1e71d9'}}>
                            <i className='fas fa-copy'></i></button>
                    </div>
                    
                    <div style={{display : this.state.showDetailsCSS}} >
                        <p style={{fontWeight: 'bold'}}> Error Details:</p>
                        <div id="showError" className="show_error_details" >
                            {this.props.response.request.response}
                        </div>
                    </div>
                   
                </div>
          </div>
        );
    }
}
export default ShowErrorDetails;