add user following and followers page
This commit is contained in:
parent
38f8849972
commit
73664e4f44
9 changed files with 161 additions and 10 deletions
|
@ -11,6 +11,7 @@ import { ThreadPage } from '../pages/thread/thread';
|
|||
import { SettingsPage } from '../pages/settings/settings';
|
||||
import { AboutPage } from '../pages/about/about';
|
||||
import { ProfilePage } from '../pages/profile/profile';
|
||||
import { UserListPage } from '../pages/user-list/user-list';
|
||||
import { PostComponent } from '../components/post/post';
|
||||
|
||||
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||
|
@ -31,6 +32,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
|||
SettingsPage,
|
||||
AboutPage,
|
||||
ProfilePage,
|
||||
UserListPage,
|
||||
TimeagoPipe,
|
||||
NewPostModal,
|
||||
PostMenu,
|
||||
|
@ -51,6 +53,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
|||
SettingsPage,
|
||||
AboutPage,
|
||||
ProfilePage,
|
||||
UserListPage,
|
||||
NewPostModal,
|
||||
PostMenu
|
||||
],
|
||||
|
|
|
@ -1,3 +1,14 @@
|
|||
post {
|
||||
|
||||
.item-md ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-wp ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-ios ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,7 +23,10 @@
|
|||
</ion-avatar>
|
||||
<h2>{{ user.name }}</h2>
|
||||
<p>@{{ user.username }}</p>
|
||||
<button ion-button item-end disabled>{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
|
||||
<ion-col item-end text-right>
|
||||
<button ion-button disabled>{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
|
||||
<ion-note>{{ user.follows_you ? "Follows you" : ""}}</ion-note>
|
||||
</ion-col>
|
||||
</ion-item>
|
||||
|
||||
<div padding [innerHTML]="user.content.html | parser"></div>
|
||||
|
@ -33,7 +36,7 @@
|
|||
<button ion-button full clear>{{ user.counts.posts }}<br/>posts</button>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<button ion-button full >{{ user.counts.followers }}<br/>followers</button>
|
||||
<button ion-button full (click)="showUserList('Followers')">{{ user.counts.followers }}<br/>followers</button>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
|
@ -41,7 +44,7 @@
|
|||
<button ion-button full clear>{{ user.counts.bookmarks }}<br/>stars</button>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<button ion-button full >{{ user.counts.following }}<br/>following</button>
|
||||
<button ion-button full (click)="showUserList('Following')">{{ user.counts.following }}<br/>following</button>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, NavParams } from 'ionic-angular';
|
||||
import { UserListPage } from '../user-list/user-list';
|
||||
|
||||
import * as pnut from 'pnut-butter';
|
||||
|
||||
|
@ -22,6 +23,7 @@ export class ProfilePage {
|
|||
private before_id_post: string;
|
||||
private before_id_stars: string;
|
||||
private myUsername: string;
|
||||
public activeTab: string = 'posts';
|
||||
|
||||
constructor(public navCtrl: NavController, public navParams: NavParams) {
|
||||
this.user = this.navParams.data.user;
|
||||
|
@ -30,6 +32,8 @@ export class ProfilePage {
|
|||
|
||||
ionViewDidLoad() {
|
||||
console.log('ionViewDidLoad ProfilePage');
|
||||
// console.log(JSON.stringify(this.user));
|
||||
// console.log('-----');
|
||||
let params = {
|
||||
include_deleted: 0,
|
||||
include_raw: 1,
|
||||
|
@ -81,10 +85,13 @@ export class ProfilePage {
|
|||
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++) {
|
||||
let rplen = 0;
|
||||
if (typeof data[i]['reposted_by'] !== "undefined") {
|
||||
rplen = data[i]['reposted_by'].length;
|
||||
}
|
||||
for (var j = 0; j < rplen; 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++) {
|
||||
|
@ -100,4 +107,11 @@ export class ProfilePage {
|
|||
return pdata;
|
||||
}
|
||||
|
||||
showUserList(list) {
|
||||
this.navCtrl.push(UserListPage, {
|
||||
userid: this.user.id,
|
||||
username: this.myUsername,
|
||||
list: list});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,14 +1,14 @@
|
|||
page-thread {
|
||||
.item-md ion-avatar img {
|
||||
border-radius: 0;
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-wp ion-avatar img {
|
||||
border-radius: 0;
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-ios ion-avatar img {
|
||||
border-radius: 0;
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
|
|
35
src/pages/user-list/user-list.html
Normal file
35
src/pages/user-list/user-list.html
Normal file
|
@ -0,0 +1,35 @@
|
|||
<!--
|
||||
Generated template for the UserListPage page.
|
||||
|
||||
See http://ionicframework.com/docs/components/#navigation for more info on
|
||||
Ionic pages and navigation.
|
||||
-->
|
||||
<ion-header>
|
||||
|
||||
<ion-navbar>
|
||||
<ion-title>{{ list }}</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<ion-list *ngFor="let user of users">
|
||||
<ion-item (click)="showProfile(user)">
|
||||
<ion-avatar item-start>
|
||||
<img src="{{ user.content.avatar_image.link }}">
|
||||
</ion-avatar>
|
||||
<h2>{{ user.name }}</h2>
|
||||
<p>@{{ user.username }}</p>
|
||||
<ion-col item-end text-right>
|
||||
<button ion-button disabled>{{ user.you_follow ? "Unfollow" : "Follow" }}</button>
|
||||
<ion-note>{{ user.follows_you ? "Follows you" : ""}}</ion-note>
|
||||
</ion-col>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-infinite-scroll (ionInfinite)="fetchMoreUsers($event)">
|
||||
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content>
|
14
src/pages/user-list/user-list.scss
Normal file
14
src/pages/user-list/user-list.scss
Normal file
|
@ -0,0 +1,14 @@
|
|||
page-user-list {
|
||||
.item-md ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-wp ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.item-ios ion-avatar img {
|
||||
border-radius: 10px;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
71
src/pages/user-list/user-list.ts
Normal file
71
src/pages/user-list/user-list.ts
Normal file
|
@ -0,0 +1,71 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NavController, NavParams } from 'ionic-angular';
|
||||
import { ProfilePage } from '../../pages/profile/profile';
|
||||
|
||||
import * as pnut from 'pnut-butter';
|
||||
|
||||
/**
|
||||
* Generated class for the UserListPage page.
|
||||
*
|
||||
* See https://ionicframework.com/docs/components/#navigation for more info on
|
||||
* Ionic pages and navigation.
|
||||
*/
|
||||
|
||||
@Component({
|
||||
selector: 'page-user-list',
|
||||
templateUrl: 'user-list.html',
|
||||
})
|
||||
export class UserListPage {
|
||||
|
||||
private list: string;
|
||||
private userid: string;
|
||||
private users: Array<Object> = [];
|
||||
private myUsername: string;
|
||||
private before_id: string;
|
||||
private fetcher: any;
|
||||
|
||||
constructor(public navCtrl: NavController, public navParams: NavParams) {
|
||||
this.list = this.navParams.data.list;
|
||||
this.userid = this.navParams.data.userid;
|
||||
this.myUsername = this.navParams.data.username;
|
||||
}
|
||||
|
||||
ionViewDidLoad() {
|
||||
console.log('ionViewDidLoad UserListPage');
|
||||
let params = {
|
||||
include_deleted: 0,
|
||||
include_raw: 1,
|
||||
count: 40
|
||||
};
|
||||
if (this.list == "Followers") {
|
||||
this.fetcher = pnut.followers;
|
||||
} else if (this.list == "Following") {
|
||||
this.fetcher = pnut.following;
|
||||
}
|
||||
this.fetcher(this.userid, params).then(res => {
|
||||
this.users = res.data;
|
||||
this.before_id = res.meta.min_id;
|
||||
});
|
||||
}
|
||||
|
||||
showProfile(user) {
|
||||
this.navCtrl.push(ProfilePage, {user: user, me: this.myUsername});
|
||||
}
|
||||
|
||||
fetchMoreUsers(infiniteScroll) {
|
||||
let params = {
|
||||
include_deleted: 0,
|
||||
include_raw: 1,
|
||||
before_id: this.before_id,
|
||||
count: 40
|
||||
};
|
||||
this.fetcher(this.userid, params).then(res => {
|
||||
if (res.data.length > 0) {
|
||||
this.users.push.apply(this.users, res.data);
|
||||
this.before_id = res.meta.min_id;
|
||||
}
|
||||
infiniteScroll.complete();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
|
@ -16,7 +16,7 @@ export class ParserPipe implements PipeTransform {
|
|||
|
||||
transform(value: string, ...args): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
|
||||
let hregex = /href="([\S]+)"/g;
|
||||
// value = value.replace(hregex, "class=\"ex-link\" href=");
|
||||
if (typeof value == "undefined") value = "";
|
||||
value = value.replace(hregex, "onClick=\"window.open('$1', '_system', 'location=yes')\"");
|
||||
return this._sanitizer.bypassSecurityTrustHtml(value);
|
||||
}
|
||||
|
|
Reference in a new issue