chore(Update): update to alpha.47

.gitignore

@@ -1,2 +1,3 @@
 src/app/*.js
 src/app/*.js.map
+node_modules

index.html

@@ -6,7 +6,7 @@
     <link rel="stylesheet" type="text/css" href="src/style.css" />
     <script src="https://code.angularjs.org/tools/system.js"></script>
 
-    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-alpha.47/angular2.dev.js"></script>
 
     <script src="https://js.pusher.com/3.0/pusher.min.js"></script>
     <script>

package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-alpha.44",
+    "angular2": "2.0.0-alpha.47",
     "systemjs": "0.19.2"
   },
   "devDependencies": {

src/app/app.html

@@ -24,11 +24,11 @@ <h1 class="white light splash-title">
         <div class="channel" *ng-for="#channel of channels">
           <h3 class="white light">
             <img class="twitter-icon" src="src/img/twitter.png" width="30" />
-            Tweets for {{ channel }}
+            Tweets for {{ channel.term }}
           </h3>
           <div id="subscription-controls">
-            <button class="btn-white secondary" (click)="stopSearch(channel)">
-              Stop Stream
+            <button class="btn-white secondary" (click)="toggleSearch(channel)">
+              {{channel.active ? 'Stop' : 'Restart'}} Stream
             </button>
             <button class="btn-white secondary" (click)="clearSearch(channel)">
               Remove Results

src/app/app.ts

@@ -3,40 +3,46 @@ declare var Pusher: any;
 import {
   Component,
   Attribute,
-  bootstrap,
-  FORM_DIRECTIVES,
-  CORE_DIRECTIVES
+  bootstrap
 } from 'angular2/angular2';
 
 import SubscriptionComponent from './subscription';
 
 @Component({
   selector: 'my-app',
   templateUrl: 'src/app/app.html',
-  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, SubscriptionComponent],
+  directives: [SubscriptionComponent],
 })
 class AppComponent {
   private newSearchTerm: string;
   private pusher;
-  private channels: String[];
+  private channels: any[];
 
   constructor() {
     this.pusher = new Pusher('9fd1b33fcb36d968145f');
     this.channels = [];
   }
 
   public newSubscription() {
-    this.channels.push(this.newSearchTerm);
+    this.channels.push({term: this.newSearchTerm, active: true});
     this.newSearchTerm = '';
   }
 
   public clearSearch(channel) {
-    this.channels = this.channels.filter(function(ch) {
-      return ch !== channel;
+    this.channels = this.channels.filter((ch) => {
+      if (ch.term === channel.term) {
+        this.toggleSearch(channel);
+      }
+      return ch.term !== channel.term;
     });
   }
-  public stopSearch(channel) {
-    this.pusher.unsubscribe(btoa(channel));
+  public toggleSearch(channel) {
+    for (let ch of this.channels) {
+      if (ch.term === channel.term) {
+        ch.active = !ch.active;
+        break;
+      }
+    }
   }
 }
 

src/app/subscription.html

@@ -1,4 +1,4 @@
-<ul class="channel-results channel-{{search}}">
+<ul class="channel-results channel-{{search.term}}">
   <li *ng-for="#result of tweets">
     <p class="white">{{ result.tweet.text }}</p>
   </li>

src/app/subscription.ts

@@ -1,48 +1,68 @@
 import {
   Component,
-  Input,
-  FORM_DIRECTIVES,
-  CORE_DIRECTIVES,
-  AfterViewChecked,
-  OnInit,
-  OnDestroy,
+  Input
 } from 'angular2/angular2';
 
 @Component({
   selector: 'subscription',
   templateUrl: 'src/app/subscription.html',
-  inputs: ['search', 'pusher'],
-  directives: [CORE_DIRECTIVES]
+  inputs: ['search', 'pusher']
 })
-export default class SubscriptionComponent implements AfterViewChecked, OnDestroy, OnInit {
-  @Input() search: string;
+export default class SubscriptionComponent {
+  @Input() search: any;
   @Input() pusher;
   public tweets : Object[];
   private channel;
+  private subscribed: boolean = false;
 
-  public onInit() {
+  private ngOnInit() {
     this.subscribeToChannel();
     this.tweets = [];
   }
 
   private subscribeToChannel() {
-    var encoded = btoa(this.search);
-    this.channel = this.pusher.subscribe(encoded);
-    this.channel.bind('new_tweet', this.newTweet.bind(this));
+    this.channel = this.pusher.subscribe(btoa(this.search.term));
+    this.channel.bind('new_tweet', (data) => {
+      this.newTweet(data);
+    });
+    this.subscribed = true;
   }
 
   private newTweet(data: Object) {
     this.tweets.push(data);
   }
+
+  // TODO: bring back when working correctly (see bottom of ngAfterViewChecked)
+  // This should fire anytime bindings are modified from AppComponent but it's not
+  // Don't have time to debug at moment, but fix if you can :)
+  // private ngOnChanges() {
+  //   console.log(this.search);
+  //   if (!this.search.active && this.subscribed) {
+  //     this.ngOnDestroy();
+  //   } else if (this.search.active && !this.subscribed) {
+  //     this.subscribeToChannel();
+  //   }
+  // }
 
-  public onDestroy() {
+  private ngOnDestroy() {
+    this.pusher.unsubscribe(btoa(this.search.term));
     this.channel && this.channel.unbind();
+    this.subscribed = false;
   }
 
-  public afterViewChecked() {
-    var listItem = document.querySelector(".channel-" + this.search);
+  private ngAfterViewChecked() {
+    var listItem = document.querySelector(".channel-" + this.search.term);
     if (listItem) {
       listItem.scrollTop = listItem.scrollHeight;
     }
+
+    // TODO: Remove when ngOnChanges above works properly
+    // Not sure why ngOnChanges is not working right now
+    if (!this.search.active && this.subscribed) {
+      this.ngOnDestroy();
+    } else if (this.search.active && !this.subscribed) {
+      this.subscribeToChannel();
+    }
+
   }
 }