Generalize form control setup for settings

src/app/settings.ts

@@ -1,17 +1,17 @@
 import { HydrusSearchTags } from "./hydrus-tags";
 
+
 export interface AppSettingsV1 {
   version: 1;
-
   browseSearchOnLoad: boolean;
   browseSearchWhenEmpty: boolean;
   browseDefaultSearchTags: HydrusSearchTags;
 }
 
-export type AppSettings = AppSettingsV1;
+export type AppSettingsStorage = AppSettingsV1;
+export type AppSettings = Omit<AppSettingsStorage, "version">;
 
 export const defaultAppSettings: AppSettings = {
-  version: 1,
   browseSearchOnLoad: true,
   browseSearchWhenEmpty: true,
   browseDefaultSearchTags: []

src/app/settings/settings.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { HydrusApiService, HydrusKeyVerificationData } from '../hydrus-api.service';
-import { defaultAppSettings } from '../settings';
+import { defaultAppSettings, AppSettings } from '../settings';
 import { SettingsService } from '../settings.service';
 
 @Component({
@@ -12,7 +12,11 @@ import { SettingsService } from '../settings.service';
 })
 export class SettingsComponent implements OnInit {
 
-  constructor(private settingsService: SettingsService, private snackbar: MatSnackBar, private api: HydrusApiService) { }
+  constructor(
+    private settings: SettingsService,
+    private snackbar: MatSnackBar,
+    private api: HydrusApiService,
+  ) { }
 
   testData: HydrusKeyVerificationData;
 
@@ -44,16 +48,22 @@ export class SettingsComponent implements OnInit {
     });
   }
 
-  appSettingsForm = new FormGroup({
-    browseSearchOnLoad: new FormControl(this.settingsService.appSettings.browseSearchOnLoad, {nonNullable: true}),
-    browseSearchWhenEmpty: new FormControl(this.settingsService.appSettings.browseSearchWhenEmpty, {nonNullable: true}),
-    browseDefaultSearchTags: new FormControl(this.settingsService.appSettings.browseDefaultSearchTags, {nonNullable: true}),
-  });
+  /* appSettingsForm = new FormGroup({
+    browseSearchOnLoad: new FormControl(this.settings.appSettings.browseSearchOnLoad, {nonNullable: true}),
+    browseSearchWhenEmpty: new FormControl(this.settings.appSettings.browseSearchWhenEmpty, {nonNullable: true}),
+    browseDefaultSearchTags: new FormControl(this.settings.appSettings.browseDefaultSearchTags, {nonNullable: true}),
+  }); */
+
+  appSettingsForm = new FormGroup(
+    Object.keys(this.settings.appSettings)
+      .map(k => ({ [k]: new FormControl(this.settings.appSettings[k], {nonNullable: true}) }))
+      .reduce((p, c) => ({...p, ...c}))
+  );
 
   async submitAppSettings() {
     try {
-      await this.settingsService.setAppSettings(this.appSettingsForm.value);
-      this.appSettingsForm.markAsPristine();
+      await this.settings.setAppSettings(this.appSettingsForm.value);
+      this.resetAppSettings();
       this.snackbar.open('Settings saved', undefined, {
         duration: 2000
       });
@@ -65,7 +75,7 @@ export class SettingsComponent implements OnInit {
   }
 
   resetAppSettings() {
-    this.appSettingsForm.patchValue(this.settingsService.appSettings);
+    this.appSettingsForm.patchValue(this.settings.appSettings);
     this.appSettingsForm.markAsPristine();
   }