Fix AprilFoolsMode Setting

This commit is contained in:
glax 2025-05-19 20:23:31 +02:00
parent 855fe91e69
commit dcf596df84

View File

@ -1,5 +1,5 @@
import IBackendSettings from "../../api/types/IBackendSettings.ts";
import {useCallback, useContext, useState} from "react";
import {useCallback, useContext, useEffect, useState} from "react";
import {ApiUriContext} from "../../api/fetchApi.tsx";
import {
Accordion,
@ -10,13 +10,14 @@ import {
Typography
} from "@mui/joy";
import * as React from "react";
import {UpdateAprilFoolsToggle} from "../../api/BackendSettings.tsx";
import {GetAprilFoolsToggle, UpdateAprilFoolsToggle} from "../../api/BackendSettings.tsx";
export default function ImageProcessing({backendSettings}: {backendSettings?: IBackendSettings}) {
const apiUri = useContext(ApiUriContext);
const [loading, setLoading] = useState<boolean>(false);
const [color, setColor] = useState<ColorPaletteProp>("neutral");
const [value, setValue] = useState<boolean>(backendSettings?.aprilFoolsMode??false);
const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
const valueChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
@ -28,12 +29,18 @@ export default function ImageProcessing({backendSettings}: {backendSettings?: IB
}, 1000);
}
useEffect(() => {
setValue(backendSettings?.aprilFoolsMode??false);
}, [backendSettings]);
const UpdateAprilFoolsMode = useCallback((value: boolean) => {
UpdateAprilFoolsToggle(apiUri, value)
.then(() => GetAprilFoolsToggle(apiUri))
.then((val) => setValue(val))
.then(() => setColor("success"))
.catch(() => setColor("danger"))
.finally(() => setLoading(false));
}, [apiUri]);
}, [apiUri, value]);
return (
<Accordion>
@ -43,7 +50,7 @@ export default function ImageProcessing({backendSettings}: {backendSettings?: IB
<Switch disabled={backendSettings === undefined || loading}
onChange={valueChanged}
color={color}
defaultChecked={backendSettings?.aprilFoolsMode} />
checked={value} />
}>
Toggle
</Typography>