diff --git a/package-lock.json b/package-lock.json index c0a10dd..8598779 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 98c8c36..63f9f38 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cd2ab10..23a79d1 100644 --- a/src/app/app.module.ts +++ b/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] }) diff --git a/src/app/auth/auth.service.ts b/src/app/auth/auth.service.ts index c5df36b..b26fd04 100644 --- a/src/app/auth/auth.service.ts +++ b/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( diff --git a/src/app/auth/ngrx/auth.actions.ts b/src/app/auth/ngrx/auth.actions.ts index 019a88b..de5aa14 100644 --- a/src/app/auth/ngrx/auth.actions.ts +++ b/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; \ No newline at end of file +export type AuthActions = TrySignup | Signup | Signin | Logout | SetToken; \ No newline at end of file diff --git a/src/app/auth/ngrx/auth.effects.ts b/src/app/auth/ngrx/auth.effects.ts new file mode 100644 index 0000000..c74afdf --- /dev/null +++ b/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) {} +} \ No newline at end of file diff --git a/src/app/auth/signup/signup.component.ts b/src/app/auth/signup/signup.component.ts index d33e109..7a6c0fe 100644 --- a/src/app/auth/signup/signup.component.ts +++ b/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) { } 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})); } }