From 1b7c9591cad85427b49a2772a7698792715e950e Mon Sep 17 00:00:00 2001
From: Araozu <fernando@eegsac.com>
Date: Tue, 21 Nov 2023 14:35:23 -0500
Subject: [PATCH] [FE][Scans] Show message when conversion is successful

---
 frontend/src/Scans/ScansList.tsx | 14 +++++++++---
 frontend/src/Scans/index.tsx     | 38 ++++++++++++++++++++++++--------
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Scans/ScansList.tsx b/frontend/src/Scans/ScansList.tsx
index 6901c18..72f60fe 100644
--- a/frontend/src/Scans/ScansList.tsx
+++ b/frontend/src/Scans/ScansList.tsx
@@ -7,7 +7,7 @@ import { PDFIcon } from "../icons/PDFIcon";
 import { LoadingStatus, useLoading } from "../utils/functions";
 import { QuestionIcon } from "../icons/QuestionIcon";
 
-export function ScansList(props: {scanData: Array<ScanResult> | null}) {
+export function ScansList(props: {scanData: Array<ScanResult> | null, onSuccess: () => void}) {
     const {status, setStatus, error, setError} = useLoading();
 
     const loading = createMemo(() => status() === LoadingStatus.Loading);
@@ -56,9 +56,9 @@ export function ScansList(props: {scanData: Array<ScanResult> | null}) {
             },
         )
             .then((res) => res.json())
-            .then((res) => {
+            .then(() => {
                 setStatus(LoadingStatus.Ok);
-                console.log(res);
+                props.onSuccess();
             })
             .catch((err) => {
                 setStatus(LoadingStatus.Error);
@@ -155,6 +155,14 @@ export function ScansList(props: {scanData: Array<ScanResult> | null}) {
                             </span>
                         </FilledButton>
                     </div>
+
+                    <Show when={status() === LoadingStatus.Error}>
+                        <div class="px-4 pb-4">
+                            <p class="font-medium">
+                                Error convirtiendo PDFs: {error()}
+                            </p>
+                        </div>
+                    </Show>
                 </FilledCard>
             </Show>
         </>
diff --git a/frontend/src/Scans/index.tsx b/frontend/src/Scans/index.tsx
index f0e5e71..3e6374d 100644
--- a/frontend/src/Scans/index.tsx
+++ b/frontend/src/Scans/index.tsx
@@ -1,4 +1,4 @@
-import { createMemo, createSignal } from "solid-js";
+import { Show, createMemo, createSignal } from "solid-js";
 import { FilledButton } from "../components/FilledButton";
 import { FilledCard } from "../components/FilledCard";
 import { LoadingIcon } from "../icons/LoadingIcon";
@@ -15,22 +15,24 @@ export interface ScanData {
 }
 
 export type ScanResult =
-| {Full: [string, number, string]}
-| {Partial: [string, string]}
-| {Empty: string}
-| {Error: string};
+    | { Full: [string, number, string] }
+    | { Partial: [string, string] }
+    | { Empty: string }
+    | { Error: string };
 
 
 
 export function Scans() {
-    const {status, setStatus, error, setError} = useLoading();
+    const { status, setStatus, error, setError } = useLoading();
     const [scanData, setScanData] = createSignal<Array<ScanResult> | null>(null);
+    const [converted, setConverted] = createSignal(false);
 
     const loading = createMemo(() => status() === LoadingStatus.Loading);
 
     const detectScans = () => {
         setStatus(LoadingStatus.Loading);
         setScanData(null);
+        setConverted(false);
 
         fetch(`${import.meta.env.VITE_BACKEND_URL}/api/scans/detect`)
             .then((res) => res.json())
@@ -146,7 +148,7 @@ export function Scans() {
                             >
                                 <span
                                     class="absolute top-[1.35rem] left-2"
-                                    style={{display: loading() ? "none" : "inline-block"}}
+                                    style={{ display: loading() ? "none" : "inline-block" }}
                                 >
                                     <MagnifyingGlassIcon
                                         fill="var(--c-on-primary)"
@@ -154,7 +156,7 @@ export function Scans() {
                                 </span>
                                 <span
                                     class="absolute top-[1.35rem] left-2"
-                                    style={{display: loading() ? "inline-block" : "none"}}
+                                    style={{ display: loading() ? "inline-block" : "none" }}
                                 >
                                     <LoadingIcon
                                         class="animate-spin"
@@ -167,10 +169,28 @@ export function Scans() {
                                 </span>
                             </FilledButton>
                         </div>
+
+                        <Show when={status() === LoadingStatus.Error}>
+                            <p>
+                                Error detectando escaneos: {error()}
+                            </p>
+                        </Show>
                     </div>
                 </FilledCard>
 
-                <ScansList scanData={scanData()} />
+                <ScansList scanData={scanData()} onSuccess={() => {
+                    setConverted(true);
+                    setScanData(null);
+                }}
+                />
+
+                <Show when={converted()}>
+                    <FilledCard>
+                        <h1 class="py-2 px-4 font-medium text-xl mb-2">
+                            Archivos convertidos con éxito
+                        </h1>
+                    </FilledCard>
+                </Show>
             </div>
         </div>
     );