130 lines
5.2 KiB
TypeScript
130 lines
5.2 KiB
TypeScript
import React, { Fragment } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { getMemory } from '../../memory';
|
|
import { useEmitter } from '../../util';
|
|
|
|
import './report-window.scss';
|
|
import Questions from './questions';
|
|
import EmailContent from './email-content';
|
|
import { parseAnswers, ParsedAnswers } from './parse-answers';
|
|
|
|
interface Host {
|
|
[name: string]: boolean;
|
|
}
|
|
|
|
function Report() {
|
|
const [hosts, setHosts] = React.useState<Host>({});
|
|
const [surveyMode, setSurveyMode] = React.useState<boolean>(false);
|
|
|
|
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);
|
|
|
|
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());
|
|
setHosts(
|
|
Object.fromEntries(
|
|
Object.values(clusters)
|
|
.filter((cluster) => cluster.getMarkedRequests().length > 0)
|
|
.map((cluster) => [cluster.id, true])
|
|
)
|
|
);
|
|
}, [mode, answers, origin]);
|
|
|
|
const visited_url = Object.values(clusters)
|
|
.find((cluster) => cluster.getMarkedRequests().length > 0)
|
|
?.getMarkedRequests()[0].originalURL;
|
|
|
|
const result = (
|
|
<div {...{ 'data-version': counter }}>
|
|
{mode === 'survey' ? (
|
|
<Questions
|
|
// hosts={Object.values(clusters)
|
|
// .filter((cluster) => cluster.getMarkedRequests().length > 0)
|
|
// .map((cluster) => cluster.id)}
|
|
hosts={Object.entries(hosts)
|
|
.filter((host) => host[1])
|
|
.map((host) => host[0])}
|
|
onComplete={(answers) => {
|
|
setAnswers(parseAnswers(answers));
|
|
setMode('preview');
|
|
}}
|
|
></Questions>
|
|
) : (
|
|
''
|
|
)}
|
|
{mode === 'preview' ? <EmailContent {...{ answers, visited_url, clusters }} /> : ''}
|
|
{/* <HARConverter {...{ entries }} /> */}
|
|
</div>
|
|
);
|
|
|
|
function markHost(name: string) {
|
|
const clone_hosts = Object.assign({}, hosts);
|
|
clone_hosts[name] = !clone_hosts[name];
|
|
setHosts(clone_hosts);
|
|
console.log(hosts);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<header className="header">
|
|
<img src="../../assets/icon-addon.svg" height={32}></img>
|
|
<div className="webpage-metadata">
|
|
<span>Generowanie raportu </span>
|
|
<span className="webpage-metadata--hyperlink">{origin}</span>
|
|
</div>
|
|
</header>
|
|
{surveyMode ? (
|
|
<section>{result}</section>
|
|
) : (
|
|
<section>
|
|
Wybór hostów
|
|
<ul>
|
|
{
|
|
// Object.values(clusters)
|
|
// .filter((cluster) => cluster.getMarkedRequests().length > 0)
|
|
// .map((cluster) => cluster.id)
|
|
|
|
Object.keys(hosts).map((host) => {
|
|
return (
|
|
<li key={host}>
|
|
<label htmlFor={host} onClick={() => markHost(host)}>
|
|
<input
|
|
name={host}
|
|
type="checkbox"
|
|
// onChange={() => markHost(host)}
|
|
readOnly={true}
|
|
checked={hosts[host]}
|
|
></input>
|
|
{host}
|
|
</label>
|
|
</li>
|
|
);
|
|
})
|
|
}
|
|
|
|
{/* */}
|
|
</ul>
|
|
<button onClick={() => setSurveyMode(true)}>Zatwierdź</button>
|
|
</section>
|
|
)}
|
|
</div>
|
|
);
|
|
} catch (e) {
|
|
console.error(e);
|
|
return <div>ERROR! {JSON.stringify(e)}</div>;
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<Report />, document.getElementById('app'));
|