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 { SettingsPage } from '../pages/settings/settings';
|
||||||
import { AboutPage } from '../pages/about/about';
|
import { AboutPage } from '../pages/about/about';
|
||||||
import { ProfilePage } from '../pages/profile/profile';
|
import { ProfilePage } from '../pages/profile/profile';
|
||||||
|
import { UserListPage } from '../pages/user-list/user-list';
|
||||||
import { PostComponent } from '../components/post/post';
|
import { PostComponent } from '../components/post/post';
|
||||||
|
|
||||||
import { SplashScreen } from '@ionic-native/splash-screen';
|
import { SplashScreen } from '@ionic-native/splash-screen';
|
||||||
|
@ -31,6 +32,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
||||||
SettingsPage,
|
SettingsPage,
|
||||||
AboutPage,
|
AboutPage,
|
||||||
ProfilePage,
|
ProfilePage,
|
||||||
|
UserListPage,
|
||||||
TimeagoPipe,
|
TimeagoPipe,
|
||||||
NewPostModal,
|
NewPostModal,
|
||||||
PostMenu,
|
PostMenu,
|
||||||
|
@ -51,6 +53,7 @@ import { ParserPipe } from '../pipes/parser/parser';
|
||||||
SettingsPage,
|
SettingsPage,
|
||||||
AboutPage,
|
AboutPage,
|
||||||
ProfilePage,
|
ProfilePage,
|
||||||
|
UserListPage,
|
||||||
NewPostModal,
|
NewPostModal,
|
||||||
PostMenu
|
PostMenu
|
||||||
],
|
],
|
||||||
|
|
|
@ -1,3 +1,14 @@
|
||||||
post {
|
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>
|
</ion-avatar>
|
||||||
<h2>{{ user.name }}</h2>
|
<h2>{{ user.name }}</h2>
|
||||||
<p>@{{ user.username }}</p>
|
<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>
|
</ion-item>
|
||||||
|
|
||||||
<div padding [innerHTML]="user.content.html | parser"></div>
|
<div padding [innerHTML]="user.content.html | parser"></div>
|
||||||
|
@ -33,7 +36,7 @@
|
||||||
<button ion-button full clear>{{ user.counts.posts }}<br/>posts</button>
|
<button ion-button full clear>{{ user.counts.posts }}<br/>posts</button>
|
||||||
</ion-row>
|
</ion-row>
|
||||||
<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-row>
|
||||||
</ion-col>
|
</ion-col>
|
||||||
<ion-col>
|
<ion-col>
|
||||||
|
@ -41,7 +44,7 @@
|
||||||
<button ion-button full clear>{{ user.counts.bookmarks }}<br/>stars</button>
|
<button ion-button full clear>{{ user.counts.bookmarks }}<br/>stars</button>
|
||||||
</ion-row>
|
</ion-row>
|
||||||
<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-row>
|
||||||
</ion-col>
|
</ion-col>
|
||||||
</ion-row>
|
</ion-row>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { NavController, NavParams } from 'ionic-angular';
|
import { NavController, NavParams } from 'ionic-angular';
|
||||||
|
import { UserListPage } from '../user-list/user-list';
|
||||||
|
|
||||||
import * as pnut from 'pnut-butter';
|
import * as pnut from 'pnut-butter';
|
||||||
|
|
||||||
|
@ -22,6 +23,7 @@ export class ProfilePage {
|
||||||
private before_id_post: string;
|
private before_id_post: string;
|
||||||
private before_id_stars: string;
|
private before_id_stars: string;
|
||||||
private myUsername: string;
|
private myUsername: string;
|
||||||
|
public activeTab: string = 'posts';
|
||||||
|
|
||||||
constructor(public navCtrl: NavController, public navParams: NavParams) {
|
constructor(public navCtrl: NavController, public navParams: NavParams) {
|
||||||
this.user = this.navParams.data.user;
|
this.user = this.navParams.data.user;
|
||||||
|
@ -30,6 +32,8 @@ export class ProfilePage {
|
||||||
|
|
||||||
ionViewDidLoad() {
|
ionViewDidLoad() {
|
||||||
console.log('ionViewDidLoad ProfilePage');
|
console.log('ionViewDidLoad ProfilePage');
|
||||||
|
// console.log(JSON.stringify(this.user));
|
||||||
|
// console.log('-----');
|
||||||
let params = {
|
let params = {
|
||||||
include_deleted: 0,
|
include_deleted: 0,
|
||||||
include_raw: 1,
|
include_raw: 1,
|
||||||
|
@ -81,10 +85,13 @@ export class ProfilePage {
|
||||||
if (data[i]['repost_of']) {
|
if (data[i]['repost_of']) {
|
||||||
data[i] = data[i]['repost_of']
|
data[i] = data[i]['repost_of']
|
||||||
var reposted_by_string = "";
|
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'] + ", ";
|
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) {
|
if (data[i].content) {
|
||||||
for (var k = 0; k < data[i]['content']['entities']['mentions'].length; k++) {
|
for (var k = 0; k < data[i]['content']['entities']['mentions'].length; k++) {
|
||||||
|
@ -100,4 +107,11 @@ export class ProfilePage {
|
||||||
return pdata;
|
return pdata;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showUserList(list) {
|
||||||
|
this.navCtrl.push(UserListPage, {
|
||||||
|
userid: this.user.id,
|
||||||
|
username: this.myUsername,
|
||||||
|
list: list});
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
page-thread {
|
page-thread {
|
||||||
.item-md ion-avatar img {
|
.item-md ion-avatar img {
|
||||||
border-radius: 0;
|
border-radius: 10px;
|
||||||
background-color: #e9e9e9;
|
background-color: #e9e9e9;
|
||||||
}
|
}
|
||||||
.item-wp ion-avatar img {
|
.item-wp ion-avatar img {
|
||||||
border-radius: 0;
|
border-radius: 10px;
|
||||||
background-color: #e9e9e9;
|
background-color: #e9e9e9;
|
||||||
}
|
}
|
||||||
.item-ios ion-avatar img {
|
.item-ios ion-avatar img {
|
||||||
border-radius: 0;
|
border-radius: 10px;
|
||||||
background-color: #e9e9e9;
|
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 {
|
transform(value: string, ...args): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
|
||||||
let hregex = /href="([\S]+)"/g;
|
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')\"");
|
value = value.replace(hregex, "onClick=\"window.open('$1', '_system', 'location=yes')\"");
|
||||||
return this._sanitizer.bypassSecurityTrustHtml(value);
|
return this._sanitizer.bypassSecurityTrustHtml(value);
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue