All files / src/app/nav navbar.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
1x
1x
1x
1x
 
 
 
 
1x
2x
 
 
 
 
 
 
 
 
 
 
 
1x
 
11x
11x
11x
11x
 
1x
 
 
 
1x
 
 
 
 
11x
 
 
9x
9x
1x
 
 
 
1x
5x
 
 
 
 
 
 
1x
11x
9x
 
 
1x
 
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, Event as RouterEvent, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { NgRedux, select } from '@angular-redux/store';
import { Subscription } from 'rxjs/Subscription';
 
import { IUser } from '../model/user.model';
 
export function isAuthenticatedSelector(state) {
  return state.user.currentUser !== null;
}
 
@Component({
  selector: 'mwb-nav-bar',
  templateUrl: 'navbar.component.html',
  styles: [`
    li > a.active { color: #F97924 }
    nav { margin-bottom: 0 },
  `
  ]
})
export class NavBarComponent implements OnInit, OnDestroy {
 
  public isCollapsed = true;
  loading = false;
  version = 'v 2.0.0';
  userPrompt = 'try to login';
 
  @select(['user', 'currentUser']) currentUser$: Observable<IUser>;
 
  // Valid in dev, will not compile in aot
  // @select((state) => state.user.currentUser !== null) isAuthenticated$: Observable<boolean>;
  @select(isAuthenticatedSelector) isAuthenticated$: Observable<boolean>;
 
  private routerSubscription: Subscription;
 
  constructor(
    private router: Router,
  ) {}
 
  ngOnInit() {
    this.routerSubscription = this.router.events.subscribe((event: RouterEvent) => {
      this.toggleSpinner(event);
    });
  }
 
  toggleSpinner(event: RouterEvent) {
    this.loading = !(
      event instanceof NavigationEnd ||
      event instanceof NavigationCancel ||
      event instanceof NavigationError
    );
  }
 
  ngOnDestroy() {
    if (this.routerSubscription) {
      this.routerSubscription.unsubscribe();
    }
  }
}