From 367bf1e62aeb85c7fec4375aae83691f7e72f36e Mon Sep 17 00:00:00 2001
From: Araozu <faraoz@unsa.edu.pe>
Date: Mon, 2 Oct 2023 21:19:46 -0500
Subject: [PATCH] [FE] Refactor register list: spinner & error msg

---
 backend/src/controller/register/mod.rs      |  8 ++--
 frontend/src/certs/Registers/index.tsx      | 42 ++++++++++++++++++---
 frontend/src/certs/Search/PersonDisplay.tsx |  8 ++--
 frontend/src/certs/Search/index.tsx         |  4 +-
 4 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/backend/src/controller/register/mod.rs b/backend/src/controller/register/mod.rs
index c73b753..acbb013 100644
--- a/backend/src/controller/register/mod.rs
+++ b/backend/src/controller/register/mod.rs
@@ -1,6 +1,6 @@
 use rocket::{http::Status, serde::json::Json};
 
-use crate::model::register::{Register, RegisterCreate};
+use crate::{model::register::{Register, RegisterCreate}, json_result::JsonResult};
 
 #[options("/register/batch")]
 pub fn options() -> Status {
@@ -27,15 +27,15 @@ pub async fn insert_all(data: Json<Vec<RegisterCreate>>) -> Status {
 }
 
 #[get("/register/<dni>")]
-pub async fn get_by_dni(dni: i32) -> (Status, Json<Vec<Register>>) {
+pub async fn get_by_dni(dni: i32) -> (Status, Json<JsonResult<Vec<Register>>>) {
     let registers = Register::get_by_dni(dni).await;
 
     match registers {
-        Ok(data) => (Status::Ok, Json(data)),
+        Ok(data) => (Status::Ok, JsonResult::ok(data)),
         Err(err) => {
             eprintln!("{:?}", err);
 
-            (Status::InternalServerError, Json(vec![]))
+            (Status::InternalServerError, JsonResult::err(format!("Error recuperando certs de DB")))
         }
     }
 }
diff --git a/frontend/src/certs/Registers/index.tsx b/frontend/src/certs/Registers/index.tsx
index 96b8bf1..0866c64 100644
--- a/frontend/src/certs/Registers/index.tsx
+++ b/frontend/src/certs/Registers/index.tsx
@@ -7,20 +7,40 @@ import { CaretRight } from "../../icons/CaretRight";
 import { RegisterSidebar } from "./RegisterSidebar";
 import { customLabelsMap } from "../../utils/allCustomLabels";
 import { DownloadSimpleIcon } from "../../icons/DownloadSimpleIcon";
+import { backend, wait } from "../../utils/functions";
+import { JsonResult } from "../../types/JsonResult";
+import { LoadingIcon } from "../../icons/LoadingIcon";
 
 export function Registers(props: {person: Person | null, count: number}) {
     const [registers, setRegisters] = createSignal<Array<Register>>([]);
     const [showHidden, setShowHidden] = createSignal(false);
     const [sidebarRegister, setSidebarRegister] = createSignal<Register | null>(null);
+    const [loading, setLoading] = createSignal(false);
+    const [error, setError] = createSignal("");
 
     const loadRegisters = async() => {
-        const person = props.person!;
+        setLoading(true);
+        setError("");
 
-        const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/${person.person_dni}`);
-        if (res.ok) {
-            const data = await res.json();
-            setRegisters(data);
-        }
+        const person = props.person!;
+        setRegisters([]);
+
+        if (import.meta.env.DEV) await wait(1500);
+
+        backend.get<JsonResult<Array<Register>>>(`/api/register/${person.person_dni}`)
+            .then((response) => {
+                if (response.status === 200) {
+                    setRegisters(response.data.Ok);
+                } else {
+                    console.error(response.data.Err);
+                    setError(response.data.Err.reason);
+                }
+            })
+            .catch((err) => {
+                console.error(err);
+                setError(`Error fatal: ${err.message}`);
+            })
+            .finally(() => setLoading(false));
     };
 
     createEffect(async() => {
@@ -133,6 +153,16 @@ export function Registers(props: {person: Person | null, count: number}) {
                 )}
             </For>
 
+            <Show when={loading()}>
+                <div class="text-center">
+                    <LoadingIcon class="animate-spin" fill="var(--c-on-surface)" />
+                </div>
+            </Show>
+
+            <Show when={error() !== ""}>
+                <p>Error: {error()}</p>
+            </Show>
+
             <Show when={sidebarRegister() !== null}>
                 <RegisterSidebar
                     register={sidebarRegister()!}
diff --git a/frontend/src/certs/Search/PersonDisplay.tsx b/frontend/src/certs/Search/PersonDisplay.tsx
index ab49f46..aa17f0f 100644
--- a/frontend/src/certs/Search/PersonDisplay.tsx
+++ b/frontend/src/certs/Search/PersonDisplay.tsx
@@ -35,25 +35,25 @@ export function PersonDisplay(props: {person: Person}) {
 
             <div class={"relative max-w-[14rem] mx-auto my-6"}>
                 <CopyButton copyText={namesAndSurnames()}>
-                    <CopyIcon fill="var(--c-on-primary)" />
+                    <CopyIcon fill="var(--c-on-primary-container)" />
                                 &nbsp;
                                 Nombres y <b>Apellidos</b>
                 </CopyButton>
 
                 <CopyButton copyText={surnamesAndNames()}>
-                    <CopyIcon fill="var(--c-on-primary)" />
+                    <CopyIcon fill="var(--c-on-primary-container)" />
                                 &nbsp;
                     <b>Apellidos</b> y Nombres
                 </CopyButton>
 
                 <div class="grid grid-cols-2 gap-2">
                     <CopyButton copyText={surnames()}>
-                        <CopyIcon fill="var(--c-on-primary)" />
+                        <CopyIcon fill="var(--c-on-primary-container)" />
                                     &nbsp;
                         <b>Apellidos</b>
                     </CopyButton>
                     <CopyButton copyText={personNames()}>
-                        <CopyIcon fill="var(--c-on-primary)" />
+                        <CopyIcon fill="var(--c-on-primary-container)" />
                                     &nbsp;
                                     Nombres
                     </CopyButton>
diff --git a/frontend/src/certs/Search/index.tsx b/frontend/src/certs/Search/index.tsx
index c187df4..abe4314 100644
--- a/frontend/src/certs/Search/index.tsx
+++ b/frontend/src/certs/Search/index.tsx
@@ -51,7 +51,7 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
         setLoading(true);
         setError("");
 
-        await wait(1500);
+        if (import.meta.env.DEV) await wait(1500);
 
         backend.get<JsonResult<Person>>(`/api/person/${dni()}`)
             .then((response) => {
@@ -71,7 +71,7 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
                 }
             })
             .catch((err) => {
-                setError(`Error inesperado: ${err.message}`);
+                setError(`Error fatal: ${err.message}`);
                 console.error(err);
             })
             .finally(() => {