implementing contacts component

src/chatle/Views/Home/Index.cshtml

@@ -50,9 +50,7 @@
 @section scripts
 {
 	<environment names="Development">
-		<script src="~/lib/knockout/dist/knockout.js"></script>
 		<script src="~/lib/signalr/jquery.signalR.js"></script>
-		<script src="~/js/chat.js"></script>
 
         <script src="~/lib/core-js/client/shim.js"></script>
         <script src="~/lib/reflect-metadata/Reflect.js"></script>
@@ -62,16 +60,10 @@
         <script asp-src-include="~/js/app/**/*.js" asp-src-exclude="~/js/app/*.min.js"></script>
 	</environment>
 	<environment names="Staging,Production">
-		<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js"
-				asp-fallback-src="~/lib/knockout/dist/knockout.js"
-				asp-fallback-test="ko">
-		</script>
 		<script src="http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js"
 				asp-fallback.src="~/lib/signalr/jquery.signalR.min.js"
 				asp-fallback-test="window.jQuery && window.jQuery.connection">
 		</script>
-
-		<script src="~/js/chat.min.js"></script>	
         <script src="~/lib/reflect-metadata/Reflect.js"></script>
         <script src="~/lib/systemjs/dist/system.js"></script>
         <script src="~/lib/zone.js/dist/zone.min.js"></script>

src/chatle/app/app.component.ts

@@ -1,6 +1,26 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { ChatService, ConnectionState} from './shared/chat.service'
+
 @Component({
   selector: 'chatle',
-  template: '<h1>chatle main Component</h1>'
+  template: `<h1>chatle main Component</h1>
+    <span>connection state: {{connectionState}}</span>
+    <contacts></contacts>
+  `,
+  providers: [ChatService]
 })
-export class AppComponent { }
+export class AppComponent implements OnInit{
+
+  connectionState: ConnectionState;
+
+  constructor(private service: ChatService) { 
+    this.connectionState = service.currentState;
+  }
+
+  ngOnInit() {
+    this.service.start(true)
+      .toPromise()
+      .then(connectionState => this.connectionState = connectionState);
+  }
+}

src/chatle/app/contacts/contact.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
+
 @Component({
   selector: 'contact',
   template: '<h1>Contact</h1>'
 })
+
 export class ContactComponent { }

src/chatle/app/contacts/contacts.component.ts

@@ -1,6 +1,44 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { ChatService, ConnectionState } from '../shared/chat.service'
+import { User } from '../shared/user'
+
 @Component({
   selector: 'contacts',
-  template: '<h1>Contacts</h1>'
+  template: `<h1>Contacts</h1>
+    <ul>
+      <li *ngFor="let user of users">
+        <span>{{user.id}}</span> {{user.name}}
+      </li>
+    </ul>`,
+  providers: [ChatService]
 })
-export class ContactsComponent { }
+export class ContactsComponent implements OnInit 
+{
+  users: User[];
+  error: any;
+
+  constructor(private service: ChatService) { }
+
+  ngOnInit() {
+    if (this.service.currentState == ConnectionState.Connected) {
+      this.getUsers();
+    }
+
+    this.service.connectionState
+      .toPromise()
+      .then(connectionState => {
+        if (connectionState === ConnectionState.Connected) {
+          this.getUsers();
+        }
+      })
+      .catch(error => this.error = error);
+  }
+
+  private getUsers() {
+    this.service.getUsers()
+      .toPromise()
+      .then(users => this.users = users)
+      .catch(error => this.error = error);
+  }
+}

src/chatle/app/shared/chat.service.ts

@@ -34,19 +34,21 @@ export enum ConnectionState {
 @Injectable()
 export class ChatService {
 
+    currentState = ConnectionState.Disconnected;
     connectionState: Observable<ConnectionState>;
     userConnected: Observable<User>;
     userDiscconnected: Observable<string>;
     messageReceived: Observable<Message>;
     joinConversation: Observable<Conversation>;
 
-    private connectionStateSubject: Subject<ConnectionState>;
-    private userConnectedSubject: Subject<User>;
-    private userDisconnectedSubject: Subject<string>;
-    private messageReceivedSubject: Subject<Message>;
-    private joinConversationSubject: Subject<Conversation>;
-
-    constructor(private settings: Settings, private http: Http) {
+    private connectionStateSubject = new Subject<ConnectionState>();
+    private userConnectedSubject = new Subject<User>();
+    private userDisconnectedSubject = new Subject<string>();
+    private messageReceivedSubject = new Subject<Message>();
+    private joinConversationSubject = new Subject<Conversation>();
+    private settings = new Settings();
+
+    constructor(private http: Http) {
         this.connectionState = this.connectionStateSubject.asObservable();
         this.messageReceived = this.messageReceivedSubject.asObservable();
         this.userConnected = this.userConnectedSubject.asObservable();
@@ -107,10 +109,10 @@ export class ChatService {
         $.connection.hub.error(this.onError);
         // callback on connection disconnect
         $.connection.hub.disconnected(this.onDisconnected);
-
+    
         // start the connection
         $.connection.hub.start()
-            .done(response => this.connectionStateSubject.next(ConnectionState.Connected))
+            .done(response => this.setConnectionState(ConnectionState.Connected))
             .fail(error => this.connectionStateSubject.error(error));
 
         return this.connectionState;
@@ -123,17 +125,17 @@ export class ChatService {
             to: to.id,
             message: message
         }).toPromise()
-        .then(response => {
-            let conversation = new Conversation();
-            let data = response.json();
-            conversation.id = data.id;
-            conversation.messages.unshift(message);
-            conversation.attendees.unshift(to);
-            conversationSubjet.next(conversation);
-        })
-        .catch(error => {
-            conversationSubjet.error(error);
-        });
+            .then(response => {
+                let conversation = new Conversation();
+                let data = response.json();
+                conversation.id = data.id;
+                conversation.messages.unshift(message);
+                conversation.attendees.unshift(to);
+                conversationSubjet.next(conversation);
+            })
+            .catch(error => {
+                conversationSubjet.error(error);
+            });
 
         return conversationSubjet.asObservable();
     } 
@@ -142,27 +144,64 @@ export class ChatService {
         let messageSubject = new Subject<Message>();
 
         this.http.post(this.settings.chatAPI, message)
-        .toPromise()
-        .then(response => {
-            messageSubject.next(message);
-        })
-        .catch(error => {
-            messageSubject.error(error);
-        });
+            .toPromise()
+            .then(response => {
+                messageSubject.next(message);
+            })
+            .catch(error => {
+                messageSubject.error(error);
+            });
 
         return  messageSubject.asObservable();
     }
 
+    getUsers(): Observable<User[]> {
+        let subject = new Subject<User[]>();
+
+        this.http.get(this.settings.userAPI)
+            .toPromise()
+            .then(response => {
+                var data = response.json();
+                if (data && data.users) {
+                    subject.next(data.users as User[]);
+                }
+            })
+            .catch(error => subject.error(error));
+
+        return subject.asObservable();
+    }
+
+    getConversations(): Observable<Conversation[]> {
+        let subject = new Subject<Conversation[]>();
+
+        this.http.get(this.settings.chatAPI)
+            .toPromise()
+            .then(response => {
+                var data = response.json();
+                if (data) {
+                    subject.next(data as Conversation[]);
+                }
+            })
+            .catch(error => subject.error(error));
+
+        return subject.asObservable();
+    }
+
+    private setConnectionState(connectionState: ConnectionState) {
+        this.currentState = connectionState;
+        this.connectionStateSubject.next(connectionState);
+    }
+
     private onReconnected() {
-        this.connectionStateSubject.next(ConnectionState.Connected);
+        this.setConnectionState(ConnectionState.Connected);
     }
 
     private onDisconnected() {
-        this.connectionStateSubject.next(ConnectionState.Disconnected);
+        this.setConnectionState(ConnectionState.Disconnected);
     }
 
     private onError() {
-        this.connectionStateSubject.error(ConnectionState.Error);
+        this.setConnectionState(ConnectionState.Error);
     }
 
     private onUserConnected(user: User) {
@@ -182,5 +221,4 @@ export class ChatService {
     private onJoinConversation(conversation: Conversation) {
         this.joinConversationSubject.next(conversation);
     }
-
 }

src/chatle/app/shared/settings.ts

@@ -2,8 +2,8 @@
 
 @Injectable()
 export class Settings {
-    userName: string;
-    userAPI: string;
-    convAPI: string;
-    chatAPI: string;
+    userName = 'test';
+    userAPI =  '/api/users';
+    convAPI = '/api/chat/conv';
+    chatAPI =  '/api/chat';
 }