Added suggestions fake REST API by json-server && Added asynchronous …

…processes using flow

package.json

@@ -30,6 +30,7 @@
     "mobx-remotedev": "^0.2.8",
     "mobx-state-tree": "^1.3.1",
     "rxjs": "^5.5.2",
+    "setimmediate": "^1.0.5",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {

src/components/wish-list-item/wish-list-item.component.ts

@@ -14,7 +14,7 @@ export class WishListItemComponent implements OnInit, OnChanges {
   cloneItem: any;
 
   @Input('item') set item(item: any) {
-    // console.log(item);
+    // console.log('WishListItemComponent item', item);
     this.wishListItem = item;
     this.cloneItem = clone(item);
   }

src/components/wish-list/wish-list.component.html

@@ -7,12 +7,13 @@
     </mat-select>
   </mat-form-field>
   <div *ngIf="selectedUser">
-    <div class="list" *ngIf="selectedUser.wishList">
+    <div class="list" *ngIf="selectedUser.wishList.items.length != 0">
       <mat-card *ngFor="let item of selectedUser.wishList.items">
           <app-wish-list-item [item]="item"></app-wish-list-item>
       </mat-card>
       <p>Total: {{selectedUser.wishList.getTotalPrice()}} €</p>
     </div>
     <app-wish-list-item-add [list]="selectedUser.wishList"></app-wish-list-item-add>
+    <button mat-button (click)="onClickGetSuggestions()"><mat-icon>lightbulb_outline</mat-icon> Suggestions</button>
   </div>
 </div>

src/components/wish-list/wish-list.component.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
 import { WishList } from '../../models/wishlist.model';
 import { Group } from '../../models/group.model';
 
-import { onSnapshot } from 'mobx-state-tree';
+import { onSnapshot, addMiddleware } from 'mobx-state-tree';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17,12 +17,13 @@ export class WishListComponent implements OnInit {
   selectedUser: any;
   group: any;
 
-  constructor() {
+  constructor(private ref: ChangeDetectorRef) {
     console.log('Hello WishListComponent');
     this.selectedUser = null;
   }
 
   ngOnInit() {
+    console.log('ngOninit WishListComponent');
 
     const initialState = {
       /*
@@ -97,7 +98,7 @@ export class WishListComponent implements OnInit {
       const json = JSON.parse(localStorage.getItem('wishlistapp'));
       // if (WishList.is(json)) {
       if (Group.is(json)) {
-        console.log(json);
+        // console.log(json);
         // initialState.items = json.items;
         initialState.users = json.users;
       }
@@ -108,6 +109,11 @@ export class WishListComponent implements OnInit {
       users: initialState.users
     });
 
+    addMiddleware(this.group, (call, next) => {
+      console.log(`[${call.type}] ${call.name}`);
+      return next(call);
+    });
+
     // onSnapshot(this.wishList, snapshot => {
     onSnapshot(this.group, snapshot => {
       console.log('onSnapshot', snapshot);
@@ -131,4 +137,13 @@ export class WishListComponent implements OnInit {
     this.selectedUser = user;
   }
 
+  onClickGetSuggestions() {
+    console.log('onClickGetSuggestions');
+    this.selectedUser.getSuggestions();
+    setInterval(() => {
+      // The following is required, otherwise the view will not be updated.
+      this.ref.markForCheck();
+    }, 500);
+  }
+
 }

src/json-server/db.json

@@ -0,0 +1,26 @@
+{
+    "suggestions_f": [
+        {
+            "name": "The Notebook",
+            "price": 10.31,
+            "image": "https://hips.hearstapps.com/sev.h-cdn.co/assets/15/31/1438124471-the-notebook-2004-copy.jpg" 
+        },
+        {
+            "name": "LEGO Mindstorms EV3'",
+            "price": 349.95,
+            "image": "https://prodimage.images-bn.com/pimages/0673419193054_p0_v1_s550x406.jpg"
+        }
+    ],
+    "suggestions_m": [
+        {
+          "name": "Machine Gun Preacher",
+          "price": 7.35,
+          "image": "http://www.richardcrouse.ca//wp-content/uploads/2013/09/machine-gun-preacher-poster.jpeg"
+        },
+        {
+            "name": "LEGO Mindstorms EV3'",
+            "price": 349.95,
+            "image": "https://prodimage.images-bn.com/pimages/0673419193054_p0_v1_s550x406.jpg"
+        }
+    ]
+}

src/models/group.model.ts

@@ -1,4 +1,4 @@
-import { types } from 'mobx-state-tree';
+import { types, flow } from 'mobx-state-tree';
 
 import { WishList } from './wishlist.model';
 
@@ -7,7 +7,14 @@ export const User = types.model({
     name: types.string,
     gender: types.enumeration('gender', ['m', 'f']),
     wishList: types.optional(WishList, {})
-});
+})
+.actions(self => ({
+    getSuggestions: flow(function*() {
+        const response = yield window.fetch(`http://localhost:3001/suggestions_${self.gender}`);
+        const suggestions = yield response.json();
+        self.wishList.items.push(...suggestions);
+    })
+}));
 
 export const Group = types.model({
     users: types.map(User)