Report window to handle refreshes properly

This commit is contained in:
Kuba Orlik 2022-02-10 20:03:48 +01:00
parent 473424d88d
commit 468391489c
1 changed files with 63 additions and 52 deletions

View File

@ -9,59 +9,70 @@ import EmailContent from './email-content';
import { parseAnswers, ParsedAnswers } from './parse-answers'; import { parseAnswers, ParsedAnswers } from './parse-answers';
function Report() { function Report() {
try { try {
const origin = new URL(document.location.toString()).searchParams.get('origin'); const url = new URL(document.location.toString());
const [counter] = useEmitter(getMemory()); const origin = url.searchParams.get('origin');
const [answers, setAnswers] = React.useState<ParsedAnswers>(null); const [counter] = useEmitter(getMemory());
const [mode, setMode] = React.useState('survey'); const [answers, setAnswers] = React.useState<ParsedAnswers>(
const clusters = getMemory().getClustersForOrigin(origin); url.searchParams.get('answers') ? JSON.parse(url.searchParams.get('answers')) : null
/* const [entries, setEntries] = React.useState<StolenDataEntry[]>([]); */ );
/* React.useEffect(() => { const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey');
* setEntries( const clusters = getMemory().getClustersForOrigin(origin);
* Object.values(clusters) /* const [entries, setEntries] = React.useState<StolenDataEntry[]>([]); */
* .map((cluster) => { /* React.useEffect(() => {
* cluster.calculateRepresentativeStolenData(); * setEntries(
* return cluster.representativeStolenData; * Object.values(clusters)
* }) * .map((cluster) => {
* .reduce(reduceConcat, []) * cluster.calculateRepresentativeStolenData();
* .filter((entry) => entry.isMarked) * return cluster.representativeStolenData;
* ); * })
* }, []); */ * .reduce(reduceConcat, [])
/* if (entries.length == 0) { * .filter((entry) => entry.isMarked)
* return <>Wczytywanie...</>; * );
* } */ * }, []); */
const visited_url = Object.values(clusters) /* if (entries.length == 0) {
.find((cluster) => cluster.getMarkedRequests().length > 0) * return <>Wczytywanie...</>;
?.getMarkedRequests()[0].originalURL; * } */
const result = ( React.useEffect(() => {
<div {...{ 'data-version': counter }}> const url = new URL(document.location.toString());
<nav> url.searchParams.set('origin', origin);
<img src="../assets/icon-addon.svg" width={48} height={48}></img>{' '} url.searchParams.set('answers', JSON.stringify(answers));
<h1>Rentgen - Generuj treść maila dla {origin}</h1> url.searchParams.set('mode', mode);
</nav> history.pushState({}, 'Rentgen', url.toString());
{mode === 'survey' ? ( }, [mode, answers, origin]);
<Questions const visited_url = Object.values(clusters)
hosts={Object.values(clusters) .find((cluster) => cluster.getMarkedRequests().length > 0)
.filter((cluster) => cluster.getMarkedRequests().length > 0) ?.getMarkedRequests()[0].originalURL;
.map((cluster) => cluster.id)}
onComplete={(answers) => { const result = (
setAnswers(parseAnswers(answers)); <div {...{ 'data-version': counter }}>
setMode('preview'); <nav>
}} <img src="../assets/icon-addon.svg" width={48} height={48}></img>{' '}
></Questions> <h1>Rentgen - Generuj treść maila dla {origin}</h1>
) : ( </nav>
'' {mode === 'survey' ? (
)} <Questions
{mode === 'preview' ? <EmailContent {...{ answers, visited_url, clusters }} /> : ''} hosts={Object.values(clusters)
{/* <HARConverter {...{ entries }} /> */} .filter((cluster) => cluster.getMarkedRequests().length > 0)
</div> .map((cluster) => cluster.id)}
); onComplete={(answers) => {
return result; setAnswers(parseAnswers(answers));
} catch (e) { setMode('preview');
console.error(e); }}
return <div>ERROR! {JSON.stringify(e)}</div>; ></Questions>
} ) : (
''
)}
{mode === 'preview' ? <EmailContent {...{ answers, visited_url, clusters }} /> : ''}
{/* <HARConverter {...{ entries }} /> */}
</div>
);
return result;
} catch (e) {
console.error(e);
return <div>ERROR! {JSON.stringify(e)}</div>;
}
} }
ReactDOM.render(<Report />, document.getElementById('app')); ReactDOM.render(<Report />, document.getElementById('app'));