feat(ngrx): app component, move tu .subscribe() less architecture, us…

…e | async pipe instead
tomastrajan · Nov 7, 2018 · 645e20d · 645e20d
1 parent 24e80e4
commit 645e20d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 73 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,13 @@
+<ng-container *ngIf="settings$ | async as settings">
+  {{onSettings(settings)}}
+</ng-container>
+<ng-container *ngIf="navigationEnd$ | async as event">
+  {{onNavigationEnd(event)}}
+</ng-container>
+<ng-container *ngIf="activatedRouteSnapshot$ | async as snapshot">
+  {{onActivatedRouteSnapshot(snapshot)}}
+</ng-container>
+
 <mat-sidenav-container>
 
   <mat-sidenav #sidenav mode="push">
@@ -16,7 +26,7 @@
 
   <div class="wrapper">
 
-    <div class="toolbar" [style.position]="isHeaderSticky ? 'fixed' : 'inherit'" [class.mat-elevation-z4]="isHeaderSticky">
+    <div class="toolbar" [style.position]="(settings$ | async)?.stickyHeader ? 'fixed' : 'inherit'" [class.mat-elevation-z4]="isHeaderSticky">
       <mat-toolbar color="primary">
         <button mat-icon-button class="d-md-none" (click)="sidenav.open()">
           <fa-icon icon="bars"></fa-icon>
@@ -37,7 +47,7 @@
           </button>
         </span>
 
-        <button mat-button mat-stroked-button color="accent" *ngIf="!isAuthenticated" (click)="onLoginClick()">
+        <button mat-button mat-stroked-button color="accent" *ngIf="!(isAuthenticated$ | async)" (click)="onLoginClick()">
           {{ 'anms.menu.login' | translate }}
         </button>
 
@@ -66,8 +76,8 @@
           <fa-icon [icon]="['fab','github']"></fa-icon>
         </a>
 
-        <span>
-          <mat-select [ngModel]="settings?.language" (selectionChange)="onLanguageSelect($event)">
+        <span *ngIf="settings$ | async as settings">
+          <mat-select [ngModel]="settings.language" (selectionChange)="onLanguageSelect($event)">
             <mat-option *ngFor="let l of languages" [value]="l">
               {{ l.toUpperCase() }}
             </mat-option>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,21 +1,26 @@
+import {
+  ActivationEnd,
+  Router,
+  NavigationEnd,
+  ActivatedRouteSnapshot
+} from '@angular/router';
 import browser from 'browser-detect';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
-import { ActivationEnd, Router, NavigationEnd } from '@angular/router';
+import { Component, HostBinding, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Store, select } from '@ngrx/store';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { delay, filter, map } from 'rxjs/operators';
 
 import {
   ActionAuthLogin,
   ActionAuthLogout,
   AnimationsService,
   TitleService,
-  selectAuth,
   routeAnimations,
   AppState,
-  LocalStorageService
+  LocalStorageService,
+  selectIsAuthenticated
 } from '@app/core';
 import { environment as env } from '@env/environment';
 
@@ -33,9 +38,7 @@ import {
   styleUrls: ['./app.component.scss'],
   animations: [routeAnimations]
 })
-export class AppComponent implements OnInit, OnDestroy {
-  private unsubscribe$: Subject<void> = new Subject<void>();
-
+export class AppComponent implements OnInit {
   @HostBinding('class')
   componentCssClass;
 
@@ -55,9 +58,10 @@ export class AppComponent implements OnInit, OnDestroy {
     { link: 'settings', label: 'anms.menu.settings' }
   ];
 
-  settings: SettingsState;
-  isAuthenticated: boolean;
-  isHeaderSticky: boolean;
+  isAuthenticated$: Observable<boolean>;
+  settings$: Observable<SettingsState>;
+  navigationEnd$: Observable<NavigationEnd>;
+  activatedRouteSnapshot$: Observable<ActivatedRouteSnapshot>;
 
   constructor(
     public overlayContainer: OverlayContainer,
@@ -80,15 +84,41 @@ export class AppComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.translate.setDefaultLang('en');
-    this.subscribeToSettings();
-    this.subscribeToIsAuthenticated();
-    this.subscribeToRouterEvents();
     this.storageService.testLocalStorage();
+    if (AppComponent.isIEorEdgeOrSafari()) {
+      this.store.dispatch(
+        new ActionSettingsChangeAnimationsPageDisabled({
+          pageAnimationsDisabled: true
+        })
+      );
+    }
+
+    this.isAuthenticated$ = this.store.pipe(select(selectIsAuthenticated));
+    this.settings$ = this.store.pipe(select(selectSettings));
+    this.navigationEnd$ = this.router.events.pipe(
+      filter(event => event instanceof NavigationEnd)
+    ) as Observable<NavigationEnd>;
+    this.activatedRouteSnapshot$ = this.router.events.pipe(
+      filter(event => event instanceof ActivationEnd),
+      map((event: ActivationEnd) => event.snapshot)
+    );
+  }
+
+  onSettings(settings: SettingsState) {
+    this.setTheme(settings);
+    this.setLanguage(settings);
+    this.animationService.updateRouteAnimationType(
+      settings.pageAnimations,
+      settings.elementsAnimations
+    );
+  }
+
+  onNavigationEnd(event: NavigationEnd) {
+    AppComponent.trackPageView(event);
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribe$.next();
-    this.unsubscribe$.complete();
+  onActivatedRouteSnapshot(snapshot: ActivatedRouteSnapshot) {
+    this.titleService.setTitle(snapshot);
   }
 
   onLoginClick() {
@@ -103,48 +133,14 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store.dispatch(new ActionSettingsChangeLanguage({ language }));
   }
 
-  private subscribeToIsAuthenticated() {
-    this.store
-      .pipe(
-        select(selectAuth),
-        takeUntil(this.unsubscribe$)
-      )
-      .subscribe(auth => (this.isAuthenticated = auth.isAuthenticated));
-  }
-
-  private subscribeToSettings() {
-    if (AppComponent.isIEorEdgeOrSafari()) {
-      this.store.dispatch(
-        new ActionSettingsChangeAnimationsPageDisabled({
-          pageAnimationsDisabled: true
-        })
-      );
-    }
-    this.store
-      .pipe(
-        select(selectSettings),
-        takeUntil(this.unsubscribe$)
-      )
-      .subscribe(settings => {
-        this.settings = settings;
-        this.setTheme(settings);
-        this.setStickyHeader(settings);
-        this.setLanguage(settings);
-        this.animationService.updateRouteAnimationType(
-          settings.pageAnimations,
-          settings.elementsAnimations
-        );
-      });
-  }
-
   private setTheme(settings: SettingsState) {
     const { theme, autoNightMode } = settings;
     const hours = new Date().getHours();
     const effectiveTheme = (autoNightMode && (hours >= 20 || hours <= 6)
       ? NIGHT_MODE_THEME
       : theme
     ).toLowerCase();
-    this.componentCssClass = effectiveTheme;
+    setTimeout(() => (this.componentCssClass = effectiveTheme));
     const classList = this.overlayContainer.getContainerElement().classList;
     const toRemove = Array.from(classList).filter((item: string) =>
       item.includes('-theme')
@@ -155,26 +151,10 @@ export class AppComponent implements OnInit, OnDestroy {
     classList.add(effectiveTheme);
   }
 
-  private setStickyHeader(settings: SettingsState) {
-    this.isHeaderSticky = settings.stickyHeader;
-  }
-
   private setLanguage(settings: SettingsState) {
     const { language } = settings;
     if (language) {
       this.translate.use(language);
     }
   }
-
-  private subscribeToRouterEvents() {
-    this.router.events.pipe(takeUntil(this.unsubscribe$)).subscribe(event => {
-      if (event instanceof ActivationEnd) {
-        this.titleService.setTitle(event.snapshot);
-      }
-
-      if (event instanceof NavigationEnd) {
-        AppComponent.trackPageView(event);
-      }
-    });
-  }
 }
diff --git a/src/app/examples/todos/components/todos-container.component.ts b/src/app/examples/todos/components/todos-container.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { select, Store } from '@ngrx/store';
+import { take } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 
 import { ROUTE_ANIMATIONS_ELEMENTS, NotificationService } from '@app/core';
@@ -81,6 +82,7 @@ export class TodosContainerComponent implements OnInit {
         panelClass: 'todos-notification-overlay'
       })
       .onAction()
+      .pipe(take(1))
       .subscribe(() => this.onToggleTodo({ ...todo, done: !todo.done }));
   }