New Http module version working. Adding and saving tasks lists

src/app/app.module.ts

@@ -9,11 +9,12 @@ import { TodosPage } from '../pages/todos/todos';
 import { AddTaskModalPage } from "../pages/add-task-modal/add-task-modal";
 import { ListsPage} from "../pages/lists/lists";
 import { TodoServiceProvider } from '../providers/todo-service/todo-service';
-import { HttpClientModule } from '@angular/common/http';
 import { DoneTodosPipe } from "../pipes/done-todos/done-todos";
 import { UndoneTodosPipe } from "../pipes/undone-todos/undone-todos";
 import { ListServiceProvider } from '../providers/list-service/list-service';
 import { IonicStorageModule } from '@ionic/storage';
+// import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http'
 
 @NgModule({
   declarations: [
@@ -26,6 +27,7 @@ import { IonicStorageModule } from '@ionic/storage';
   ],
   imports: [
     BrowserModule,
+    // HttpModule,
     HttpClientModule,
     IonicModule.forRoot(MyApp),
     IonicStorageModule.forRoot()
@@ -42,8 +44,7 @@ import { IonicStorageModule } from '@ionic/storage';
     SplashScreen,
     TodoServiceProvider,
     ListServiceProvider,
-    {provide: ErrorHandler, useClass: IonicErrorHandler},
-    ListServiceProvider
+    {provide: ErrorHandler, useClass: IonicErrorHandler}
   ]
 })
 export class AppModule {}

src/pages/lists/lists.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
 import { TodosPage} from "../todos/todos";
 import { AlertController} from "ionic-angular";
 
@@ -21,7 +21,8 @@ import { ListModel} from "../../data/list-model";
 export class ListsPage {
 
   constructor(public navCtrl: NavController, public navParams: NavParams,
-              public alertCtrl: AlertController, public listService:ListServiceProvider) {
+              public alertCtrl: AlertController, public listService:ListServiceProvider,
+              private loadingCtrl: LoadingController) {
   }
 
   goToList(list: ListModel):void{
@@ -41,11 +42,20 @@ export class ListsPage {
       buttons: [
         {
           text: 'Cancel',
-          handler: data => {}
+          handler: () => {
+            addListalert.dismiss();
+            return false;//fix alert
+          }
         },
         {
           text: 'Accept',
-          handler: data => {this.addList(data.name)}
+          handler: data => {
+            let navTransition = addListalert.dismiss();
+            navTransition.then(()=> {
+              this.addList(data.name)
+            });
+            return false;//fix alert
+          }
         }
       ]
     });
@@ -54,8 +64,17 @@ export class ListsPage {
   }
 
   addList(name:string):void{
-    let list= this.listService.addList(name);
-    this.listService.saveStorage();
-    this.goToList(list);
+    let loader = this.loadingCtrl.create();
+    loader.present();
+
+    this.listService.addList(name)
+      .subscribe( list => {
+        this.goToList(list);
+        loader.dismiss();
+      },
+        error => {
+          loader.dismiss();
+        });
+
   }
 }

src/providers/list-service/list-service.ts

@@ -1,30 +1,42 @@
-import { HttpClient } from '@angular/common/http';
+// import { Http } from "@angular/http";
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ListModel} from "../../data/list-model";
 import { Storage} from "@ionic/storage";
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/share';
 import {AppSettings} from "../../data/app-settings";
+import {Observable} from "rxjs/Observable";
 
 /*
   Generated class for the ListServiceProvider provider.
 
   See https://angular.io/guide/dependency-injection for more info on providers
   and Angular DI.
 */
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
 @Injectable()
 export class ListServiceProvider {
 
   public list :ListModel[] = [];
 
   constructor(public http: HttpClient, public storage:Storage) {
-    // this.getLists();
-    // this.getFromStorage();
-    this.getFromServer();
+    this.getLists();
+  }
+
+  private getLists(){
+    this.getFromStorage()
+      .then(()=>{this.getFromServer()},
+        ()=>{this.getFromServer()}
+      )
   }
 
-  /*
   public getFromStorage(){
-    this.storage.ready().then( () => {
+    return this.storage.ready().then( () => {
       this.storage.get('list').then( data => {
         let localLists: ListModel[] = [];
         if(data){
@@ -36,7 +48,6 @@ export class ListServiceProvider {
       })
     })
   }
-  */
 
   public saveStorage(){
     this.storage.ready().then( () => {
@@ -45,15 +56,24 @@ export class ListServiceProvider {
   }
 
   public addList(name:string){
-    let newList = new ListModel(name, this.list.length);
-    this.list = [...this.list, newList];
-    return newList;
+
+    let observable = this.postNewListToServer(name);
+
+    observable.subscribe( (list:ListModel)=> {
+      this.list = [...this.list, list];
+      this.saveStorage();
+    }, error => {
+      console.log("Error post list to server", error);
+    });
+
+    return observable;
   }
 
   private getFromServer(){
-    this.http.get(AppSettings.API_BASEURL + '/lists')
+    this.http.get(AppSettings.API_BASEURL + '/lists', httpOptions)
       .map(response => { return JSON.parse(JSON.stringify(response))})
       .map((lists:Object[]) => {
+        console.log(lists);
         return lists.map (item => ListModel.fromJson(item))
       })
       .subscribe(
@@ -66,4 +86,17 @@ export class ListServiceProvider {
         }
       )
   }
+
+  private postNewListToServer(name):Observable<ListModel>{
+    let observable = this.http.post(AppSettings.API_BASEURL+'/lists', {name}, httpOptions)
+                      .share()
+                      .map(response => { return JSON.parse(JSON.stringify(response))})
+                      .map((list) => {
+                        return ListModel.fromJson(list)
+                      });
+
+    observable.subscribe( ()=> {}, ()=> {});
+
+    return observable;
+  }
 }

src/providers/todo-service/todo-service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+// import { Http } from "@angular/http";
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { TodoModel} from "../../data/todo-model";
 import { Storage} from "@ionic/storage";
 import { AppSettings} from "../../data/app-settings";
@@ -9,6 +10,11 @@ import { AppSettings} from "../../data/app-settings";
   See https://angular.io/guide/dependency-injection for more info on providers
   and Angular DI.
 */
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
 @Injectable()
 export class TodoServiceProvider {
 
@@ -19,12 +25,12 @@ export class TodoServiceProvider {
 
 
   loadFromList(id:number):void{
-    // this.getFromStorage(id);
-    this.getFromServer(id);
+    this.getFromStorage(id);
+    // this.getFromServer(id);
   }
 
   private getFromServer(id){
-    this.http.get(AppSettings.API_BASEURL + '/lists/'+id+'/todos')
+    return this.http.get(AppSettings.API_BASEURL + '/lists/'+id+'/todos', httpOptions)
       .map(response => { return JSON.parse(JSON.stringify(response))})
       .map((todos:Object[]) => {
         return todos.map (item => TodoModel.fromJson(item))
@@ -40,9 +46,9 @@ export class TodoServiceProvider {
       )
   }
 
-  /*
+
   private getFromStorage(id:number){
-    this.storage.ready().then( () => {
+    return this.storage.ready().then( () => {
       this.storage.get('list/'+id).then( data => {
         if(!data){
           this.todos = [];
@@ -57,7 +63,7 @@ export class TodoServiceProvider {
 
     })
   }
-  */
+
   public saveStorage(id:number){
     this.storage.ready().then( ()=> {
       this.storage.set(`list/${id}`, this.todos);