Simplified frontend setting creation.

Added ability to reset UserAgent

Website/App.tsx

@@ -4,14 +4,14 @@ import Search from "./modules/Search";
 import Header from "./modules/Header";
 import MonitorJobsList from "./modules/MonitorJobsList";
 import './styles/index.css'
-import IFrontendSettings, {FrontendSettingsWith} from "./modules/interfaces/IFrontendSettings";
+import IFrontendSettings, {LoadFrontendSettings} from "./modules/interfaces/IFrontendSettings";
 import {useCookies} from "react-cookie";
 
 export default function App(){
     const [, setCookie] = useCookies(['apiUri', 'jobInterval']);
     const [connected, setConnected] = React.useState(false);
     const [showSearch, setShowSearch] = React.useState(false);
-    const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>(FrontendSettingsWith(undefined, undefined, undefined));
+    const [frontendSettings, setFrontendSettings] = useState<IFrontendSettings>(LoadFrontendSettings());
     const [updateInterval, setUpdateInterval] = React.useState<number>();
     const [updateMonitorList, setUpdateMonitorList] = React.useState<Date>(new Date());
 

Website/modules/Settings.tsx

@@ -1,8 +1,8 @@
-import React, {KeyboardEventHandler, useEffect, useState} from 'react';
-import IFrontendSettings, {FrontendSettingsWith} from "./interfaces/IFrontendSettings";
+import React, {KeyboardEventHandler, MouseEventHandler, useEffect, useState} from 'react';
+import IFrontendSettings from "./interfaces/IFrontendSettings";
 import '../styles/settings.css';
 import IBackendSettings from "./interfaces/IBackendSettings";
-import {getData} from "../App";
+import {getData, postData} from "../App";
 import LibraryConnector, {Kavita, Komga} from "./LibraryConnector";
 import NotificationConnector, {Gotify, Lunasea, Ntfy} from "./NotificationConnector";
 import ILibraryConnector from "./interfaces/ILibraryConnector";
@@ -24,7 +24,7 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
         console.debug(`${showSettings ? "Showing" : "Not showing"} settings.`);
         if(!showSettings || !backendConnected)
             return;
-        GetSettings(apiUri).then(setBackendSettings).catch(console.error);
+        UpdateBackendSettings();
         LibraryConnector.GetLibraryConnectors(apiUri).then(setLibraryConnectors).catch(console.error);
         NotificationConnector.GetNotificationConnectors(apiUri).then(setNotificationConnectors).catch(console.error);
     }, [showSettings]);
@@ -45,6 +45,10 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
             .catch(Promise.reject);
     }
 
+    function UpdateBackendSettings() {
+        GetSettings(apiUri).then(setBackendSettings).catch(console.error);
+    }
+
     const GetKomga = () : ILibraryConnector | undefined =>
         libraryConnectors?.find(con => con.libraryType == 0);
 
@@ -73,13 +77,36 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
     const SubmitApiUri : KeyboardEventHandler<HTMLInputElement> = (e) => {
         if(e.currentTarget.value.length < 1)
             return;
-        const newSettings = FrontendSettingsWith(frontendSettings, undefined, e.currentTarget.value);
         if(e.key == "Enter"){
-            setFrontendSettings(newSettings);
+            setFrontendSettings({...frontendSettings, apiUri: e.currentTarget.value});
             RefreshInputs();
         }
     }
-1
+
+    const SubmitUserAgent: KeyboardEventHandler<HTMLInputElement> = (e) => {
+        if(e.currentTarget.value.length < 1 || backendSettings === undefined)
+            return;
+        if(e.key == "Enter"){
+            //console.info(`Updating Useragent ${e.currentTarget.value}`);
+            postData(`${apiUri}/v2/Settings/UserAgent`, {value: e.currentTarget.value})
+                .then((json) => {
+                    //console.info(`Successfully updated Useragent ${e.currentTarget.value}`);
+                    UpdateBackendSettings();
+                    RefreshInputs();
+                })
+                .catch(() => alert("Failed to update Useragent."));
+        }
+    }
+    const ResetUserAgent: MouseEventHandler<HTMLSpanElement>  = () => {
+        postData(`${apiUri}/v2/Settings/UserAgent`, {value: undefined})
+            .then((json) => {
+                //console.info(`Successfully updated Useragent ${e.currentTarget.value}`);
+                UpdateBackendSettings();
+                RefreshInputs();
+            })
+            .catch(() => alert("Failed to update Useragent."));
+    }
+
     function RefreshInputs(){
         alert("Saved.");
         setShowSettings(false);
@@ -103,7 +130,8 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
                                     <label htmlFor="settingApiUri">API URI:</label>
                                     <input placeholder={frontendSettings.apiUri} type="text" id="settingApiUri" onKeyDown={SubmitApiUri} />
                                     <label htmlFor="userAgent">User Agent:</label>
-                                    <input id="userAgent" type="text" placeholder={backendSettings != undefined ? backendSettings.userAgent : "UserAgent"} />
+                                    <input id="userAgent" type="text" placeholder={backendSettings != undefined ? backendSettings.userAgent : "UserAgent"} onKeyDown={SubmitUserAgent} />
+                                    <span id="resetUserAgent" onClick={ResetUserAgent}>Reset</span>
                                 </div>
                                 <div className="section-item">
                                     <span className="settings-section-title">Rate Limits</span>

Website/modules/interfaces/IFrontendSettings.tsx

@@ -5,27 +5,14 @@ export default interface IFrontendSettings {
     apiUri: string;
 }
 
-export function FrontendSettingsWith(settings: IFrontendSettings | undefined, jobInterval: Date | undefined, apiUri: string | undefined): IFrontendSettings {
+export function LoadFrontendSettings(): IFrontendSettings {
     const cookies = new Cookies();
-    let transform : IFrontendSettings;
-    if(settings === undefined) {
-        transform = {
-            apiUri: apiUri === undefined
-                ? cookies.get('apiUri') === undefined
-                    ? `${window.location.protocol}//${window.location.host}/api`
-                    : cookies.get('apiUri')
-                : apiUri,
-            jobInterval: jobInterval === undefined
-                ? cookies.get('jobInterval') === undefined
-                    ? new Date(0,0,0,3)
-                    : cookies.get('jobInterval')
-                : jobInterval
-        }
-    }else {
-        transform = {
-            apiUri: apiUri === undefined ? settings.apiUri : apiUri,
-            jobInterval: jobInterval === undefined ? settings.jobInterval : jobInterval,
-        }
+    return {
+        jobInterval: cookies.get('jobInterval') === undefined
+            ? new Date(0,0,0,3)
+            : cookies.get('jobInterval'),
+        apiUri: cookies.get('apiUri') === undefined
+            ? `${window.location.protocol}//${window.location.host}/api`
+            : cookies.get('apiUri')
     }
-    return transform;
 }

Website/styles/settings.css

@@ -83,10 +83,15 @@
     width: calc(100% - 20px);
 }
 
-.section-actions > span {
+.section-actions > span, #resetUserAgent {
     border: 1px solid lightgray;
     padding: 3px 5px 2px;
     width: 10ch;
     text-align: center;
     border-radius: 3px;
+}
+
+#resetUserAgent{
+    align-self: flex-end;
+    margin-top: 3px;
 }