[FE][Certs] Fixes #15: Handle error of loading courses list

master
Araozu 2023-12-15 15:26:50 -05:00
parent 16efa06639
commit fc411f4ec2
1 changed files with 25 additions and 10 deletions

View File

@ -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>
</>
);
}