[IncomeApp] adding user to the store

3. IncomeApp/src/app/app.reducer.ts

@@ -1,10 +1,13 @@
 import * as fromUI from './shared/ui.reducer';
+import * as fromAuth from './auth/auth.reducer';
 import { ActionReducerMap } from '@ngrx/store';
 
 export interface AppState {
   ui: fromUI.State;
+  auth: fromAuth.AuthState
 }
 
 export const appReducers: ActionReducerMap<AppState> = {
-  ui: fromUI.UIReducer
+  ui: fromUI.UIReducer,
+  auth: fromAuth.AuthReducer
 }

3. IncomeApp/src/app/auth/auth.actions.ts

@@ -0,0 +1,11 @@
+import { Action } from '@ngrx/store';
+import { User } from './user.model';
+
+export const SET_USER = '[Auth] Set User';
+
+export class SetUserAction implements Action {
+  readonly type = SET_USER;
+  constructor(public user: User){}
+}
+
+export type actions = SetUserAction;

3. IncomeApp/src/app/auth/auth.reducer.ts

@@ -0,0 +1,14 @@
+import * as AuthActions from './auth.actions';
+import { User } from './user.model';
+
+export interface AuthState { user: User; }
+const initState: AuthState = { user: null };
+
+export function AuthReducer(state = initState, action: AuthActions.actions): AuthState {
+  switch (action.type) {
+    case AuthActions.SET_USER:
+      return { user: {...action.user} };
+    default:
+      return state;
+  }
+}

3. IncomeApp/src/app/auth/auth.service.ts

@@ -5,39 +5,66 @@ import { Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { map } from 'rxjs/operators';
 import * as firebase from 'firebase';
-import { User } from './user.model';
+import { User, UserObj } from './user.model';
+import { Store } from '@ngrx/store';
+import { AppState } from '../app.reducer';
+import { ActivateLoadingAction, DeactivateLoadingAction } from '../shared/ui.actions';
+import { SetUserAction } from './auth.actions';
+import { Subscription } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthService {
 
+  private userSubscription: Subscription = new Subscription();
+
   constructor(private afAuth: AngularFireAuth, 
               private afDB: AngularFirestore,
               private router: Router, 
-              private toastr: ToastrService) { }
+              private toastr: ToastrService,
+              private store: Store<AppState>) { }
 
   initAuthListener() {
     this.afAuth.authState.subscribe((fbUser: firebase.User) => {
-      console.log(fbUser);
+      if (fbUser) {
+        this.userSubscription = this.afDB.doc(`${fbUser.uid}/user`).valueChanges().subscribe((userObj: UserObj) => {
+          const user = new User(userObj);
+          this.store.dispatch(new SetUserAction(user));
+        });
+      } else {
+        this.userSubscription.unsubscribe();
+      }
     });
   }
 
   createUser(name: string, email: string, password: string) {
+    this.store.dispatch(new ActivateLoadingAction());
     this.afAuth.auth.createUserWithEmailAndPassword(email, password)
         .then(resp => {
           const user: User = { uid: resp.user.uid, name, email };
           this.afDB.doc(`${user.uid}/user`).set(user).then(() => {
-            this.router.navigate(['/'])
+            this.router.navigate(['/']);
+            this.store.dispatch(new DeactivateLoadingAction());
           });
         })
-        .catch(err => this.toastr.error(err['message'], 'Error'));
+        .catch(err => {
+          this.store.dispatch(new DeactivateLoadingAction());
+          this.toastr.error(err['message'], 'Error');
+        });
   }
 
   login(email: string, password: string) {
+    this.store.dispatch(new ActivateLoadingAction());
     this.afAuth.auth.signInWithEmailAndPassword(email, password)
-        .then(resp => this.router.navigate(['/']))
-        .catch(err => this.toastr.error(err['message'], 'Error'));
+        .then(resp => { 
+          this.router.navigate(['/']);
+          this.store.dispatch(new DeactivateLoadingAction());
+        })
+        .catch(err => {
+          this.store.dispatch(new DeactivateLoadingAction());
+          this.toastr.error(err['message'], 'Error');
+        });
   }
 
   isAuth() {

3. IncomeApp/src/app/auth/login/login.component.html

@@ -20,10 +20,15 @@ <h2 class="text-center mb-4" style="color: white;">Ingresar</h2>
             </div>
 
             <div class="form-group">
-              <button class="btn btn-primary submit-btn btn-block"
+              <button *ngIf="!(isLoading$ | async)" class="btn btn-primary submit-btn btn-block"
                       [disabled]="loginForm.invalid">
                 Login
               </button>
+              <button *ngIf="(isLoading$ | async)" class="btn btn-primary submit-btn btn-block"
+                      [disabled]="true">
+                <i class="fa fa-spin fa-sync"></i>
+                Espere...
+              </button>
             </div>
 
             <div class="text-block text-center my-3">

3. IncomeApp/src/app/auth/login/login.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../auth.service';
+import { Store } from '@ngrx/store';
+import { AppState } from 'src/app/app.reducer';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-login',
@@ -8,9 +12,12 @@ import { AuthService } from '../auth.service';
 })
 export class LoginComponent implements OnInit {
 
-  constructor(private authSrv: AuthService) { }
+  isLoading$: Observable<boolean>;
+
+  constructor(private authSrv: AuthService, private store: Store<AppState>) { }
 
   ngOnInit() {
+    this.isLoading$ = this.store.select('ui').pipe(map(ui => ui.isLoading));
   }
 
   onSubmit(data: any) {

3. IncomeApp/src/app/auth/register/register.component.html

@@ -22,10 +22,16 @@ <h2 class="text-center mb-4">Registro</h2>
             </div>
 
             <div class="form-group">
-              <button class="btn btn-primary submit-btn btn-block"
+              <button *ngIf="!(isLoading$ | async)" class="btn btn-primary submit-btn btn-block"
                       [disabled]="registerForm.invalid">
                 Crear cuenta
               </button>
+
+              <button *ngIf="(isLoading$ | async)" class="btn btn-primary submit-btn btn-block"
+                      [disabled]="true">
+                <i class="fa fa-spin fa-sync"></i>
+                Espere...
+              </button>
             </div>
             <div class="text-block text-center my-3">
               <span class="text-small font-weight-semibold">¿Ya tienes una cuenta?</span>

3. IncomeApp/src/app/auth/register/register.component.ts

@@ -1,6 +1,9 @@
+import { Store } from '@ngrx/store';
 import { Component, OnInit } from '@angular/core';
-import { NgForm } from '@angular/forms';
 import { AuthService } from '../auth.service';
+import { AppState } from 'src/app/app.reducer';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-register',
@@ -9,9 +12,12 @@ import { AuthService } from '../auth.service';
 })
 export class RegisterComponent implements OnInit {
 
-  constructor(private authSrv: AuthService) { }
+  isLoading$: Observable<boolean>;
+
+  constructor(private authSrv: AuthService, private store: Store<AppState>) { }
 
   ngOnInit() {
+    this.isLoading$ = this.store.select('ui').pipe(map(ui => ui.isLoading));
   }
 
   onSubmit(data: any) {

3. IncomeApp/src/app/auth/user.model.ts

@@ -4,9 +4,15 @@ export class User {
   public email: string;
   public uid: string; 
 
-  constructor(name: string, email: string, uid: string) {
-    this.name = name;
-    this.email = email;
-    this.uid = uid;
+  constructor(dataObj: UserObj ) {
+    this.name = dataObj && dataObj.name || null;
+    this.email = dataObj && dataObj.email || null;
+    this.uid = dataObj && dataObj.uid || null;
   }
+}
+
+export interface UserObj {
+  uid: string;
+  email: string;
+  name: string;
 }

3. IncomeApp/src/app/shared/ui.reducer.ts

@@ -4,7 +4,7 @@ export interface State { isLoading: boolean; }
 const initState: State = { isLoading: false };
 
 export function UIReducer(state = initState, action: UIActions.actions): State {
-  switch(action.type) {
+  switch (action.type) {
     case UIActions.ACTIVATE_LOADING:
       return { isLoading: true };
     case UIActions.DEACTIVATE_LOADING: