[FE][Certs] Replace global custom labels with context

frontend/src/certs/CertsImpl.tsx

@@ -4,15 +4,17 @@ import { Registers } from "./Registers";
 import { Search } from "./Search";
 import { Person } from "../types/Person";
 import { useCourses } from "./CourseContext";
+import { useCustomLabel } from "./CustomLabelContext";
 
 export function CertsImpl() {
     const [person, setPerson] = createSignal<Person | null>(null);
     const [count, setCount] = createSignal(0);
     const courses = useCourses()!;
+    const customLabels = useCustomLabel();
 
     return (
         <>
-            <div class={`top-0 left-0 w-screen h-1 ${courses.loading() ? "fixed" : "hidden"}`}>
+            <div class={`top-0 left-0 w-screen h-1 ${courses.loading() || customLabels?.loading() ? "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>

frontend/src/certs/CustomLabelContext.tsx

@@ -5,14 +5,24 @@ import axios from "axios";
 export type CustomLabelsMap = {[custom_label_id: number]: CustomLabel};
 
 const CustomLabelContext = createContext<{
-    labels: () => CustomLabelsMap
+    labels: () => CustomLabelsMap,
+    fetchLabels: () => void,
+    loading: () => boolean
 }>();
 
+let cachedLabels: CustomLabelsMap | null = null;
+
 export function CustomLabelProvider(props: {children: JSX.Element}) {
-    const [labels] = createResource(fetchAllLabels);
+    const [labels, {refetch}] = createResource(fetchAllLabels);
 
     const customLabelData = {
         labels: createMemo(() => labels() ?? {}),
+        fetchLabels: () => {
+            // Remove cached values
+            cachedLabels = null;
+            refetch();
+        },
+        loading: createMemo(() => labels.state === "pending"),
     };
 
     return (
@@ -22,8 +32,6 @@ export function CustomLabelProvider(props: {children: JSX.Element}) {
     );
 }
 
-let cachedLabels: CustomLabelsMap | null = null;
-
 async function fetchAllLabels(useCache = true): Promise<CustomLabelsMap> {
     if (useCache && cachedLabels !== null) {
         return cachedLabels;

frontend/src/certs/NewRegister/RegisterPreview.tsx

@@ -3,10 +3,10 @@ import { For, Show, createSignal } from "solid-js";
 import { XIcon } from "../../icons/XIcon";
 import { RegisterBatchCreate } from "../../types/Register";
 import { RegistrationPreview } from ".";
-import { loadCustomLabels } from "../../utils/allCustomLabels";
 import { FileDashedIcon } from "../../icons/FileDashedIcon";
 import { LoadingIcon } from "../../icons/LoadingIcon";
 import { useCourses } from "../CourseContext";
+import { useCustomLabel } from "../CustomLabelContext";
 
 
 function isoDateToLocalDate(date: string): string {
@@ -18,8 +18,13 @@ function isoDateToLocalDate(date: string): string {
 export function RegisterPreview(props: {selections: Array<RegistrationPreview>, personId: number | null, onDelete: (v: number) => void, onRegister: () => void}) {
     const [error, setError] = createSignal("");
     const [loading, setLoading] = createSignal(false);
+    const customLabels = useCustomLabel();
 
     const submit = async() => {
+        if (customLabels === undefined || customLabels?.loading()) {
+            return;
+        }
+
         setLoading(true);
         setError("");
 
@@ -35,9 +40,8 @@ export function RegisterPreview(props: {selections: Array<RegistrationPreview>,
         const result = await createRegisters(registers);
 
         if (result === null) {
-            console.log("Create register: success");
-            // Custom labels may have changed, reload them
-            loadCustomLabels();
+            // TODO: Determine if a reload is necessary by checking if a new custom label was created
+            customLabels.fetchLabels();
             props.onRegister();
         } else {
             console.log(`error. ${result}`);

frontend/src/utils/allCustomLabels.ts

@@ -1,18 +0,0 @@
-import { CustomLabel } from "../types/CustomLabel";
-
-type CustomLabelsMap = {[k: number]: CustomLabel};
-
-
-export function loadCustomLabels() {
-    fetch(`${import.meta.env.VITE_BACKEND_URL}/api/label`)
-        .then((res) => res.json())
-        .then((data: Array<CustomLabel>) => {
-            const map: CustomLabelsMap = {};
-            for (const label of data) {
-                map[label.custom_label_id] = label;
-            }
-        });
-}
-
-loadCustomLabels();
-