Download buttons for screenshots

components/report-window/email-content.scss

@@ -5,12 +5,6 @@ h1 {
     margin-bottom: calc(24 / 16 * 1rem);
 }
 
-.generator-container {
-    max-width: 100ex;
-    margin: 0 auto;
-    font-size: calc(14 / 16 * 1rem);
-}
-
 .mail-container {
     box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
     background-color: #fff;
@@ -53,3 +47,28 @@ h1 {
         font-weight: 700;
     }
 }
+
+.buttons-email-container {
+    display: grid;
+    grid-gap: 1rem;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    margin: 2rem 0;
+    padding: 1em 0;
+
+    &--single {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .sv_prev_btn,
+    .sv_next_btn {
+        margin: 0 !important;
+    }
+
+    .sv_prev_btn {
+        grid-column: 2/3;
+    }
+
+    .sv_next_btn--single {
+        grid-column: 2;
+    }
+}

components/report-window/email-content.tsx

@@ -8,14 +8,20 @@ import { Fragment, useState } from 'react';
 import emailIntro from './email-intro';
 import { reportIntro } from './report-intro';
 
+const SS_URL = 'http://65.108.60.135:3000';
+
 export default function EmailContent({
     answers,
     visited_url,
     clusters,
+    scrRequestPath,
+    downloadFiles,
 }: {
     answers: ParsedAnswers;
     visited_url: string;
     clusters: Record<string, RequestCluster>;
+    scrRequestPath: string;
+    downloadFiles: Function;
 }) {
     console.log('rendering email!', answers);
     const _ = (key: string) => v(key, answers.zaimek);
@@ -88,9 +94,28 @@ export default function EmailContent({
                         )}
                     </article>
                 </div>
-                <div className="buttons-container">
-                    <button className="sv_next_btn" onClick={() => copyTextToClipboard()}>
-                        {copied ? 'Skopiowano!' : 'Kopiuj treść wiadomości'}
+                <div
+                    className={
+                        scrRequestPath
+                            ? 'buttons-email-container'
+                            : 'buttons-email-container buttons-email-container--single'
+                    }
+                >
+                    {scrRequestPath ? (
+                        <button
+                            className="sv_prev_btn"
+                            onClick={() => downloadFiles(`${SS_URL}${scrRequestPath}`)}
+                        >
+                            Pobierz zrzuty ekranów
+                        </button>
+                    ) : null}
+                    <button
+                        className={
+                            scrRequestPath ? 'sv_next_btn' : 'sv_next_btn sv_next_btn--single'
+                        }
+                        onClick={() => copyTextToClipboard()}
+                    >
+                        {copied ? 'Skopiowano!' : 'Kopiuj treść'}
                     </button>
                 </div>
                 {copied ? (

components/report-window/report-window.scss

@@ -274,3 +274,14 @@ h1 {
     font-weight: 600;
     font-size: calc(14 / 16 * 1rem);
 }
+
+.generator-container {
+    max-width: 100ex;
+    margin: 0 auto;
+    font-size: calc(14 / 16 * 1rem);
+    margin-top: 3rem;
+
+    a {
+        color: $ultra-black-color;
+    }
+}

components/report-window/report-window.tsx

@@ -9,6 +9,14 @@ import EmailContent from './email-content';
 import { parseAnswers, ParsedAnswers } from './parse-answers';
 import ScreenshotGenerator from './screenshot-generator';
 
+function downloadFiles(link: string) {
+    let a = document.createElement('a');
+    a.setAttribute('href', link);
+    a.setAttribute('download', '');
+    a.setAttribute('target', '_blank');
+    a.click();
+}
+
 function Report() {
     try {
         const url = new URL(document.location.toString());
@@ -18,6 +26,8 @@ function Report() {
             url.searchParams.get('answers') ? JSON.parse(url.searchParams.get('answers')) : null
         );
         const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey');
+        const [scrRequestPath, setScrRequestPath] = React.useState('');
+
         const clusters = getMemory().getClustersForOrigin(origin);
 
         React.useEffect(() => {
@@ -48,13 +58,30 @@ function Report() {
                 )}
                 {mode === 'screenshots' ? (
                     <ScreenshotGenerator
-                        {...{ visited_url, clusters, setReportWindowMode: setMode }}
+                        {...{
+                            visited_url,
+                            clusters,
+                            setReportWindowMode: setMode,
+                            setRequestPath: setScrRequestPath,
+                            downloadFiles: downloadFiles,
+                        }}
+                    />
+                ) : (
+                    ''
+                )}
+                {mode === 'preview' ? (
+                    <EmailContent
+                        {...{
+                            answers,
+                            visited_url,
+                            clusters,
+                            scrRequestPath,
+                            downloadFiles: downloadFiles,
+                        }}
                     />
                 ) : (
                     ''
                 )}
-                {mode === 'preview' ? <EmailContent {...{ answers, visited_url, clusters }} /> : ''}
-                {/* <HARConverter {...{ entries }} /> */}
             </div>
         );
         return (

components/report-window/screenshot-generator.scss

@@ -23,16 +23,6 @@ h2 {
     position: relative;
 }
 
-.generator-container {
-    max-width: 100ex;
-    margin: 0 auto;
-    font-size: calc(14 / 16 * 1rem);
-
-    a {
-        color: $ultra-black-color;
-    }
-}
-
 .buttons-container {
     display: flex;
     justify-content: center;

components/report-window/screenshot-generator.tsx

@@ -13,16 +13,25 @@ enum taskState {
 type Screenshot = {
     url: string;
     domain: string;
+    filename: string;
     found_headers: string[];
 };
 
 interface screenshotTask {
-    url: string;
     domains: string[];
+    elapsed_time_s: number;
+    finished_time: number;
     id: string;
-    status: taskState;
-    output: string;
     images: Screenshot[];
+    jobs_ahead: number;
+    output: string;
+    processing_took: number;
+    request_time: number;
+    started_time: number;
+    status: taskState;
+    url: string;
+    waiting_took: number;
+    zip_url: string;
 }
 
 function createTaskEndpoint(visited_url: string, domains: string[]) {
@@ -44,14 +53,19 @@ export default function ScreenshotGenerator({
     visited_url,
     clusters,
     setReportWindowMode,
+    setRequestPath,
+    downloadFiles,
 }: {
     visited_url: string;
     clusters: Record<string, RequestCluster>;
     setReportWindowMode: Function;
+    setRequestPath: Function;
+    downloadFiles: Function;
 }) {
     const [mode, setMode] = React.useState<string>('idle');
     const [images, setImages] = React.useState<Screenshot[]>([]);
     const [taskId, setTaskId] = React.useState<string>(null);
+    const [output, setOutput] = React.useState<any>({});
 
     async function subscribeTask(path: string): Promise<screenshotTask> {
         let response = { status: taskState.WAITING };
@@ -71,19 +85,6 @@ export default function ScreenshotGenerator({
         return response as screenshotTask;
     }
 
-    function downloadFiles() {
-        const urls = images.map((el) => `${SS_URL}${el}`);
-
-        for (const url of urls) {
-            let a = document.createElement('a');
-            a.setAttribute('href', url);
-            a.setAttribute('download', '');
-            a.setAttribute('target', '_blank');
-            a.click();
-        }
-        setReportWindowMode('preview');
-    }
-
     return (
         <div className="generator-container">
             {mode === 'idle' ? (
@@ -108,6 +109,7 @@ export default function ScreenshotGenerator({
                             className="sv_prev_btn"
                             onClick={() => {
                                 setReportWindowMode('preview');
+                                setRequestPath(null);
                             }}
                         >
                             Pomiń
@@ -123,6 +125,9 @@ export default function ScreenshotGenerator({
                                 setImages(response.images);
                                 console.log('response.images', response.images);
                                 console.log('output', response);
+
+                                setOutput(response);
+                                setRequestPath(response.zip_url);
                             }}
                         >
                             Wygeneruj
@@ -186,7 +191,13 @@ export default function ScreenshotGenerator({
                     <div className="buttons-container">
                         {mode === 'finished' ? (
                             <Fragment>
-                                <button className="sv_next_btn" onClick={() => downloadFiles()}>
+                                <button
+                                    className="sv_next_btn"
+                                    onClick={() => {
+                                        downloadFiles(`${SS_URL}${output.zip_url}`);
+                                        setReportWindowMode('preview');
+                                    }}
+                                >
                                     Pobierz zrzuty ekranów i przejdź dalej
                                 </button>
                             </Fragment>