[FE][Certs] Get registers from BE

frontend/src/certs/Registers/index.tsx

@@ -1,30 +1,63 @@
+import { For, createEffect, createSignal } from "solid-js";
 import { DownloadIcon } from "../../icons/DownloadIcon";
+import { Person } from "../../types/Person";
 import { Register } from "../../types/Register";
 
-export function Registers() {
+export function Registers(props: {person: Person | null}) {
+    const [registers, setRegisters] = createSignal<Array<Register>>([]);
+
+    createEffect(async() => {
+        if (props.person === null) {
+            setRegisters([]);
+            return;
+        }
+
+        const person = props.person;
+
+        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);
+        }
+    });
+
     return (
         <div class="m-4 p-4 rounded-md">
             <h3 class="text-xl font-medium py-2">
-                SUMA BERNAL, MAIKOL
+                {props.person?.person_names}&nbsp;
+                {props.person?.person_paternal_surname}&nbsp;
+                {props.person?.person_maternal_surname}
             </h3>
             <div class="flex flex-wrap justify-start gap-2">
-                <RegisterEl />
-                <RegisterEl />
-                <RegisterEl />
+                <For each={registers()}>
+                    {(register) => <RegisterEl register={register} />}
+                </For>
             </div>
         </div>
     );
 }
 
 function RegisterEl(props: {register: Register}) {
+
+    const displayDate = () => {
+        const [, year, month, day] = /(\d{4})-(\d{2})-(\d{2})/.exec(props.register.register_display_date) ?? [];
+        return `${day}/${month}/${year}`;
+    };
+
     return (
         <div class="inline-block w-[12rem] p-1 border border-c-outline rounded-md">
             <button class="rounded-full bg-c-primary-container hover:bg-c-primary transition-colors h-12 w-12">
                 <DownloadIcon fill="var(--c-on-primary-container)" />
             </button>
             <div class="inline-block h-12 w-32 pl-2 align-middle">
-                <p class="font-bold">Matpel 2</p>
-                <p class="font-mono text-sm">12/08/2023 - 6486</p>
+                <p class="font-bold">
+                    course_id: {props.register.register_course_id}
+                </p>
+                <p class="font-mono text-sm">
+                    {displayDate()}
+                    &nbsp;-&nbsp;
+                    {props.register.register_code}
+                </p>
             </div>
         </div>
     );

frontend/src/certs/Search.tsx

@@ -34,6 +34,7 @@ export function Search(props: {setPerson: (p: Person | null) => void}) {
         } else {
             setQrBase64(null);
             setPerson(null);
+            props.setPerson(null);
         }
     });
 

frontend/src/certs/index.tsx

@@ -1,13 +1,17 @@
+import { createSignal } from "solid-js";
 import { NewRegister } from "./NewRegister";
 import { Registers } from "./Registers";
 import { Search } from "./Search";
+import { Person } from "../types/Person";
 
 export function Certs() {
+    const [person, setPerson] = createSignal<Person | null>(null);
+
     return (
         <div class="grid grid-cols-[16rem_25rem_1fr]">
-            <Search setPerson={() => {}} />
+            <Search setPerson={setPerson} />
             <NewRegister personId={0} onSuccess={() => {}} />
-            <Registers />
+            <Registers person={person()} />
         </div>
     );
 }