refac appsettings page

frontend/src/api/actions/updateAppsettingsConfig.ts

@@ -1,37 +1,12 @@
 import APIClient from '../../functions/APIClient';
-import { AppSettingsConfigType } from '../loader/loadAppsettingsConfig';
 
-type ObjectType = Record<
-  string,
-  string | number | boolean | Record<string, string | number | boolean>
->;
-
-function flattenObject(ob: ObjectType) {
-  // source: https://stackoverflow.com/a/53739792
-  const toReturn: ObjectType = {};
-
-  for (const i in ob) {
-    if (!Object.prototype.hasOwnProperty.call(ob, i)) continue;
-
-    if (typeof ob[i] == 'object' && ob[i] !== null) {
-      const flatObject = flattenObject(ob[i]);
-      for (const x in flatObject) {
-        if (!Object.prototype.hasOwnProperty.call(flatObject, x)) continue;
-
-        toReturn[i + '.' + x] = flatObject[x];
-      }
-    } else {
-      toReturn[i] = ob[i];
-    }
-  }
-
-  return toReturn;
-}
-
-const updateAppsettingsConfig = async (config: AppSettingsConfigType) => {
+const updateAppsettingsConfig = async (
+  configKey: string,
+  configValue: string | boolean | number | null,
+) => {
   return APIClient('/api/appsettings/config/', {
     method: 'POST',
-    body: flattenObject(config),
+    body: { [configKey]: configValue },
   });
 };
 

frontend/src/api/loader/loadAppsettingsConfig.ts

@@ -8,21 +8,21 @@ export type AppSettingsConfigType = {
     auto_start: boolean;
   };
   downloads: {
-    limit_speed: false | number;
+    limit_speed: number | undefined;
     sleep_interval: number;
     autodelete_days: number;
-    format: number | string;
-    format_sort: boolean | string;
+    format: string | undefined;
+    format_sort: string | undefined;
     add_metadata: boolean;
     add_thumbnail: boolean;
-    subtitle: boolean | string;
+    subtitle: string | undefined;
     subtitle_source: boolean | string;
     subtitle_index: boolean;
-    comment_max: string | number;
+    comment_max: string | undefined;
     comment_sort: string;
     cookie_import: boolean;
-    throttledratelimit: false | number;
-    extractor_lang: boolean | string;
+    throttledratelimit: number | undefined;
+    extractor_lang: string | undefined;
     integrate_ryd: boolean;
     integrate_sponsorblock: boolean;
   };

frontend/src/components/InputConfig.tsx

@@ -6,7 +6,7 @@ type InputTextProps = {
     | React.Dispatch<React.SetStateAction<string | null>>
     | React.Dispatch<React.SetStateAction<number | null>>;
   oldValue: string | number | undefined;
-  updateCallback: (arg0: string, arg1: string | number | null) => void;
+  updateCallback: (arg0: string, arg1: string | boolean | number | null) => void;
 };
 
 const InputConfig = ({ type, name, value, setValue, oldValue, updateCallback }: InputTextProps) => {

frontend/src/style.css

@@ -108,6 +108,10 @@ input {
   border: solid 1px var(--main-font);
 }
 
+input[readonly] {
+  background-color: var(--main-font);
+}
+
 textarea {
   width: 100%;
 }