import { Observable } from 'rxjs/Observable';

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import 'rxjs/add/operator/pluck';

import 'rxjs/add/operator/distinctUntilChanged';

import {User} from './auth/shared/services/auth/auth.service';

export interface State {

  user: User;

  [key: string]: any

}

const state: State = {

  user: undefined

};

export class Store {

  private subject = new BehaviorSubject<State>(state);

  private store = this.subject.asObservable().distinctUntilChanged();

  get value() {

    return this.subject.value;

  }

  select<T>(name: string): Observable<T> {

    return this.store.pluck(name);

  }

  set(name: string, state: any) {

    this.subject.next({ ...this.value, [name]: state });

  }

}

import {Injectable} from '@angular/core';

import {AngularFireAuth} from 'angularfire2/auth';

import {Store} from 'store';

import 'rxjs/add/operator/do';

export interface User {

  uid: string;

  email: string;

  authenticated: boolean;

}

@Injectable()

export class AuthService {

  // handle on every auth state changes

  auth$ = this.af.authState

    .do(next => {

      if (!next) {

        this.store.set('user', null);

        return;

      }

      const user = {

        email: next.email,

        uid: next.uid,

        authenticated: true

      };

      this.store.set('user', user);

    });

  constructor(

    private af: AngularFireAuth,

    private store: Store

  ) {

  }

  createUser(email: string, password: string) {

    return this.af.auth.createUserWithEmailAndPassword(email, password);

  }

  loginUser(email: string, password: string) {

    return this.af.auth.signInWithEmailAndPassword(email, password)

  }

}

import {Component, OnDestroy, OnInit} from '@angular/core';

import {Store} from 'store';

import {AuthService} from '../../../auth/shared/services/auth/auth.service';

import {Observable} from 'rxjs/Observable';

import {Subscription} from 'rxjs/Subscription';

import {User} from 'firebase/app';

@Component({

  selector: 'app-root',

  styleUrls: ['app.component.scss'],

  template: `

    <div>

      <h1>{{user$ | async | json}}</h1>

      <div class="wrapper">

        <router-outlet></router-outlet>

      </div>

    </div>

  `

})

export class AppComponent implements OnInit, OnDestroy{

  user$: Observable<User>;

  subscription: Subscription;

  constructor(

    private store: Store,

    private authService: AuthService

  ) {}

  ngOnInit() {

    this.subscription = this.authService.auth$.subscribe();

    this.user$ = this.store.select<User>('user');

  }

  ngOnDestroy() {

    this.subscription.unsubscribe();

  }

}