perf: ⚡ Use ngxs store for the whole customization section of the app

src/Ombi/ClientApp/package.json

@@ -31,6 +31,7 @@
     "@ngu/carousel": "^1.4.9-beta-2",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
+    "@ngxs/devtools-plugin": "^3.7.2",
     "@ngxs/store": "^3.7.2",
     "@types/jquery": "^3.3.29",
     "@yellowspot/ng-truncate": "^1.4.0",
@@ -42,6 +43,7 @@
     "core-js": "^2.5.4",
     "eventemitter2": "^5.0.1",
     "fullcalendar": "^4.0.0-alpha.4",
+    "immer": "^9.0.6",
     "jquery": "3.3.1",
     "lodash": "^4.17.20",
     "moment": "^2.23.0",

src/Ombi/ClientApp/src/app/app.component.ts

@@ -85,8 +85,6 @@ export class AppComponent implements OnInit {
     }
 
     public ngOnInit() {
-        // window["loading_screen"].finish();
-        this.customizationFacade.loadCustomziationSettings();
         this.customizationFacade.settings$().subscribe(x => {
             this.customizationSettings = x;
             if (this.customizationSettings && this.customizationSettings.applicationName) {

src/Ombi/ClientApp/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { AuthService } from "./auth/auth.service";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { BrowserModule } from "@angular/platform-browser";
 import { ButtonModule } from "primeng/button";
+import { CUSTOMIZATION_INITIALIZER } from "./state/customization/customization-initializer";
 import { ConfirmDialogModule } from "primeng/confirmdialog";
 import { CookieComponent } from "./auth/cookie.component";
 import { CookieService } from "ng2-cookies";
@@ -48,6 +49,7 @@ import { MyNavComponent } from './my-nav/my-nav.component';
 import { NavSearchComponent } from "./my-nav/nav-search.component";
 import { NgModule } from "@angular/core";
 import { NgxsModule } from '@ngxs/store';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
 import { NotificationService } from "./services";
 import { OverlayModule } from "@angular/cdk/overlay";
 import { OverlayPanelModule } from "primeng/overlaypanel";
@@ -64,38 +66,6 @@ import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { UnauthorizedInterceptor } from "./auth/unauthorized.interceptor";
 import { environment } from "../environments/environment";
 
-// Components
-
-
-
-
-
-
-
-
-
-
-
-// Services
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 const routes: Routes = [
     { path: "*", component: PageNotFoundComponent },
     { path: "", redirectTo: "/discover", pathMatch: "full" },
@@ -192,6 +162,10 @@ export function JwtTokenGetter() {
         NgxsModule.forRoot([CustomizationState], {
             developmentMode: !environment.production,
         }),
+        ...environment.production ? [] : 
+        [
+            NgxsReduxDevtoolsPluginModule.forRoot(),
+        ]
     ],
     declarations: [
         AppComponent,
@@ -236,7 +210,8 @@ export function JwtTokenGetter() {
             provide: HTTP_INTERCEPTORS,
             useClass: UnauthorizedInterceptor,
             multi: true
-        }
+        },
+        CUSTOMIZATION_INITIALIZER
        ],
     bootstrap: [AppComponent],
 })

src/Ombi/ClientApp/src/app/landingpage/landingpage.component.ts

@@ -10,6 +10,8 @@ import { DomSanitizer } from "@angular/platform-browser";
 import { ImageService } from "../services";
 
 import { fadeInOutAnimation } from "../animations/fadeinout";
+import { CustomizationFacade } from "../state/customization";
+import { ThousandShortPipe } from "../pipes/ThousandShortPipe";
 
 @Component({
     templateUrl: "./landingpage.component.html",
@@ -29,10 +31,11 @@ export class LandingPageComponent implements OnDestroy, OnInit {
 
     constructor(private settingsService: SettingsService,
                 private images: ImageService, private sanitizer: DomSanitizer, private landingPageService: LandingPageService,
+                private customizationFacade: CustomizationFacade,
                 @Inject(APP_BASE_HREF) href :string) { this.href = href }
 
     public ngOnInit() {
-        this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
+        this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x);
         this.settingsService.getLandingPage().subscribe(x => this.landingPageSettings = x);
         this.images.getRandomBackground().subscribe(x => {
             this.background = this.sanitizer.bypassSecurityTrustStyle("linear-gradient(-10deg, transparent 19%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 79%, transparent 80%), url(" + x.url + ")");

src/Ombi/ClientApp/src/app/login/login.component.ts

@@ -16,6 +16,7 @@ import { ImageService } from "../services";
 import { fadeInOutAnimation } from "../animations/fadeinout";
 import { StorageService } from "../shared/storage/storage-service";
 import { MatSnackBar } from "@angular/material/snack-bar";
+import { CustomizationFacade } from "../state/customization";
 
 @Component({
   templateUrl: "./login.component.html",
@@ -60,6 +61,7 @@ export class LoginComponent implements OnDestroy, OnInit {
     private status: StatusService,
     private fb: FormBuilder,
     private settingsService: SettingsService,
+    private customziationFacade: CustomizationFacade,
     private images: ImageService,
     private sanitizer: DomSanitizer,
     private route: ActivatedRoute,
@@ -99,13 +101,13 @@ export class LoginComponent implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
+
+    this.customziationFacade.settings$().subscribe(x => this.customizationSettings = x);
+
     this.settingsService
       .getAuthentication()
       .subscribe((x) => (this.authenticationSettings = x));
     this.settingsService.getClientId().subscribe((x) => (this.clientId = x));
-    this.settingsService
-      .getCustomization()
-      .subscribe((x) => (this.customizationSettings = x));
     this.images.getRandomBackground().subscribe((x) => {
       this.background = this.sanitizer.bypassSecurityTrustStyle(
         "url(" + x.url + ")"

src/Ombi/ClientApp/src/app/login/resetpassword.component.ts

@@ -6,6 +6,7 @@ import { fadeInOutAnimation } from "../animations/fadeinout";
 
 import { ICustomizationSettings } from "../interfaces";
 import { IdentityService, ImageService, NotificationService, SettingsService } from "../services";
+import { CustomizationFacade } from "../state/customization";
 
 @Component({
     templateUrl: "./resetpassword.component.html",
@@ -23,7 +24,7 @@ export class ResetPasswordComponent implements OnInit {
 
     constructor(private identityService: IdentityService, private notify: NotificationService,
                 private fb: FormBuilder, private settingsService: SettingsService, @Inject(APP_BASE_HREF) href:string,
-                private images: ImageService, private sanitizer: DomSanitizer) {
+                private images: ImageService, private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade) {
                     this.href = href;
         this.form = this.fb.group({
             email: ["", [Validators.required]],
@@ -38,7 +39,7 @@ export class ResetPasswordComponent implements OnInit {
         if (base.length > 1) {
             this.baseUrl = base;
         }
-        this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
+        this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x);
         this.settingsService.getEmailSettingsEnabled().subscribe(x => this.emailSettingsEnabled = x);
     }
 

src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.ts

@@ -1,15 +1,15 @@
-import { PlatformLocation } from "@angular/common";
+import { ActivatedRoute, Params } from "@angular/router";
 import { Component, OnInit } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
-import { DomSanitizer } from "@angular/platform-browser";
-import { Router } from "@angular/router";
-import { ActivatedRoute, Params } from "@angular/router";
+import { IdentityService, ImageService } from "../services";
 
+import { CustomizationFacade } from "../state/customization";
+import { DomSanitizer } from "@angular/platform-browser";
 import { ICustomizationSettings } from "../interfaces";
 import { IResetPasswordToken } from "../interfaces";
-import { IdentityService, ImageService } from "../services";
 import { NotificationService } from "../services";
-import { SettingsService } from "../services";
+import { PlatformLocation } from "@angular/common";
+import { Router } from "@angular/router";
 
 @Component({
     templateUrl: "./tokenresetpassword.component.html",
@@ -23,8 +23,9 @@ export class TokenResetPasswordComponent implements OnInit {
     public baseUrl: string;
 
     constructor(private identityService: IdentityService, private router: Router, private route: ActivatedRoute, private notify: NotificationService,
-                private fb: FormBuilder, private settingsService: SettingsService, private location: PlatformLocation,
-                private images: ImageService, private sanitizer: DomSanitizer) {
+                private fb: FormBuilder, private location: PlatformLocation, private images: ImageService,
+                private sanitizer: DomSanitizer, private customizationFacade: CustomizationFacade,
+                ) {
 
         this.route.queryParams
             .subscribe((params: Params) => {
@@ -45,7 +46,7 @@ export class TokenResetPasswordComponent implements OnInit {
         if (base.length > 1) {
             this.baseUrl = base;
         }
-        this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
+        this.customizationFacade.settings$().subscribe(x => this.customizationSettings = x);
     }
 
     public onSubmit(form: FormGroup) {

src/Ombi/ClientApp/src/app/services/settings.service.ts

@@ -1,4 +1,4 @@
-import { PlatformLocation, APP_BASE_HREF } from "@angular/common";
+import { APP_BASE_HREF } from "@angular/common";
 import { HttpClient } from "@angular/common/http";
 import { Injectable, Inject } from "@angular/core";
 import { Observable } from "rxjs";

src/Ombi/ClientApp/src/app/settings/customization/customization.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 
+import { CustomizationFacade } from "../../state/customization";
 import { ICustomizationSettings } from "../../interfaces";
 import { NotificationService } from "../../services";
 import { SettingsService } from "../../services";
@@ -13,13 +14,14 @@ export class CustomizationComponent implements OnInit {
     public settings: ICustomizationSettings;
     public advanced: boolean;
 
-    constructor(private settingsService: SettingsService, private notificationService: NotificationService) {  }
+    constructor(private settingsService: SettingsService,
+        private notificationService: NotificationService,
+        private customizationFacade: CustomizationFacade) {  }
 
     public ngOnInit() {
-        this.settingsService.getCustomization().subscribe(x => {
-            this.settings = x;
+        this.customizationFacade.settings$().subscribe(x => {
+            this.settings = { ...x };
         });
-
     }
 
     public save() {
@@ -32,7 +34,7 @@ export class CustomizationComponent implements OnInit {
                 }
             }
 
-            this.settingsService.saveCustomization(this.settings).subscribe(x => {
+            this.customizationFacade.saveSettings(this.settings).subscribe(x => {
                 if (x) {
                     this.notificationService.success("Successfully saved Ombi settings");
                 } else {

src/Ombi/ClientApp/src/app/state/customization/customization-initializer.ts

@@ -0,0 +1,10 @@
+import { APP_INITIALIZER } from "@angular/core";
+import { CustomizationFacade } from ".";
+import { Observable } from "rxjs";
+
+export const CUSTOMIZATION_INITIALIZER = {
+	provide: APP_INITIALIZER,
+	useFactory: (customizationFacade: CustomizationFacade) => (): Observable<unknown> => customizationFacade.loadCustomziationSettings(),
+	multi: true,
+	deps: [CustomizationFacade],
+};

src/Ombi/ClientApp/src/app/state/customization/customization.actions.ts

@@ -1,5 +1,11 @@
+import { ICustomizationSettings } from "../../interfaces";
 
-	export class LoadSettings {
+export class LoadSettings {
 		public static readonly type = '[Customization] LoadSettings';
 	}
+	export class UpdateSettings {
+		public static readonly type = '[Customization] UpdateSettings';
+
+        constructor(public settings: ICustomizationSettings) { }
+	}
 

src/Ombi/ClientApp/src/app/state/customization/customization.facade.ts

@@ -1,7 +1,8 @@
+import { LoadSettings, UpdateSettings } from "./customization.actions";
+
 import { CustomizationSelectors } from "./customization.selectors";
 import { ICustomizationSettings } from "../../interfaces";
 import { Injectable } from "@angular/core";
-import { LoadSettings } from "./customization.actions";
 import { Observable } from "rxjs";
 import { Store } from "@ngxs/store";
 
@@ -15,4 +16,12 @@ export class CustomizationFacade {
 	public settings$ = (): Observable<ICustomizationSettings> => this.store.select(CustomizationSelectors.customizationSettings);
 
     public loadCustomziationSettings = (): Observable<unknown> => this.store.dispatch(new LoadSettings());
+
+    public logo = (): string => this.store.selectSnapshot(CustomizationSelectors.logo);
+
+    public appName = (): string => this.store.selectSnapshot(CustomizationSelectors.applicationName);
+
+    public appUrl = (): string => this.store.selectSnapshot(CustomizationSelectors.applicationUrl);
+
+    public saveSettings = (settings: ICustomizationSettings): Observable<unknown> => this.store.dispatch(new UpdateSettings(settings));
 }

src/Ombi/ClientApp/src/app/state/customization/customization.selectors.ts

@@ -8,4 +8,19 @@ export class CustomizationSelectors {
     public static customizationSettings(settings: ICustomizationSettings): ICustomizationSettings {
         return settings;
     }
+
+    @Selector([CustomizationSelectors.customizationSettings])
+    public static logo({logo}: ICustomizationSettings): string {
+        return logo;
+    }
+
+    @Selector([CustomizationSelectors.customizationSettings])
+    public static applicationName({applicationName}: ICustomizationSettings): string {
+        return applicationName;
+    }
+
+    @Selector([CustomizationSelectors.customizationSettings])
+    public static applicationUrl({applicationUrl}: ICustomizationSettings): string {
+        return applicationUrl;
+    }
 }

src/Ombi/ClientApp/src/app/state/customization/customization.state.ts

@@ -1,11 +1,12 @@
 import { Action, State, StateContext } from "@ngxs/store";
+import { LoadSettings, UpdateSettings } from "./customization.actions";
 
 import { CUSTOMIZATION_STATE_TOKEN } from "./types";
 import { ICustomizationSettings } from "../../interfaces";
 import { Injectable } from "@angular/core";
-import { LoadSettings } from "./customization.actions";
 import { Observable } from "rxjs";
 import { SettingsService } from "../../services";
+import { produce } from 'immer';
 import { tap } from "rxjs/operators";
 
 @State({
@@ -16,9 +17,18 @@ export class CustomizationState {
     constructor(private settingsService: SettingsService) { }
 
     @Action(LoadSettings)
-    public load({setState}: StateContext<ICustomizationSettings>): Observable<ICustomizationSettings> {
+    public load({ setState }: StateContext<ICustomizationSettings>): Observable<ICustomizationSettings> {
         return this.settingsService.getCustomization().pipe(
-            tap(settings => setState(settings))
+            tap(settings =>
+                setState(settings)
+                )
+        );
+    }
+
+    @Action(UpdateSettings)
+    public update({ setState }: StateContext<ICustomizationSettings>, { settings }: UpdateSettings): Observable<boolean> {
+        return this.settingsService.saveCustomization(settings).pipe(
+            tap(() => setState(settings))
         );
     }
 }

src/Ombi/ClientApp/src/app/state/customization/types.ts

@@ -1,4 +1,4 @@
 import { ICustomizationSettings } from "../../interfaces";
 import { StateToken } from "@ngxs/store";
 
-export const CUSTOMIZATION_STATE_TOKEN = new StateToken<ICustomizationSettings>('customization');
+export const CUSTOMIZATION_STATE_TOKEN = new StateToken<ICustomizationSettings>('customizationSettings');