feat: use the new single-tweet component to fetch and display a singl…

…e tweet

src/app/app.module.ts

@@ -24,7 +24,7 @@ const routes: Routes = [
       },
       {
         path: 'tweet/:id',
-        component: TimelineComponent,
+        component: SingleTweetComponent,
       },
     ],
   },

src/app/single-tweet/single-tweet.component.html

@@ -1,3 +1 @@
-<p>
-  single-tweet works!
-</p>
+<app-tweet [tweet]="tweet" [loading]="loading"></app-tweet>

src/app/single-tweet/single-tweet.component.spec.ts

@@ -1,5 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { AppModule } from '../app.module';
 import { SingleTweetComponent } from './single-tweet.component';
 
 describe('SingleTweetComponent', () => {
@@ -8,7 +9,7 @@ describe('SingleTweetComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SingleTweetComponent ]
+      imports: [AppModule],
     })
     .compileComponents();
   }));

src/app/single-tweet/single-tweet.component.ts

@@ -1,15 +1,41 @@
-import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
+import { TwitterService } from '../twitter.service';
 
 @Component({
   selector: 'app-single-tweet',
   templateUrl: './single-tweet.component.html',
   styleUrls: ['./single-tweet.component.css']
 })
-export class SingleTweetComponent implements OnInit {
+export class SingleTweetComponent implements OnInit, OnDestroy {
+  private paramsSubscription: Subscription;
+  private loading: boolean = false;
+  private tweet: Tweet;
 
-  constructor() { }
+  constructor(
+    private route: ActivatedRoute,
+    private service: TwitterService,
+  ) {}
 
   ngOnInit() {
+    this.paramsSubscription = this.route.params.subscribe(({ id }) => this.loadTweet(id));
+  }
+
+  ngOnDestroy() {
+    this.paramsSubscription.unsubscribe();
   }
 
+  private loadTweet(id: string): void {
+    this.loading = true;
+
+    this.service
+      .getTweet(id)
+      .subscribe(
+        tweet => this.tweet = tweet,
+        () => {},
+        () => this.loading = false,
+      );
+  }
 }