[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 = process.env.SUNAT_API_KEY;
-        const token = "apis-token-1.aTSI1U7KEuT-6bbbCguH-4Y8TI6KS73N";
 
         // 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,6 +122,25 @@ function InputBox(props: {
 }) {
     const [successAnimation, setSuccessAnimation] = createSignal(false);
 
+    const inputElement = (
+        <input
+            id="search-dni"
+            class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1
+                invalid:border-c-error invalid:text-c-error
+                focus:border-c-primary outline-none font-mono
+                disabled:opacity-50 disabled:cursor-not-allowed"
+            type="text"
+            minLength={8}
+            maxLength={8}
+            pattern="[0-9]{8}"
+            placeholder="Número de DNI"
+            value={props.dni}
+            required={true}
+            onChange={(e) => props.setDni(e.target.value)}
+            disabled={props.loading}
+        />
+    );
+
     const copyToClipboard: HTMLButtonEvent = (ev) => {
         ev.preventDefault();
 
@@ -136,26 +155,12 @@ function InputBox(props: {
         ev.preventDefault();
 
         props.setDni("");
+        (inputElement as HTMLInputElement).focus();
     };
 
     return (
         <div class="grid gap-2 grid-cols-[10rem_3rem_3rem]">
-            <input
+            {inputElement}
-                id="search-dni"
-                class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1
-                invalid:border-c-error invalid:text-c-error
-                focus:border-c-primary outline-none font-mono
-                disabled:opacity-50 disabled:cursor-not-allowed"
-                type="text"
-                minLength={8}
-                maxLength={8}
-                pattern="[0-9]{8}"
-                placeholder="Número de DNI"
-                value={props.dni}
-                required={true}
-                onChange={(e) => props.setDni(e.target.value)}
-                disabled={props.loading}
-            />
             <button
                 class={`${successAnimation() ? "bg-c-success" : "bg-c-primary"} rounded transition-colors`}
                 onclick={copyToClipboard}