24-327 Adding rxng effects

package-lock.json

@@ -336,6 +336,11 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.2.4.tgz",
       "integrity": "sha512-jEpglcwMlwdXc/JgvJaJtCSkPMktnFeI0gAZxPrmbJxKVzMZJ2zM582NbW/r6M22pSdNWjcWeg1I2LRg3jQGQA=="
     },
+    "@ngrx/effects": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-4.1.1.tgz",
+      "integrity": "sha1-y3WLhSeWSyWOpBlR9ZqhROPvn64="
+    },
     "@ngrx/store": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-4.1.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "@ngrx/effects": "^4.1.1",
     "@ngrx/store": "^4.1.1",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -10,6 +11,7 @@ import { ShoppingListModule } from './shopping-list/shopping-list.module';
 import { AuthModule } from './auth/auth.module';
 import { CoreModule } from './core/core.module';
 import { appReducers } from './ngrx/app.reducers';
+import { AuthEffects } from './auth/ngrx/auth.effects';
 
 @NgModule({
   declarations: [
@@ -23,7 +25,8 @@ import { appReducers } from './ngrx/app.reducers';
     ShoppingListModule,
     AuthModule,
     CoreModule,
-    StoreModule.forRoot(appReducers)
+    StoreModule.forRoot(appReducers),
+    EffectsModule.forRoot([AuthEffects])
   ],
   bootstrap: [AppComponent]
 })

src/app/auth/auth.service.ts

@@ -14,14 +14,14 @@ export class AuthService {
         firebase.auth().createUserWithEmailAndPassword(email, password)
         .then(
             user => {
-                this.store.dispatch(new AuthActions.Signup());
                 firebase.auth().currentUser.getIdToken()
                     .then(
                         (token: string) => {
                             this.store.dispatch(new AuthActions.SetToken(token));
                         }
                     );
-
+                this.store.dispatch(new AuthActions.Signup());
+                this.router.navigate(['/']);
             }
         )
         .catch(
@@ -33,14 +33,14 @@ export class AuthService {
         firebase.auth().signInWithEmailAndPassword(email, password)
             .then(
                 response => {
-                    this.store.dispatch(new AuthActions.Signin());
-                    this.router.navigate(['/']);
                     firebase.auth().currentUser.getIdToken()
                         .then(
                             (token: string) => {
                                 this.store.dispatch(new AuthActions.SetToken(token));
                             }
                         );
+                    this.store.dispatch(new AuthActions.Signin());
+                    this.router.navigate(['/']);
                 }
             )
             .catch(

src/app/auth/ngrx/auth.actions.ts

@@ -1,10 +1,17 @@
 import { Action } from '@ngrx/store';
 
+export const TRY_SIGNUP = 'TRY_SIGNUP';
 export const SIGNUP = 'SIGNUP';
 export const SIGNIN = 'SIGNIN';
 export const LOGOUT = 'LOGOUT';
 export const SET_TOKEN = 'SET_TOKEN';
 
+export class TrySignup implements Action {
+    readonly type = TRY_SIGNUP;
+
+    constructor(public payload: {username: string, password: string}) {}
+}
+
 export class Signup implements Action {
     readonly type = SIGNUP;
 }
@@ -23,4 +30,4 @@ export class SetToken implements Action {
     constructor(public payload: string) {}
 }
 
-export type AuthActions = Signup | Signin | Logout | SetToken;
+export type AuthActions = TrySignup | Signup | Signin | Logout | SetToken;

src/app/auth/ngrx/auth.effects.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { Actions, Effect } from '@ngrx/effects';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/mergeMap';
+import { fromPromise } from 'rxjs/observable/fromPromise';
+import * as firebase from 'firebase';
+
+import * as AuthActions from './auth.actions';
+import * as fromAuth from './auth.reducers';
+
+@Injectable()
+export class AuthEffects {
+    @Effect()
+    authSignup = this.actions$.ofType(AuthActions.TRY_SIGNUP)
+        .map((action: AuthActions.TrySignup) => {
+            return action.payload;
+        })
+        .switchMap((authData: {username: string, password: string}) => {
+            return fromPromise(firebase.auth().createUserWithEmailAndPassword(authData.username, authData.password));
+        })
+        .switchMap(() => {
+            return fromPromise(firebase.auth().currentUser.getIdToken());
+        })
+        .mergeMap((token: string) => {
+            return [
+                { type: AuthActions.SIGNUP },
+                { type: AuthActions.SET_TOKEN, payload: token }
+            ]
+        });
+
+    // variable with dollar sign at the end marks an observable
+    constructor(private actions$: Actions) {}
+}

src/app/auth/signup/signup.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
-import { AuthService } from '../auth.service';
+import { Store } from '@ngrx/store';
+
+import * as fromApp from '../../ngrx/app.reducers';
+import * as AuthActions from '../ngrx/auth.actions';
 
 @Component({
   selector: 'app-signup',
@@ -9,7 +12,7 @@ import { AuthService } from '../auth.service';
 })
 export class SignupComponent implements OnInit {
 
-  constructor(private authService: AuthService) { }
+  constructor(private store: Store<fromApp.AppState>) { }
 
   ngOnInit() {
   }
@@ -17,7 +20,7 @@ export class SignupComponent implements OnInit {
   onSignup(form: NgForm) {
     const email = form.value.email;
     const password = form.value.password;
-    this.authService.signupUser(email, password);
+    this.store.dispatch(new AuthActions.TrySignup({username: email, password: password}));
   }
 
 }