[FE][Certs] Replace global course list with context

frontend/src/certs/NewRegister/ManualRegistration.tsx

@@ -1,9 +1,9 @@
 import { JSX, Show, createSignal } from "solid-js";
 import { SearchableSelect } from "./SearchableSelect";
 import { CustomLabelSelect } from "./CustomLabelSelect";
-import { courseMap } from "../../utils/allCourses";
 import { RegistrationPreview } from ".";
 import { customLabelsMap } from "../../utils/allCustomLabels";
+import { useCourses } from "..";
 
 type HTMLEventFn = JSX.EventHandlerUnion<HTMLFormElement, Event & {
     submitter: HTMLElement;
@@ -21,15 +21,21 @@ export function ManualRegistration(props: {
     const [customLabel, setCustomLabel] = createSignal("");
     const [isPreview, setIsPreview] = createSignal(false);
 
+    const courses = useCourses();
+
     let datePicker: HTMLInputElement | undefined;
 
     const courseHasCustomLabel = () => {
+        if (courses === undefined) {
+            return false;
+        }
+
         const courseId = selectedCourseId();
         if (courseId === null) {
             return false;
         }
 
-        const course = courseMap()[courseId];
+        const course = courses.idMap()[courseId];
         return course?.course_has_custom_label === true;
     };
 

frontend/src/certs/NewRegister/RegisterPresets.tsx

@@ -21,7 +21,7 @@ export function RegisterPresets(props: {
             return {};
         }
 
-        const coursesMap = courses.map();
+        const coursesMap = courses.nameMap();
 
         const matpel1 = coursesMap["Matpel 1"];
         const matpel2 = coursesMap["Matpel 2"];

frontend/src/certs/Registers/RegisterElement.tsx

@@ -2,7 +2,6 @@ import { Show, createMemo } from "solid-js";
 import { certGenerator } from "../../certGenerator";
 import { Person } from "../../types/Person";
 import { Register } from "../../types/Register";
-import { courseMap } from "../../utils/allCourses";
 import { customLabelsMap } from "../../utils/allCustomLabels";
 import { DownloadSimpleIcon } from "../../icons/DownloadSimpleIcon";
 import { CaretRight } from "../../icons/CaretRight";
@@ -13,6 +12,8 @@ import QR from "qrcode";
 import saveAs from "file-saver";
 import { genMatpelCarnet } from "../../carnetGenerator/matpel";
 import { genMachineryCarnet } from "../../carnetGenerator/machinery";
+import { useCourses } from "..";
+import { Course } from "../../types/Course";
 
 const carnetEnabled = [
     "Matpel 3",
@@ -25,6 +26,7 @@ const carnetEnabled = [
 ];
 
 export function RegisterElement(props: {register: Register, person: Person, onClick: () => void}) {
+    const courses = useCourses();
 
     const dateComponents = () => {
         const [, year, month, day] = /(\d{4})-(\d{2})-(\d{2})/.exec(props.register.register_display_date) ?? [];
@@ -37,7 +39,7 @@ export function RegisterElement(props: {register: Register, person: Person, onCl
     };
 
     const courseName = () => {
-        const course = courseMap()[props.register.register_course_id];
+        const course = courses?.idMap()[props.register.register_course_id];
         return course?.course_name ?? "Curso no encontrado";
     };
 
@@ -48,10 +50,15 @@ export function RegisterElement(props: {register: Register, person: Person, onCl
     };
 
     const genCert = () => {
+        if (courses === undefined) {
+            alert("Error. La lista de cursos no esta cargada.");
+            return;
+        }
+
         const person = props.person;
         const register = props.register;
 
-        generateCert(person, register);
+        generateCert(person, register, courses.idMap());
     };
 
     const generateable = () => {
@@ -157,8 +164,8 @@ export function RegisterElement(props: {register: Register, person: Person, onCl
     );
 }
 
-export function generateCert(person: Person, register: Register) {
+export function generateCert(person: Person, register: Register, coursesMap: {[course_id: number]: Course}) {
-    const courseN = courseMap()[register.register_course_id]?.course_name ?? "Curso no encontrado";
+    const courseN = coursesMap[register.register_course_id]?.course_name ?? "Curso no encontrado";
 
     const generator = certGenerator[courseN];
     if (generator === undefined) {

frontend/src/certs/Registers/RegisterSidebar.tsx

@@ -1,5 +1,6 @@
+import { createMemo } from "solid-js";
+import { useCourses } from "..";
 import { Register } from "../../types/Register";
-import { courseMap } from "../../utils/allCourses";
 import { formatDate } from "../../utils/functions";
 
 export function RegisterSidebar(props: {
@@ -7,6 +8,8 @@ export function RegisterSidebar(props: {
     close: () => void,
     onDelete: () => void,
 }) {
+    const courses = useCourses();
+
     const deleteRegister = async() => {
 
         const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/register/${props.register.register_id}`,{
@@ -19,7 +22,7 @@ export function RegisterSidebar(props: {
         }
     };
 
-    const courseName = () => courseMap()[props.register.register_course_id]?.course_name ?? "<curso no encontrado>";
+    const courseName = createMemo(() => courses?.idMap()[props.register.register_course_id]?.course_name ?? "<curso no encontrado>");
 
     return (
         <div class="absolute top-0 bg-c-surface-variant right-0

frontend/src/certs/Registers/index.tsx

@@ -7,6 +7,7 @@ import { backend, wait } from "../../utils/functions";
 import { JsonResult } from "../../types/JsonResult";
 import { LoadingIcon } from "../../icons/LoadingIcon";
 import { RegisterElement, generateCert } from "./RegisterElement";
+import { useCourses } from "..";
 
 export function Registers(props: {person: Person | null, count: number}) {
     const [registers, setRegisters] = createSignal<Array<Register>>([]);
@@ -14,6 +15,7 @@ export function Registers(props: {person: Person | null, count: number}) {
     const [sidebarRegister, setSidebarRegister] = createSignal<Register | null>(null);
     const [loading, setLoading] = createSignal(false);
     const [error, setError] = createSignal("");
+    const courses = useCourses();
 
     const loadRegisters = async() => {
         setLoading(true);
@@ -101,10 +103,10 @@ export function Registers(props: {person: Person | null, count: number}) {
 
     const [downButtonBg, setDownButtonBg] = createSignal("bg-c-primary text-c-on-primary");
     const downloadTodayCerts = () => {
-        if (props.person === null) return;
+        if (props.person === null || courses === undefined) return;
 
         todayRegisters().forEach((register) => {
-            generateCert(props.person!, register);
+            generateCert(props.person!, register, courses.idMap());
         });
 
         setDownButtonBg("bg-c-success text-c-on-success");

frontend/src/certs/index.tsx

@@ -53,7 +53,8 @@ export function Certs() {
 
 const CoursesContext = createContext<{
     data: Resource<Course[]>,
-    map: () => {[course_name: string]: Course},
+    nameMap: () => {[course_name: string]: Course},
+    idMap: () => {[course_name: string]: Course},
 }>();
 
 function CoursesProvider(props: {courses: Resource<Course[]>, children: JSX.Element}) {
@@ -64,7 +65,7 @@ function CoursesProvider(props: {courses: Resource<Course[]>, children: JSX.Elem
 
         const data = props.courses();
 
-        type CourseMap = {[k: string]: Course};
+        type CourseMap = {[course_name: string]: Course};
         const map: CourseMap = {};
         for (const course of data) {
             map[course.course_name] = course;
@@ -73,9 +74,26 @@ function CoursesProvider(props: {courses: Resource<Course[]>, children: JSX.Elem
         return map;
     });
 
+    const courseIdMapMemo = createMemo(() => {
+        if (props.courses === undefined || props.courses?.state !== "ready") {
+            return {};
+        }
+
+        const data = props.courses();
+
+        type CourseMap = {[course_id: number]: Course};
+        const map: CourseMap = {};
+        for (const course of data) {
+            map[course.course_id] = course;
+        }
+
+        return map;
+    });
+
     const coursesData = {
         data: props.courses,
-        map: courseMapMemo,
+        nameMap: courseMapMemo,
+        idMap: courseIdMapMemo,
     };
 
     return (

frontend/src/utils/allCourses.ts

@@ -1,33 +0,0 @@
-import { Accessor, createMemo, createSignal } from "solid-js";
-import { Course } from "../types/Course";
-
-type CourseMap = {[k: number]: Course};
-
-const [allCourses, setAllCourses] = createSignal<Array<Course>>([]);
-export const [courseMap, setCourseMap] = createSignal<CourseMap>({});
-
-(() => {
-    // Get all courses from the API
-    fetch(`${import.meta.env.VITE_BACKEND_URL}/api/course`)
-        .then((res) => res.json())
-        .then((data: Array<Course>) => {
-            setAllCourses(data);
-
-            const map: CourseMap = {};
-            for (const course of data) {
-                map[course.course_id] = course;
-            }
-            setCourseMap(map);
-        });
-})();
-
-export function getCourseMemo(name: string): Accessor<Course | null> {
-    return createMemo(() => {
-        const course = allCourses().find((course) => course.course_name === name);
-        if (course) {
-            return course;
-        }
-        return null;
-    });
-}
-