[FE] Improve /certificate search's delete button

.env.example

@@ -4,3 +4,4 @@ MY_SQL_DB=educa7ls
 MY_SQL_PORT=3306
 MY_SQL_HOST=localhost
 APP_PORT=3000
+SUNAT_API_KEY=apis-token-1.aTSI1U7KEuT-6bbbCguH-4Y8TI6KS73N

src/controller/person/person.service.ts

@@ -1,9 +1,9 @@
-import { Injectable, InternalServerErrorException, NotFoundException } from "@nestjs/common";
+import { Injectable, NotFoundException } from "@nestjs/common";
 import { PersonDto } from "./person.dto";
 import { DataSource, Repository } from "typeorm";
 import { Persona } from "../../model/Persona/persona.entity";
 import { Person } from "../../types/Person";
-import axios from "axios";
+import axios, {AxiosError} from "axios";
 import { waitForSunatApi } from "./SunatQueue";
 
 interface SunatPerson {
@@ -61,8 +61,7 @@ export class PersonService {
             };
         }
 
-        // TODO: Move to env variables
-        const token = "apis-token-1.aTSI1U7KEuT-6bbbCguH-4Y8TI6KS73N";
+        const token = process.env.SUNAT_API_KEY;
 
         // Search person in SUNAT API
         let personSunat: SunatPerson | null = null;
@@ -79,7 +78,11 @@ export class PersonService {
                 },
             });
             personSunat = personSunatR.data;
-        } catch (e) { /* empty */
+        } catch (e) {
+            const axiosError = e as AxiosError;
+            if (axiosError.response && axiosError.status === 429) {
+                console.error(`Axios Sunat API rate limit (${dni})`);
+            }
         }
 
 

src/views/components/Search.tsx

@@ -122,24 +122,7 @@ function InputBox(props: {
 }) {
     const [successAnimation, setSuccessAnimation] = createSignal(false);
 
-    const copyToClipboard: HTMLButtonEvent = (ev) => {
-        ev.preventDefault();
-
-        if (props.dni.length === 8) {
-            navigator.clipboard.writeText(props.dni);
-            setSuccessAnimation(true);
-            setTimeout(() => setSuccessAnimation(false), 1000);
-        }
-    };
-
-    const clearDni: HTMLButtonEvent = (ev) => {
-        ev.preventDefault();
-
-        props.setDni("");
-    };
-
-    return (
-        <div class="grid gap-2 grid-cols-[10rem_3rem_3rem]">
+    const inputElement = (
         <input
             id="search-dni"
             class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1
@@ -156,6 +139,28 @@ function InputBox(props: {
             onChange={(e) => props.setDni(e.target.value)}
             disabled={props.loading}
         />
+    );
+
+    const copyToClipboard: HTMLButtonEvent = (ev) => {
+        ev.preventDefault();
+
+        if (props.dni.length === 8) {
+            navigator.clipboard.writeText(props.dni);
+            setSuccessAnimation(true);
+            setTimeout(() => setSuccessAnimation(false), 1000);
+        }
+    };
+
+    const clearDni: HTMLButtonEvent = (ev) => {
+        ev.preventDefault();
+
+        props.setDni("");
+        (inputElement as HTMLInputElement).focus();
+    };
+
+    return (
+        <div class="grid gap-2 grid-cols-[10rem_3rem_3rem]">
+            {inputElement}
             <button
                 class={`${successAnimation() ? "bg-c-success" : "bg-c-primary"} rounded transition-colors`}
                 onclick={copyToClipboard}