added call to retrieve status context

src/app/components/stream/status/status.component.ts

@@ -49,9 +49,9 @@ export class StatusComponent implements OnInit {
     }
 
     openAccount(account: Account): boolean {
-        let accountName = account.acct; 
-        if(!accountName.includes('@'))
-        accountName += `@${account.url.replace('https://', '').split('/')[0]}`;
+        let accountName = account.acct;
+        if (!accountName.includes('@'))
+            accountName += `@${account.url.replace('https://', '').split('/')[0]}`;
 
         this.browseAccountEvent.next(accountName);
         return false;
@@ -77,6 +77,12 @@ export class StatusComponent implements OnInit {
     }
 
     textSelected(): void {
-        this.browseThreadEvent.next(this._statusWrapper.status.uri);
+        const status = this._statusWrapper.status;
+
+        if (status.reblog) {            
+            this.browseThreadEvent.next(status.reblog.uri);
+        } else {
+            this.browseThreadEvent.next(this._statusWrapper.status.uri);
+        }
     }
 }

src/app/components/stream/stream-overlay/stream-overlay.component.html

@@ -12,5 +12,5 @@
     <app-hashtag *ngIf="hashtagElement" [hashtagElement]="hashtagElement" 
         (browseAccountEvent)="browseAccount($event)" 
         (browseHashtagEvent)="browseHashtag($event)"></app-hashtag>
-    <app-thread *ngIf="browseThread"></app-thread>
+    <app-thread *ngIf="browseThread" [currentThread]="thread"></app-thread>
 </div>

src/app/components/stream/thread/thread.component.html

@@ -1,3 +1,5 @@
 <p>
   thread works!
+
+  {{ thread }}
 </p>

src/app/components/stream/thread/thread.component.ts

@@ -1,15 +1,59 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { StatusWrapper } from '../stream.component';
+import { MastodonService } from '../../../services/mastodon.service';
+import { ToolsService } from '../../../services/tools.service';
+import { Status, Results, Context } from '../../../services/models/mastodon.interfaces';
 
 @Component({
-  selector: 'app-thread',
-  templateUrl: './thread.component.html',
-  styleUrls: ['./thread.component.scss']
+    selector: 'app-thread',
+    templateUrl: '../stream-statuses/stream-statuses.component.html',
+    styleUrls: ['../stream-statuses/stream-statuses.component.scss']
 })
 export class ThreadComponent implements OnInit {
+    statuses: StatusWrapper[] = [];
 
-  constructor() { }
+    @Output() browseAccountEvent = new EventEmitter<string>();
+    @Output() browseHashtagEvent = new EventEmitter<string>();
+    @Output() browseThreadEvent = new EventEmitter<string>();
 
-  ngOnInit() {
-  }
+    @Input('currentThread')
+    set currentThread(thread: string) {
+        this.getThread(thread);
+    }
 
+    constructor(
+        private readonly toolsService: ToolsService,
+        private readonly mastodonService: MastodonService) { }
+
+    ngOnInit() {
+    }
+
+    private getThread(thread: string) {
+        this.statuses.length = 0;
+
+        let currentAccount = this.toolsService.getSelectedAccounts()[0];
+
+        this.mastodonService.search(currentAccount, thread, true)
+            .then((result: Results) => {
+                if(result.statuses.length === 1){
+                    const retrievedStatus = result.statuses[0];
+                    this.mastodonService.getStatusContext(currentAccount, retrievedStatus.id)
+                        .then((context: Context) => {
+                            let contextStatuses = [ ...context.ancestors, retrievedStatus, ...context.descendants]
+                            
+                            for (const s of contextStatuses) {
+                                const wrapper = new StatusWrapper(s, currentAccount);
+                                this.statuses.push(wrapper);
+                            }
+                        });
+                } else {
+                    //TODO handle error
+                    console.error('could not retrieve status');
+                }
+            });        
+    }
+
+    onScroll(){
+        //Do nothing
+    }
 }

src/app/services/mastodon.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpHeaders, HttpClient } from '@angular/common/http';
 
 import { ApiRoutes } from './models/api.settings';
-import { Account, Status, Results } from "./models/mastodon.interfaces";
+import { Account, Status, Results, Context } from "./models/mastodon.interfaces";
 import { AccountInfo } from '../states/accounts.state';
 import { StreamTypeEnum } from '../states/streams.state';
 import { stat } from 'fs';
@@ -129,6 +129,14 @@ export class MastodonService {
         return this.httpClient.get<Status[]>(route+params, { headers: headers }).toPromise();
     }
 
+    getStatusContext(account: AccountInfo, targetStatusId: string): Promise<Context>{
+        const params = this.apiRoutes.getStatusContext.replace('{0}', targetStatusId);
+        const route = `https://${account.instance}${params}`;
+
+        const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
+        return this.httpClient.get<Context>(route, { headers: headers }).toPromise();
+    }
+
     searchAccount(account: AccountInfo, query: string, limit: number = 40, following: boolean = false): Promise<Account[]>{
         const route = `https://${account.instance}${this.apiRoutes.searchForAccounts}?q=${query}&limit=${limit}&following=${following}`;
         const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });