rentgen/diag.tsx

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import EmailContent from './components/report-window/email-content';

import { makeFakeClusters } from './components/report-window/fake-clusters';

class ErrorBoundary extends React.Component<any, { hasError: boolean; error: any }> {
    constructor(props: any) {
        super(props);
        this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error: any) {
        return { hasError: true, error };
    }

    render() {
        if (this.state.hasError) {
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
    }
}

function Diag() {
    const [json, setjson] = React.useState(
        JSON.stringify({ answers: { hosts: {} }, visited_url: '', fake_clusters_data: {} })
    );
    const { answers, visited_url, fake_clusters_data } = JSON.parse(json);
    const fake_clusters = makeFakeClusters(fake_clusters_data);
    return (
        <div style={{ display: 'grid', gridTemplateColumns: '50% 50%', minHeight: '100vh' }}>
            <div>
                <textarea
                    style={{ width: 'calc(100% - 50px)', height: '100%' }}
                    value={json}
                    onChange={(e) => {
                        setjson(e.target.value);
                    }}
                ></textarea>
            </div>
            <div>
                <EmailContent
                    {...{
                        answers,
                        visited_url,
                        clusters: fake_clusters,
                        scrRequestPath: '/screenshots',
                        downloadFiles: () => {
                            alert('download!');
                        },
                        user_role: 'user',
                    }}
                />
            </div>
        </div>
    );
}

ReactDOM.render(
    <ErrorBoundary>
        <Diag />
    </ErrorBoundary>,
    document.getElementById('app')
);