66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
|
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')
|
||
|
|
);
|