added conversation view

src/app/app.module.ts

@@ -7,7 +7,7 @@ import { HomePage } from '../pages/home/home';
 import { ListPage } from '../pages/list/list';
 import { LoginPage } from '../pages/login/login';
 import { StreamPage, NewPostModal } from '../pages/stream/stream';
-import { PostDetailsPage } from '../pages/post-details/post-details';
+import { ThreadPage } from '../pages/thread/thread';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
@@ -21,7 +21,7 @@ import { TimeagoPipe } from '../pipes/timeago/timeago';
     ListPage,
     LoginPage,
     StreamPage,
-    PostDetailsPage,
+    ThreadPage,
     TimeagoPipe,
     NewPostModal
   ],
@@ -37,7 +37,7 @@ import { TimeagoPipe } from '../pipes/timeago/timeago';
     ListPage,
     LoginPage,
     StreamPage,
-    PostDetailsPage,
+    ThreadPage,
     NewPostModal
   ],
   providers: [

src/pages/stream/stream.html

@@ -69,7 +69,7 @@
           </button>
         </ion-col>
         <ion-col>
-          <button ion-button icon-left clear small block>
+          <button ion-button icon-left clear small block (click)="fetchThread(post.thread_id)">
             <ion-icon name="chatboxes"></ion-icon>
             <div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div>
           </button>

src/pages/stream/stream.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { ViewController, NavController, NavParams, ModalController } from 'ionic-angular';
-import { PostDetailsPage } from '../post-details/post-details';
+import { ThreadPage } from '../thread/thread';
 
 import * as pnut from 'pnut-butter';
 
@@ -79,8 +79,12 @@ export class StreamPage {
     });
   }
 
-  showPostDetails(postData) {
-   this.navCtrl.push(PostDetailsPage, {post: postData});
+  fetchThread(threadid) {
+    pnut.thread(threadid).then(res => {
+      this.navCtrl.push(ThreadPage, {posts: res.data});
+    }).catch(err => {
+      console.log(err);
+    });
   }
 
   bookmark(postid, bookmarked) {

src/pages/thread/thread.html

@@ -0,0 +1,82 @@
+<!--
+  Generated template for the ThreadPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Conversation</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <ion-list>
+    <ion-card *ngFor="let post of posts">
+      <ion-item>
+        <ion-avatar item-start>
+          <img src="{{ post.user.content.avatar_image.link }}">
+        </ion-avatar>
+        <h2>{{ post.user.name }}</h2>
+        <p>@{{ post.user.username }}</p>
+        <ion-note item-end right>
+          {{ post.created_at | timeago }}<br/>
+          {{ post.source.name }}
+        </ion-note>
+      </ion-item>
+      <ion-card-content>
+        <p>{{ post.is_deleted ? '{post deleted}' : post.content.text }}</p>
+      </ion-card-content>
+      <div *ngIf="post.raw">
+        <div *ngFor="let r of post.raw">
+          <div *ngIf="r.type == 'io.pnut.core.oembed'">
+            <img src="{{ r.value.url }}">
+          </div>
+        </div>
+      </div>
+      <ion-row>
+        <ion-col>
+          <button ion-button icon-left clear small block (click)="showReplyPost(post)">
+            <ion-icon name="text"></ion-icon>
+          </button>
+        </ion-col>
+        <ion-col>
+          <button ion-button icon-left clear small block (click)="showQuotedPost(post)">
+            <ion-icon name="quote"></ion-icon>
+          </button>
+        </ion-col>
+        <ion-col>
+          <button ion-button icon-left clear small block (click)="bookmark(post.id, post.you_bookmarked)">
+            <ion-icon name="star"></ion-icon>
+            <div *ngIf="post.counts.bookmarks > 0">{{ post.counts.bookmarks }}</div>
+          </button>
+        </ion-col>
+        <ion-col>
+          <button ion-button icon-left clear small block (click)="repost(post.id, post.you_reposted)">
+            <ion-icon name="repeat"></ion-icon>
+            <div *ngIf="post.counts.reposts > 0">{{ post.counts.reposts }}</div>
+          </button>
+        </ion-col>
+<!--         <ion-col>
+          <button ion-button icon-left clear small block>
+            <ion-icon name="chatboxes"></ion-icon>
+            <div *ngIf="post.counts.replies > 0">{{ post.counts.replies }}</div>
+          </button>
+        </ion-col> -->
+<!--         <ion-col>
+          <button ion-button icon-left clear small block>
+            <ion-icon name="more"></ion-icon>
+          </button>
+        </ion-col> -->
+      </ion-row>
+    </ion-card>
+  </ion-list>
+
+</ion-content>

src/pages/thread/thread.scss

@@ -0,0 +1,3 @@
+page-thread {
+
+}

src/pages/thread/thread.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { NavController, NavParams, ModalController } from 'ionic-angular';
+import { NewPostModal } from '../stream/stream';
+
+// import * as pnut from 'pnut-butter';
+
+/**
+ * Generated class for the ThreadPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@Component({
+  selector: 'page-thread',
+  templateUrl: 'thread.html',
+})
+export class ThreadPage {
+
+  title: string;
+  posts: Array<Object> = [];
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
+    this.posts = this.navParams.data.posts;
+  }
+
+  showReplyPost(postData) {
+    let newPostModal = this.modalCtrl.create(NewPostModal, {type: 'reply', post: postData});
+    newPostModal.present();
+  }
+
+  showQuotedPost(postData) {
+    console.log(postData);
+    let newPostModal = this.modalCtrl.create(NewPostModal, {type: 'quote', post: postData});
+    newPostModal.present();
+  }
+
+}