19-246 Adding backend store and fetch

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 
 import { AppComponent } from './app.component';
@@ -18,6 +19,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
 import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
 import { RecipeService } from './recipes/recipe.service';
+import { DataStorageService } from './shared/data-storage.service';
 
 
 @NgModule({
@@ -38,10 +40,11 @@ import { RecipeService } from './recipes/recipe.service';
     BrowserModule,
     FormsModule,
     ReactiveFormsModule,
+    HttpClientModule,
     HttpModule,
     AppRoutingModule
   ],
-  providers: [ShoppingListService, RecipeService],
+  providers: [ShoppingListService, RecipeService, DataStorageService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/header/header.component.html

@@ -13,8 +13,8 @@
                 <li class="dropdown" appDropdown>
                     <a style="cursor: pointer;" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
                     <ul class="dropdown-menu">
-                        <li><a style="cursor: pointer;">Save</a></li>
-                        <li><a style="cursor: pointer;">Fetch</a></li>
+                        <li><a style="cursor: pointer;" (click)="onSaveData()">Save</a></li>
+                        <li><a style="cursor: pointer;" (click)="onFetchData()">Fetch</a></li>
                     </ul>
                 </li>
             </ul>

src/app/header/header.component.ts

@@ -1,8 +1,23 @@
 import { Component } from "@angular/core";
+import { DataStorageService } from "../shared/data-storage.service";
 
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html'
 })
 export class HeaderComponent {
+
+    constructor(private dataStorageService: DataStorageService) {}
+
+    onSaveData() {
+        this.dataStorageService.storeRecipes().subscribe(
+            response => {
+                console.log(response);
+            }
+        );
+    }
+
+    onFetchData() {
+        this.dataStorageService.fetchRecipes();
+    }
 }

src/app/recipes/recipe.service.ts

@@ -3,6 +3,7 @@ import { EventEmitter, Injectable } from "@angular/core";
 import { Ingredient } from "../shared/ingredient.model";
 import { ShoppingListService } from "../shopping-list/shopping-list.service";
 import { Subject } from "rxjs/Subject";
+import { nextTick } from "q";
 
 @Injectable()
 export class RecipeService {
@@ -30,6 +31,11 @@ export class RecipeService {
 
     constructor(private shoppingListService: ShoppingListService) { }
 
+    replaceRecipes(recipes: Recipe[]) {
+        this.recipes = recipes;
+        this.recipesChanged.next(this.recipes.slice());
+    }
+
     getRecipes() {
         return this.recipes.slice();
     }

src/app/shared/data-storage.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+
+import { RecipeService } from '../recipes/recipe.service';
+import { Recipe } from '../recipes/recipe.model';
+
+@Injectable()
+export class DataStorageService {
+    readonly baseUrl: string = 'https://my-recipe-book-cb837.firebaseio.com/';
+
+    constructor(private httpClient: HttpClient, private recipeService: RecipeService) {}
+
+    storeRecipes() {
+        return this.httpClient.put(this.baseUrl + 'recipes.json', this.recipeService.getRecipes());
+    }
+
+    fetchRecipes() {
+        this.httpClient.get<Recipe[]>(this.baseUrl + 'recipes.json').subscribe(
+            recipes => {
+                this.recipeService.replaceRecipes(recipes);
+            }
+        )
+    }
+}