add posts and bookmarks to profile page

src/components/post/post.ts

@@ -45,7 +45,7 @@ export class PostComponent {
   }
 
   showProfile(user) {
-    this.navCtrl.push(ProfilePage, {user: user});
+    this.navCtrl.push(ProfilePage, {user: user, me: this.myUsername});
   }
 
   showReplyPost(postData, repType) {

src/pages/profile/profile.html

@@ -13,7 +13,7 @@
 </ion-header>
 
 
-<ion-content padding>
+<ion-content>
 
   <img src="{{ user.content.cover_image.link }}">
 
@@ -26,25 +26,53 @@
     <button ion-button item-end disabled>{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
   </ion-item>
 
-  <p><div [innerHTML]="user.content.html | parser"></div>
+  <div padding [innerHTML]="user.content.html | parser"></div>
-  <p><hr>
+  <ion-row padding>
-  <ion-row>
     <ion-col>
       <ion-row>
-        <button ion-button full disabled>{{ user.counts.posts }}<br/>posts</button>
+        <button ion-button full clear>{{ user.counts.posts }}<br/>posts</button>
       </ion-row>
       <ion-row>
-        <button ion-button full disabled>{{ user.counts.bookmarks }}<br/>stars</button>
+        <button ion-button full >{{ user.counts.followers }}<br/>followers</button>
       </ion-row>
     </ion-col>
     <ion-col>
       <ion-row>
-        <button ion-button full disabled>{{ user.counts.followers }}<br/>followers</button>
+        <button ion-button full clear>{{ user.counts.bookmarks }}<br/>stars</button>
       </ion-row>
       <ion-row>
-        <button ion-button full disabled>{{ user.counts.following }}<br/>following</button>
+        <button ion-button full >{{ user.counts.following }}<br/>following</button>
       </ion-row>
     </ion-col>
   </ion-row>
 
+  <ion-segment [(ngModel)]="activeTab">
+    <ion-segment-button value="posts">Posts</ion-segment-button>
+    <ion-segment-button value="bookmarks">Stars</ion-segment-button>
+  </ion-segment>
+
+  <div [ngSwitch]="activeTab">
+
+    <div *ngSwitchCase="'posts'">
+      <ion-list>
+        <ion-card *ngFor="let post of posts" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
+          <post [post]="post" [hideImg]="hideImg" [ccOnReply]="ccOnReply" [myUsername]="myUsername"></post>
+        </ion-card>
+      </ion-list>
+    </div>
+
+    <div *ngSwitchCase="'bookmarks'">
+      <ion-list>
+        <ion-card *ngFor="let post of bookmarks" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
+          <post [post]="post" [hideImg]="hideImg" [ccOnReply]="ccOnReply" [myUsername]="myUsername"></post>
+        </ion-card>
+      </ion-list>
+    </div>
+
+    <ion-infinite-scroll (ionInfinite)="fetchOlderPosts($event, activeTab)">
+      <ion-infinite-scroll-content></ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+
+  </div>
+
 </ion-content>

src/pages/profile/profile.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
 
+import * as pnut from 'pnut-butter';
+
 /**
  * Generated class for the ProfilePage page.
  *
@@ -15,13 +17,87 @@ import { NavController, NavParams } from 'ionic-angular';
 export class ProfilePage {
 
   private user: any;
+  private posts: Array<Object> = [];
+  private bookmarks: Array<Object> = [];
+  private before_id_post: string;
+  private before_id_stars: string;
+  private myUsername: string;
 
   constructor(public navCtrl: NavController, public navParams: NavParams) {
     this.user = this.navParams.data.user;
+    this.myUsername = this.navParams.data.me;
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad ProfilePage');
+    let params = {
+      include_deleted: 0,
+      include_raw: 1,
+      count: 40
+    };
+    pnut.postsFrom(this.user.id, params).then(res => {
+      this.posts = this.parseData(res.data);
+      this.before_id_post = res.meta.min_id;
+    });
+    pnut.bookmarks(this.user.id, params).then(res => {
+      this.bookmarks = this.parseData(res.data);
+      this.before_id_stars = res.meta.min_id;
+    });
+  }
+
+  fetchOlderPosts(infiniteScroll, stream) {
+    let before_id = this.before_id_post;
+    let fetcher = pnut.postsFrom;
+    if (stream === 'bookmarks') {
+      before_id = this.before_id_stars;
+      fetcher = pnut.bookmarks;
+    }
+    let params = {
+      include_deleted: 0,
+      include_raw: 1,
+      before_id: before_id,
+      count: 40
+    };
+    fetcher(this.user.id, params).then(res => {
+      if (res.data.length > 0) {
+        if (stream === 'posts') {
+          this.posts.push.apply(this.posts, this.parseData(res.data));
+          this.before_id_post = res.meta.min_id;
+        } else if (stream === 'bookmarks') {
+          this.bookmarks.push.apply(this.bookmarks, this.parseData(res.data));
+          this.before_id_stars = res.meta.min_id;
+        }
+      }
+      infiniteScroll.complete();
+    }).catch(err => {
+      console.log(err);
+    });
+  }
+
+  parseData(data) {
+    var pdata = [];
+    for (var i = 0; i < data.length; i++) {
+      if (!data[i].is_deleted) {
+        if (data[i]['repost_of']) {
+          data[i] = data[i]['repost_of']
+          var reposted_by_string = "";
+          for (var j = 0; j < data[i]['reposted_by'].length; j++) {
+            reposted_by_string = reposted_by_string + data[i]['reposted_by'][j]['username'] + ", ";
+          }
+          // data[i]['reposted_by_string'] = "Reposted by: " + reposted_by_string;
+        }
+        if (data[i].content) {
+          for (var k = 0; k < data[i]['content']['entities']['mentions'].length; k++) {
+            var men = data[i]['content']['entities']['mentions'][k]['text'];
+            if (this.myUsername === men) {
+              data[i]['you_are_mentioned'] = true;
+            }
+          }
+        }
+        pdata.push(data[i]);
+      }
+    }
+    return pdata;
   }
 
 }

src/pages/stream/stream.html

@@ -25,89 +25,6 @@
   <ion-list>
     <ion-card *ngFor="let post of posts" color="{{ post.you_are_mentioned ? 'mention' : '' }}">
       <post [post]="post" [hideImg]="hideImg" [ccOnReply]="ccOnReply" [myUsername]="myUsername"></post>
-      <!-- <ion-item color="{{ post.you_are_mentioned ? 'mention' : '' }}">
-        <ion-avatar item-start (click)="showProfile(post.user)">
-          <img src="{{ post.user.content.avatar_image.link }}">
-        </ion-avatar>
-        <h2>{{ post.user.name }}</h2>
-        <p>@{{ post.user.username }}</p>
-        <ion-note item-end>
-          <div text-right>
-            {{ post.created_at | timeago }}<br/>
-            {{ post.source.name }}
-          </div>
-        </ion-note>
-      </ion-item>
-      <ion-card-content>
-        <div *ngIf="post.is_deleted; else renderBlock"></div>
-        <ng-template #renderBlock >
-          <div [innerHTML]="post.content.html | parser"></div>
-          <div *ngIf="post.raw">
-            <div *ngFor="let r of post.raw">
-              <div *ngIf="r.type == 'nl.chimpnut.blog.post'">
-                <hr>
-                <div>{{ r.value.body }}</div>
-              </div>
-            </div>
-          </div>
-        </ng-template>
-      </ion-card-content>
-      <div *ngIf="post.raw">
-        <div *ngFor="let r of post.raw">
-          <div *ngIf="r.type == 'io.pnut.core.oembed'">
-            <ion-item>
-              <div *ngIf="hideImg; then imgbtn else thumbnail"></div>
-              <ng-template #imgbtn >
-                <button ion-button icon-start (click)="showImage(r.value.url)">
-                  <ion-icon name="image"></ion-icon>
-                  {{ r.value.title }}
-                </button>
-              </ng-template>
-              <ng-template #thumbnail >
-                <img src="{{ r.value.thumbnail_url || r.value.url }}" (click)="showImage(r.value.url)">
-              </ng-template>
-            </ion-item>
-          </div>
-        </div>
-      </div>
-      <div *ngIf="post.reposted_by_string">
-        <ion-item><ion-note>{{ post.reposted_by_string }}</ion-note></ion-item>
-      </div>
-      <ion-row>
-        <ion-col>
-          <button ion-button icon-left clear small block (click)="showReplyPost(post)">
-            <ion-icon name="ios-undo"></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)="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 (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)="fetchThread(post.thread_id)">
-            <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 (click)="presentPostMenu($event, post)">
-            <ion-icon name="more"></ion-icon>
-          </button>
-        </ion-col>
-      </ion-row> -->
     </ion-card>
   </ion-list>