From fc411f4ec2b5ebb973272fb5dfbeff30f2272e68 Mon Sep 17 00:00:00 2001
From: Araozu <fernando@eegsac.com>
Date: Fri, 15 Dec 2023 15:26:50 -0500
Subject: [PATCH] [FE][Certs] Fixes #15: Handle error of loading courses list

---
 frontend/src/certs/index.tsx | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/certs/index.tsx b/frontend/src/certs/index.tsx
index dd15690..249c5ff 100644
--- a/frontend/src/certs/index.tsx
+++ b/frontend/src/certs/index.tsx
@@ -1,4 +1,4 @@
-import { JSX, Resource, createContext, createMemo, createResource, createSignal, useContext } from "solid-js";
+import { JSX, Resource, Show, createContext, createMemo, createResource, createSignal, useContext } from "solid-js";
 import { NewRegister } from "./NewRegister";
 import { Registers } from "./Registers";
 import { Search } from "./Search";
@@ -13,24 +13,39 @@ export function Certs() {
     const [courses] = createResource(fetchAllCourses);
 
     const coursesReady = createMemo(() => courses.state === "ready");
+    const coursesLoading = createMemo(() => courses.state === "pending");
 
     return (
         <>
-            <div class={`top-0 left-0 w-screen h-1 ${coursesReady() ? "hidden" : "fixed"}`}>
+            <div class={`top-0 left-0 w-screen h-1 ${coursesLoading() ? "fixed" : "hidden"}`}>
                 <div class='h-1 w-full bg-c-on-primary overflow-hidden'>
                     <div class='progress w-full h-full bg-c-primary left-right' />
                 </div>
             </div>
             <CoursesProvider courses={courses}>
-                <div class={`grid grid-cols-[16rem_25rem_1fr] ${coursesReady() ? "" : "opacity-25"}`}>
-                    <Search setPerson={setPerson} />
-                    <NewRegister
-                        personId={person()?.person_id ?? null}
-                        onSuccess={() => setCount((x) => x + 1)}
-                    />
-                    <Registers person={person()} count={count()} />
-                </div>
+                <Show when={courses.state !== "errored"}>
+                    <div class={`grid grid-cols-[16rem_25rem_1fr] ${coursesReady() ? "" : "opacity-25"}`}>
+                        <Search setPerson={setPerson} />
+                        <NewRegister
+                            personId={person()?.person_id ?? null}
+                            onSuccess={() => setCount((x) => x + 1)}
+                        />
+                        <Registers person={person()} count={count()} />
+                    </div>
+                </Show>
             </CoursesProvider>
+            <Show when={courses.state === "errored"}>
+                <div>
+                    <div class="p-2 m-8 text-c-on-error bg-c-error rounded-md">
+                        Error al cargar recursos vitales del sistema (lista de cursos)
+                        <br />
+                        Recargue la página para intentar de nuevo
+                        <br />
+                        <br />
+                        {courses.error?.message}
+                    </div>
+                </div>
+            </Show>
         </>
     );
 }