From 7c36ce12828ad321bf3a85059965510a469ac542 Mon Sep 17 00:00:00 2001
From: Gergely Polonkai <gergely@polonkai.eu>
Date: Tue, 6 Sep 2016 15:54:03 +0200
Subject: [PATCH] Move to the in-memory web API

This also makes it possible to save data.

Signed-off-by: Gergely Polonkai <gergely@polonkai.eu>
---
 app/app.module.ts              |  6 ++++++
 app/duck-detail.component.html |  1 +
 app/duck-detail.component.ts   |  5 +++++
 app/duck.service.ts            | 29 +++++++++++++++++++++++++++--
 app/in-memory-data.service.ts  | 13 +++++++++++++
 app/mocked-data.ts             |  7 -------
 6 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 app/in-memory-data.service.ts
 delete mode 100644 app/mocked-data.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index ed51bb0..627ef1c 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -1,6 +1,10 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
+import { HttpModule } from "@angular/http";
+
+import { InMemoryWebApiModule } from "angular2-in-memory-web-api";
+import { InMemoryDataService } from "./in-memory-data.service";
 
 import { routing } from "./app.routing";
 
@@ -15,6 +19,8 @@ import { DuckService } from "./duck.service";
     imports: [
         BrowserModule,
         FormsModule,
+        HttpModule,
+        InMemoryWebApiModule.forRoot(InMemoryDataService),
         routing
     ],
     declarations: [
diff --git a/app/duck-detail.component.html b/app/duck-detail.component.html
index 201ab8e..71b5d1e 100644
--- a/app/duck-detail.component.html
+++ b/app/duck-detail.component.html
@@ -7,5 +7,6 @@
         <label>color: </label>
         <input [(ngModel)]="duck.color" placeholder="Color" />
     </div>
+    <button (click)="save()">Save</button>
     <button (click)="goBack()">Back</button>
 </div>
diff --git a/app/duck-detail.component.ts b/app/duck-detail.component.ts
index 9fb700c..b893a3b 100644
--- a/app/duck-detail.component.ts
+++ b/app/duck-detail.component.ts
@@ -26,6 +26,11 @@ export class DuckDetailComponent implements OnInit {
         window.history.back();
     }
 
+    save(): void {
+        this.duckService.update(this.duck)
+            .then(this.goBack);
+    }
+
     @Input()
     duck: Duck;
 }
diff --git a/app/duck.service.ts b/app/duck.service.ts
index b2ce01c..68c4fe8 100644
--- a/app/duck.service.ts
+++ b/app/duck.service.ts
@@ -1,12 +1,37 @@
 import { Injectable } from "@angular/core";
+import { Headers, Http } from "@angular/http";
+
+import "rxjs/add/operator/toPromise";
 
 import { Duck } from "./models";
-import { DUCKS } from "./mocked-data";
 
 @Injectable()
 export class DuckService {
+    private ducksUrl = 'app/ducks';
+    private headers = new Headers({"Content-Type": "application/json"});
+
+    constructor(private http: Http) {}
+
+    private handleError(error: any): Promise<any> {
+        console.error("An error occured", error);
+
+        return Promise.reject(error.message || error);
+    }
+
+    update(duck: Duck): Promise<Duck> {
+        const url = `${this.ducksUrl}/${duck.id}`;
+
+        return this.http.put(url, JSON.stringify(duck), {headers: this.headers})
+                   .toPromise()
+                   .then(() => duck)
+                   .catch(this.handleError);
+    }
+
     getDucks(): Promise<Duck[]> {
-        return Promise.resolve(DUCKS);
+        return this.http.get(this.ducksUrl)
+                   .toPromise()
+                   .then(response => response.json().data as Duck[])
+                   .catch(this.handleError);
     }
 
     getDuck(id: number): Promise<Duck> {
diff --git a/app/in-memory-data.service.ts b/app/in-memory-data.service.ts
new file mode 100644
index 0000000..cfd7a14
--- /dev/null
+++ b/app/in-memory-data.service.ts
@@ -0,0 +1,13 @@
+import { InMemoryDbService } from "angular2-in-memory-web-api";
+
+export class InMemoryDataService implements InMemoryDbService {
+    createDb() {
+        let ducks = [
+            { id: 1, color: 'yellow' },
+            { id: 2, color: 'blue' },
+            { id: 3, color: 'pink' }
+        ];
+
+        return {ducks};
+    }
+}
diff --git a/app/mocked-data.ts b/app/mocked-data.ts
deleted file mode 100644
index 9779587..0000000
--- a/app/mocked-data.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Duck } from "./models";
-
-export const DUCKS: Duck[] = [
-    { id: 1, color: 'yellow' },
-    { id: 2, color: 'blue' },
-    { id: 3, color: 'pink' }
-];