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

123 lines
4.5 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
2022-07-08 22:41:58 +02:00
function downloadFiles(link: string) {
let a = document.createElement('a');
a.setAttribute('href', link);
a.setAttribute('download', '');
a.setAttribute('target', '_blank');
a.click();
}
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');
2022-07-09 15:51:34 +02:00
if (!origin) {
return <div>Błąd: brak parametru "origin"</div>;
}
2022-04-24 22:11:33 +02:00
const [counter] = useEmitter(getMemory());
2022-07-09 15:28:37 +02:00
const rawAnswers = url.searchParams.get('answers');
2022-04-24 22:11:33 +02:00
const [answers, setAnswers] = React.useState<ParsedAnswers>(
2022-07-09 15:28:37 +02:00
rawAnswers ? JSON.parse(rawAnswers) : null
2022-04-24 22:11:33 +02:00
);
const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey');
2022-07-08 22:41:58 +02:00
const [scrRequestPath, setScrRequestPath] = React.useState('');
2022-07-09 15:28:37 +02:00
const clusters = getMemory().getClustersForOrigin(origin || '');
2022-04-24 22:11:33 +02:00
React.useEffect(() => {
2022-07-09 15:28:37 +02:00
if (!origin) return;
2022-04-24 22:11:33 +02:00
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)
2022-07-09 15:51:34 +02:00
.sort((a, b) => (a.lastModified > b.lastModified ? -1 : 1))
2022-07-09 15:28:37 +02:00
.find((cluster) => !!cluster.lastFullUrl)?.lastFullUrl;
if (!visited_url) {
return <div>Wczytywanie...</div>;
}
2022-04-24 22:11:33 +02:00
const result = (
<div {...{ 'data-version': counter }}>
{mode === 'survey' ? (
<Questions
2022-07-07 19:59:16 +02:00
clusters={Object.values(clusters).filter(
(cluster) => cluster.getMarkedRequests().length > 0
)}
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
2022-07-08 22:41:58 +02:00
{...{
visited_url,
clusters,
setReportWindowMode: setMode,
setRequestPath: setScrRequestPath,
downloadFiles: downloadFiles,
user_role: answers.user_role,
2022-07-08 22:41:58 +02:00
}}
/>
) : (
''
)}
{mode === 'preview' ? (
<EmailContent
{...{
answers,
visited_url,
clusters,
scrRequestPath,
downloadFiles: downloadFiles,
user_role: answers.user_role,
2022-07-08 22:41:58 +02:00
}}
2022-05-22 16:49:24 +02:00
/>
2022-05-21 14:42:15 +02:00
) : (
''
)}
2022-04-24 22:11:33 +02:00
</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>
2022-08-13 22:42:50 +02:00
<section id="main-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'));