add posts and bookmarks to profile page
This commit is contained in:
Morgan McMillian
parent
bc995eb707
commit
38f8849972
4 changed files with 113 additions and 92 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<p><hr>
|
||||
<ion-row>
|
||||
<div padding [innerHTML]="user.content.html | parser"></div>
|
||||
<ion-row padding>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Reference in a new issue