[FE][Certs] Replace global custom labels with context
This commit is contained in:
parent
b8296164c5
commit
23e423cad7
@ -4,15 +4,17 @@ import { Registers } from "./Registers";
|
|||||||
import { Search } from "./Search";
|
import { Search } from "./Search";
|
||||||
import { Person } from "../types/Person";
|
import { Person } from "../types/Person";
|
||||||
import { useCourses } from "./CourseContext";
|
import { useCourses } from "./CourseContext";
|
||||||
|
import { useCustomLabel } from "./CustomLabelContext";
|
||||||
|
|
||||||
export function CertsImpl() {
|
export function CertsImpl() {
|
||||||
const [person, setPerson] = createSignal<Person | null>(null);
|
const [person, setPerson] = createSignal<Person | null>(null);
|
||||||
const [count, setCount] = createSignal(0);
|
const [count, setCount] = createSignal(0);
|
||||||
const courses = useCourses()!;
|
const courses = useCourses()!;
|
||||||
|
const customLabels = useCustomLabel();
|
||||||
|
|
||||||
return (
|
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='h-1 w-full bg-c-on-primary overflow-hidden'>
|
||||||
<div class='progress w-full h-full bg-c-primary left-right' />
|
<div class='progress w-full h-full bg-c-primary left-right' />
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,14 +5,24 @@ import axios from "axios";
|
|||||||
export type CustomLabelsMap = {[custom_label_id: number]: CustomLabel};
|
export type CustomLabelsMap = {[custom_label_id: number]: CustomLabel};
|
||||||
|
|
||||||
const CustomLabelContext = createContext<{
|
const CustomLabelContext = createContext<{
|
||||||
labels: () => CustomLabelsMap
|
labels: () => CustomLabelsMap,
|
||||||
|
fetchLabels: () => void,
|
||||||
|
loading: () => boolean
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
let cachedLabels: CustomLabelsMap | null = null;
|
||||||
|
|
||||||
export function CustomLabelProvider(props: {children: JSX.Element}) {
|
export function CustomLabelProvider(props: {children: JSX.Element}) {
|
||||||
const [labels] = createResource(fetchAllLabels);
|
const [labels, {refetch}] = createResource(fetchAllLabels);
|
||||||
|
|
||||||
const customLabelData = {
|
const customLabelData = {
|
||||||
labels: createMemo(() => labels() ?? {}),
|
labels: createMemo(() => labels() ?? {}),
|
||||||
|
fetchLabels: () => {
|
||||||
|
// Remove cached values
|
||||||
|
cachedLabels = null;
|
||||||
|
refetch();
|
||||||
|
},
|
||||||
|
loading: createMemo(() => labels.state === "pending"),
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -22,8 +32,6 @@ export function CustomLabelProvider(props: {children: JSX.Element}) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let cachedLabels: CustomLabelsMap | null = null;
|
|
||||||
|
|
||||||
async function fetchAllLabels(useCache = true): Promise<CustomLabelsMap> {
|
async function fetchAllLabels(useCache = true): Promise<CustomLabelsMap> {
|
||||||
if (useCache && cachedLabels !== null) {
|
if (useCache && cachedLabels !== null) {
|
||||||
return cachedLabels;
|
return cachedLabels;
|
||||||
|
@ -3,10 +3,10 @@ import { For, Show, createSignal } from "solid-js";
|
|||||||
import { XIcon } from "../../icons/XIcon";
|
import { XIcon } from "../../icons/XIcon";
|
||||||
import { RegisterBatchCreate } from "../../types/Register";
|
import { RegisterBatchCreate } from "../../types/Register";
|
||||||
import { RegistrationPreview } from ".";
|
import { RegistrationPreview } from ".";
|
||||||
import { loadCustomLabels } from "../../utils/allCustomLabels";
|
|
||||||
import { FileDashedIcon } from "../../icons/FileDashedIcon";
|
import { FileDashedIcon } from "../../icons/FileDashedIcon";
|
||||||
import { LoadingIcon } from "../../icons/LoadingIcon";
|
import { LoadingIcon } from "../../icons/LoadingIcon";
|
||||||
import { useCourses } from "../CourseContext";
|
import { useCourses } from "../CourseContext";
|
||||||
|
import { useCustomLabel } from "../CustomLabelContext";
|
||||||
|
|
||||||
|
|
||||||
function isoDateToLocalDate(date: string): string {
|
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}) {
|
export function RegisterPreview(props: {selections: Array<RegistrationPreview>, personId: number | null, onDelete: (v: number) => void, onRegister: () => void}) {
|
||||||
const [error, setError] = createSignal("");
|
const [error, setError] = createSignal("");
|
||||||
const [loading, setLoading] = createSignal(false);
|
const [loading, setLoading] = createSignal(false);
|
||||||
|
const customLabels = useCustomLabel();
|
||||||
|
|
||||||
const submit = async() => {
|
const submit = async() => {
|
||||||
|
if (customLabels === undefined || customLabels?.loading()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError("");
|
setError("");
|
||||||
|
|
||||||
@ -35,9 +40,8 @@ export function RegisterPreview(props: {selections: Array<RegistrationPreview>,
|
|||||||
const result = await createRegisters(registers);
|
const result = await createRegisters(registers);
|
||||||
|
|
||||||
if (result === null) {
|
if (result === null) {
|
||||||
console.log("Create register: success");
|
// TODO: Determine if a reload is necessary by checking if a new custom label was created
|
||||||
// Custom labels may have changed, reload them
|
customLabels.fetchLabels();
|
||||||
loadCustomLabels();
|
|
||||||
props.onRegister();
|
props.onRegister();
|
||||||
} else {
|
} else {
|
||||||
console.log(`error. ${result}`);
|
console.log(`error. ${result}`);
|
||||||
|
@ -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();
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user