glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-05-22 14:13:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix AprilFoolsMode Setting

Browse Source
This commit is contained in:
glax 2025-05-19 20:23:31 +02:00
parent 855fe91e69
commit dcf596df84
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
tranga-website/src/Components/Settings/AprilFoolsMode.tsx
View File

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