24-342 Storing recipes via ngrx

src/app/core/header/header.component.ts

@@ -22,11 +22,7 @@ export class HeaderComponent implements OnInit {
     }
 
     onSaveData() {
-        this.dataStorageService.storeRecipes().subscribe(
-            response => {
-                // console.log(response);
-            }
-        );
+        this.store.dispatch(new RecipeActions.StoreRecipes());
     }
 
     onFetchData() {

src/app/recipes/ngrx/recipe.effects.ts

@@ -2,15 +2,22 @@ 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/withLatestFrom';
 import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http';
+import { Store } from "@ngrx/store";
 
 import * as RecipeActions from '../ngrx/recipe.actions';
 import { Recipe } from "../recipe.model";
+import * as fromRecipe from './recipe.reducers';
 
 @Injectable()
 export class RecipeEffects {
     readonly baseUrl: string = 'https://my-recipe-book-cb837.firebaseio.com/';
 
+    constructor(private actions$: Actions,
+        private httpClient: HttpClient,
+        private store: Store<fromRecipe.FeatureState>) {}
+
     @Effect()
     recipeFetch = this.actions$.ofType(RecipeActions.FETCH_RECIPES)
         .switchMap((action: RecipeActions.FetchRecipes) => {
@@ -23,6 +30,10 @@ export class RecipeEffects {
             };
         });
 
-    constructor(private actions$: Actions,
-                private httpClient: HttpClient) {}
+    @Effect({dispatch: false})
+    recipeStore = this.actions$.ofType(RecipeActions.STORE_RECIPES)
+        .withLatestFrom(this.store.select('recipes'))
+        .switchMap(([action, state]) => {
+            return this.httpClient.put(this.baseUrl + 'recipes.json', state.recipes);
+        });
 }

src/app/recipes/ngrx/recipe.reducers.ts

@@ -12,7 +12,7 @@ export interface State {
 }
 
 const initialState: State = {
-    recipes: [new Recipe("Foo", "Bar", "image.jpg", [])]
+    recipes: []
 };
 
 export function recipeReducer(state = initialState, action: RecipeActions.RecipeActions) {

src/app/recipes/recipe-detail/recipe-detail.component.html

@@ -35,7 +35,7 @@
       <li
         class="list-group-item"
         *ngFor="let ingredient of (recipeState | async).recipes[id].ingredients">
-        {{ (recipeState | async).recipes[id].name }} - {{ (recipeState | async).recipes[id].amount }}
+        {{ ingredient.name }} - {{ ingredient.amount }}
       </li>
     </ul>
   </div>

src/app/shared/logging.interceptor.ts

@@ -4,10 +4,10 @@ import 'rxjs/add/operator/do';
 
 export class LoggingInterceptor implements HttpInterceptor {
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        // do without consuming it!
+        // do() without consuming it!
         return next.handle(req).do(
             event => {
-                console.log('Logging interceptor', event);
+                // console.log('Logging interceptor', event);
             }
         )
     }