Fix UserAgent Setting

tranga-website/src/Components/Settings/UserAgent.tsx

@@ -7,17 +7,18 @@ import {
     ColorPaletteProp,
     Input
 } from "@mui/joy";
-import {KeyboardEventHandler, useCallback, useContext, useState} from "react";
+import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
 import {ApiUriContext} from "../../api/fetchApi.tsx";
-import {ResetUserAgent, UpdateUserAgent} from "../../api/BackendSettings.tsx";
+import {GetUserAgent, ResetUserAgent, UpdateUserAgent} from "../../api/BackendSettings.tsx";
 
 export default function UserAgent({backendSettings}: {backendSettings?: IBackendSettings}) {
     const apiUri = useContext(ApiUriContext);
     const [loading, setLoading] = useState<boolean>(false);
-    const [value, setValue] = useState<string>("");
+    const [value, setValue] = useState<string|undefined>(backendSettings?.userAgent);
     const [color, setColor] = useState<ColorPaletteProp>("neutral");
 
     const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+        if(value === undefined) return;
         if(e.key === "Enter") {
             setLoading(true);
             UpdateUserAgent(apiUri, value)
@@ -25,26 +26,32 @@ export default function UserAgent({backendSettings}: {backendSettings?: IBackend
                 .catch(() => setColor("danger"))
                 .finally(() => setLoading(false));
         }
-    }, [apiUri])
+    }, [apiUri, value])
 
     const Reset = useCallback(() => {
         setLoading(true);
         ResetUserAgent(apiUri)
+            .then(() => GetUserAgent(apiUri))
+            .then((val) => setValue(val))
             .then(() => setColor("success"))
             .catch(() => setColor("danger"))
             .finally(() => setLoading(false));
     }, [apiUri]);
 
+    useEffect(() => {
+        setValue(backendSettings?.userAgent);
+    }, [backendSettings]);
+
     return (
         <Accordion>
             <AccordionSummary>UserAgent</AccordionSummary>
             <AccordionDetails>
                 <Input disabled={backendSettings === undefined || loading}
-                        placeholder={"UserAgent"}
+                       placeholder={"UserAgent"}
-                        defaultValue={backendSettings?.userAgent}
+                       value={value}
-                        onKeyDown={keyDown}
+                       onKeyDown={keyDown}
-                        onChange={e => setValue(e.target.value)}
+                       onChange={e => setValue(e.target.value)}
-                        color={color}
+                       color={color}
                        endDecorator={<Button onClick={Reset} loading={loading}>Reset</Button>}
                 />
             </AccordionDetails>