move match details to its own component

app/shared/services/config.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ConfigService {
+    
+    _apiURI : string;
+
+    constructor() {
+        this._apiURI = 'http://localhost:5000/api/';
+     }
+
+     getApiURI() {
+         return this._apiURI;
+     }
+
+     getApiHost() {
+         return this._apiURI.replace('api/','');
+     }
+}

app/shared/services/data.service.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { Http, Response, Headers } from '@angular/http';
+//Grab everything with import 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
+import {Observer} from 'rxjs/Observer';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+
+import { Match } from '../interfaces';
+import { ConfigService } from './config.service';
+
+@Injectable()
+export class DataService {
+
+    _baseUrl: string = '';
+
+    constructor(private http: Http,
+        private configService: ConfigService) {
+        this._baseUrl = configService.getApiURI();
+    }
+
+    getMatches(): Observable<Match[]> {
+        return this.http.get(this._baseUrl + 'matches')
+            .map(this.extractData)
+            .catch(this.handleError);
+    }
+
+    private extractData(res: Response) {
+        let body = res.json();
+        return body || {};
+    }
+
+    private handleError(error: any) {
+        // In a real world app, we might use a remote logging infrastructure
+        // We'd also dig deeper into the error to get a better message
+        let errMsg = (error.message) ? error.message :
+            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
+        console.error(errMsg); // log to console instead
+        return Observable.throw(errMsg);
+    }
+}

app/shared/services/feed.service.ts

@@ -0,0 +1,90 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+import { Observable } from "rxjs/Observable";
+import { Subject } from "rxjs/Subject";
+
+import { FeedSignalR, FeedProxy, FeedClient, ConnectionState } from '../interfaces';
+
+@Injectable()
+export class FeedService {
+
+    currentState = ConnectionState.Disconnected;
+    connectionState: Observable<ConnectionState>;
+    userConnected: Observable<any>;
+    messageReceived: Observable<string>;
+
+    private connectionStateSubject = new Subject<ConnectionState>();
+    private userConnectedSubject = new Subject<any>();
+    private messageReceivedSubject = new Subject<string>();
+
+    constructor(private http: Http) {
+        this.connectionState = this.connectionStateSubject.asObservable();
+        this.userConnected = this.userConnectedSubject.asObservable();
+        this.messageReceived = this.messageReceivedSubject.asObservable();
+    }
+
+    start(debug: boolean): Observable<ConnectionState> {
+        // only for debug
+        $.connection.hub.logging = debug;
+        // get the signalR hub named 'broadcaster'
+        let connection = <FeedSignalR>$.connection;
+        let feedHub = connection.broadcaster;
+
+        /**
+         * @desc callback when a new user connect to the chat
+         * @param User user, the connected user
+       */
+        feedHub.client.userConnected = user => this.onUserConnected(user);
+
+        /**
+          * @desc callback when a message is received
+          * @param String to, the conversation id
+          * @param Message data, the message
+        */
+        feedHub.client.messageReceived = message => this.onMessageReceived(message);
+
+        if (debug) {
+            // for debug only, callback on connection state change
+            $.connection.hub.stateChanged(change => {
+                let oldState: string,
+                    newState: string;
+
+                for (var state in $.signalR.connectionState) {
+                    if ($.signalR.connectionState[state] === change.oldState) {
+                        oldState = state;
+                    }
+                    if ($.signalR.connectionState[state] === change.newState) {
+                        newState = state;
+                    }
+                }
+
+                console.log("Feed Hub state changed from " + oldState + " to " + newState);
+            });
+        }
+
+        // start the connection
+        $.connection.hub.start()
+            .done(response => this.setConnectionState(ConnectionState.Connected))
+            .fail(error => this.connectionStateSubject.error(error));
+
+        return this.connectionState;
+    }
+
+    private setConnectionState(connectionState: ConnectionState) {
+        console.log('connection state changed to: ' + connectionState);
+        this.currentState = connectionState;
+        this.connectionStateSubject.next(connectionState);
+    }
+
+    private onUserConnected(user: any) {
+        console.log("Chat Hub new user connected: " + user);
+        this.userConnectedSubject.next(user);
+    }
+
+    private onMessageReceived(message: string) {
+        console.log(message);
+        this.messageReceivedSubject.next(message);
+    }
+}