From dcf596df8440535b969b7810aaee8c98aca6acf8 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Mon, 19 May 2025 20:23:31 +0200
Subject: [PATCH] Fix AprilFoolsMode Setting

---
 .../src/Components/Settings/AprilFoolsMode.tsx    | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/tranga-website/src/Components/Settings/AprilFoolsMode.tsx b/tranga-website/src/Components/Settings/AprilFoolsMode.tsx
index 2014d37..48c1b4f 100644
--- a/tranga-website/src/Components/Settings/AprilFoolsMode.tsx
+++ b/tranga-website/src/Components/Settings/AprilFoolsMode.tsx
@@ -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>