From f690da083ecaea69c35aa8060841c6c12f7712af Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Thu, 13 Jul 2017 18:34:57 +0300
Subject: [PATCH] refactor(services): add use of observables

---
 src/app/@core/data/users.service.ts           | 14 ++---
 .../components/header/header.component.ts     | 12 +++--
 .../dashboard/contacts/contacts.component.ts  | 52 +++++++++++--------
 3 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/app/@core/data/users.service.ts b/src/app/@core/data/users.service.ts
index 451aedb3..746ae406 100644
--- a/src/app/@core/data/users.service.ts
+++ b/src/app/@core/data/users.service.ts
@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
 
 let counter = 0;
 
@@ -20,16 +22,16 @@ export class UserService {
     // this.userArray = Object.values(this.users);
   }
 
-  getUsers() {
-    return this.users;
+  getUsers(): Observable<any> {
+    return Observable.of(this.users);
   }
 
-  getUserArray() {
-    return this.userArray;
+  getUserArray(): Observable<any[]> {
+    return Observable.of(this.userArray);
   }
 
-  getUser() {
+  getUser(): Observable<any> {
     counter = (counter + 1) % this.userArray.length;
-    return this.userArray[counter];
+    return Observable.of(this.userArray[counter]);
   }
 }
diff --git a/src/app/@theme/components/header/header.component.ts b/src/app/@theme/components/header/header.component.ts
index b3540146..ea6ef2bf 100644
--- a/src/app/@theme/components/header/header.component.ts
+++ b/src/app/@theme/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { NgaSidebarService, NgaMenuService } from '@akveo/nga-theme';
 import { NgaThemeService } from '@akveo/nga-theme/services/theme.service';
@@ -23,13 +23,13 @@ import { UserService } from '../../../@core/data/users.service';
       <nga-action icon="ion-ios-email-outline"></nga-action>
       <nga-action disabled icon="ion-ios-bell-outline"></nga-action>
       <nga-action>
-        <nga-user [menu]="userMenu" [name]="user.name" [picture]="user.picture"></nga-user>
+        <nga-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nga-user>
       </nga-action>
       <nga-action icon="ion-ios-gear-outline"></nga-action>
     </nga-actions>
   `,
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
 
   user: any;
 
@@ -46,7 +46,11 @@ export class HeaderComponent {
               private menuService: NgaMenuService,
               private themeService: NgaThemeService,
               private userService: UserService) {
-    this.user = this.userService.getUsers().nick;
+  }
+
+  ngOnInit() {
+    this.userService.getUsers()
+      .subscribe((users: any) => this.user = users.nick);
   }
 
   toggleSidebar(): boolean {
diff --git a/src/app/pages/dashboard/contacts/contacts.component.ts b/src/app/pages/dashboard/contacts/contacts.component.ts
index 2aad6c37..5ca6434e 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.ts
+++ b/src/app/pages/dashboard/contacts/contacts.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { UserService } from '../../../@core/data/users.service';
 
@@ -7,33 +7,39 @@ import { UserService } from '../../../@core/data/users.service';
   styleUrls: ['./contacts.component.scss'],
   templateUrl: './contacts.component.html',
 })
-export class ContactsComponent {
+export class ContactsComponent implements OnInit {
 
   contacts: any[];
 
   recent: any[];
 
   constructor(private userService: UserService) {
-    const users = this.userService.getUsers();
-
-    this.contacts = [
-      { user: users.nick, type: 'mobile' },
-      { user: users.eva, type: 'home' },
-      { user: users.jack, type: 'mobile' },
-      { user: users.lee, type: 'mobile' },
-      { user: users.alan, type: 'home' },
-      { user: users.kate, type: 'work' },
-    ];
-
-    this.recent = [
-      { user: users.alan, type: 'home', time: '9:12 pm' },
-      { user: users.eva, type: 'home', time: '7:45 pm' },
-      { user: users.nick, type: 'mobile', time: '5:29 pm' },
-      { user: users.lee, type: 'mobile', time: '11:24 am' },
-      { user: users.jack, type: 'mobile', time: '10:45 am' },
-      { user: users.kate, type: 'work', time: '9:42 am' },
-      { user: users.kate, type: 'work', time: '9:31 am' },
-      { user: users.jack, type: 'mobile', time: '8:01 am' },
-    ];
   }
+
+  ngOnInit() {
+
+    this.userService.getUsers()
+      .subscribe((users: any) => {
+        this.contacts = [
+          {user: users.nick, type: 'mobile'},
+          {user: users.eva, type: 'home'},
+          {user: users.jack, type: 'mobile'},
+          {user: users.lee, type: 'mobile'},
+          {user: users.alan, type: 'home'},
+          {user: users.kate, type: 'work'},
+        ];
+
+        this.recent = [
+          {user: users.alan, type: 'home', time: '9:12 pm'},
+          {user: users.eva, type: 'home', time: '7:45 pm'},
+          {user: users.nick, type: 'mobile', time: '5:29 pm'},
+          {user: users.lee, type: 'mobile', time: '11:24 am'},
+          {user: users.jack, type: 'mobile', time: '10:45 am'},
+          {user: users.kate, type: 'work', time: '9:42 am'},
+          {user: users.kate, type: 'work', time: '9:31 am'},
+          {user: users.jack, type: 'mobile', time: '8:01 am'},
+        ];
+      });
+  }
+
 }