rentgen/components/report-window/report-window.tsx

85 lines
3.4 KiB
TypeScript
Raw Normal View History

2022-04-25 14:29:55 +02:00
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { getMemory } from '../../memory';
import { useEmitter } from '../../util';
2021-11-07 13:57:24 +01:00
2022-02-02 10:33:09 +01:00
import './report-window.scss';
import Questions from './questions';
import EmailContent from './email-content';
import { parseAnswers, ParsedAnswers } from './parse-answers';
2022-05-21 14:42:15 +02:00
import ScreenshotGenerator from './screenshot-generator';
2022-02-02 10:33:09 +01:00
2021-11-07 13:57:24 +01:00
function Report() {
2022-04-24 22:11:33 +02:00
try {
const url = new URL(document.location.toString());
const origin = url.searchParams.get('origin');
const [counter] = useEmitter(getMemory());
const [answers, setAnswers] = React.useState<ParsedAnswers>(
url.searchParams.get('answers') ? JSON.parse(url.searchParams.get('answers')) : null
);
const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey');
const clusters = getMemory().getClustersForOrigin(origin);
2022-04-24 22:11:33 +02:00
React.useEffect(() => {
const url = new URL(document.location.toString());
url.searchParams.set('origin', origin);
url.searchParams.set('answers', JSON.stringify(answers));
url.searchParams.set('mode', mode);
history.pushState({}, 'Rentgen', url.toString());
}, [mode, answers, origin]);
const visited_url = Object.values(clusters)
.find((cluster) => cluster.getMarkedRequests().length > 0)
?.getMarkedRequests()[0].originalURL;
2022-04-24 22:11:33 +02:00
const result = (
<div {...{ 'data-version': counter }}>
{mode === 'survey' ? (
<Questions
hosts={Object.values(clusters)
.filter((cluster) => cluster.getMarkedRequests().length > 0)
.map((cluster) => cluster.id)}
2022-04-24 22:11:33 +02:00
onComplete={(answers) => {
setAnswers(parseAnswers(answers));
2022-05-21 14:42:15 +02:00
setMode('screenshots');
2022-04-24 22:11:33 +02:00
}}
></Questions>
) : (
''
)}
2022-05-21 14:42:15 +02:00
{mode === 'screenshots' ? (
2022-05-22 16:49:24 +02:00
<ScreenshotGenerator
{...{ visited_url, clusters, setReportWindowMode: setMode }}
/>
2022-05-21 14:42:15 +02:00
) : (
''
)}
2022-04-24 22:11:33 +02:00
{mode === 'preview' ? <EmailContent {...{ answers, visited_url, clusters }} /> : ''}
{/* <HARConverter {...{ entries }} /> */}
</div>
);
2022-04-25 14:29:55 +02:00
return (
<Fragment>
2022-04-25 14:29:55 +02:00
<header className="header">
<img src="../../assets/icon-addon.svg" height={32}></img>
<div className="webpage-metadata">
{origin ? (
<>
<span>Generowanie raportu </span>
<span className="webpage-metadata--hyperlink">{origin}</span>
</>
) : (
<span>Przejdź do wybranej strony internetowej</span>
)}
2022-04-25 14:29:55 +02:00
</div>
</header>
<section>{result}</section>
</Fragment>
2022-04-25 14:29:55 +02:00
);
2022-04-24 22:11:33 +02:00
} catch (e) {
console.error(e);
return <div>ERROR! {JSON.stringify(e)}</div>;
}
2021-11-07 13:57:24 +01:00
}
ReactDOM.render(<Report />, document.getElementById('app'));