From 73664e4f4443cfe51160b5840d8238d93678a471 Mon Sep 17 00:00:00 2001
From: Morgan McMillian <gilag@monkeystew.com>
Date: Sun, 18 Nov 2018 16:39:53 -0800
Subject: [PATCH] add user following and followers page

---
 src/app/app.module.ts              |  3 ++
 src/components/post/post.scss      | 13 +++++-
 src/pages/profile/profile.html     |  9 ++--
 src/pages/profile/profile.ts       | 18 +++++++-
 src/pages/thread/thread.scss       |  6 +--
 src/pages/user-list/user-list.html | 35 +++++++++++++++
 src/pages/user-list/user-list.scss | 14 ++++++
 src/pages/user-list/user-list.ts   | 71 ++++++++++++++++++++++++++++++
 src/pipes/parser/parser.ts         |  2 +-
 9 files changed, 161 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/user-list/user-list.html
 create mode 100644 src/pages/user-list/user-list.scss
 create mode 100644 src/pages/user-list/user-list.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4727fdc..6aeab2a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -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
   ],
diff --git a/src/components/post/post.scss b/src/components/post/post.scss
index 437d298..9e0c2b0 100644
--- a/src/components/post/post.scss
+++ b/src/components/post/post.scss
@@ -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;
+  }
 }
diff --git a/src/pages/profile/profile.html b/src/pages/profile/profile.html
index 3e23216..0bc9262 100644
--- a/src/pages/profile/profile.html
+++ b/src/pages/profile/profile.html
@@ -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>
diff --git a/src/pages/profile/profile.ts b/src/pages/profile/profile.ts
index e1d7e1c..871461a 100644
--- a/src/pages/profile/profile.ts
+++ b/src/pages/profile/profile.ts
@@ -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});
+  }
+
 }
diff --git a/src/pages/thread/thread.scss b/src/pages/thread/thread.scss
index cad6f48..d55beec 100644
--- a/src/pages/thread/thread.scss
+++ b/src/pages/thread/thread.scss
@@ -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;
   }
 }
diff --git a/src/pages/user-list/user-list.html b/src/pages/user-list/user-list.html
new file mode 100644
index 0000000..b967f84
--- /dev/null
+++ b/src/pages/user-list/user-list.html
@@ -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>
diff --git a/src/pages/user-list/user-list.scss b/src/pages/user-list/user-list.scss
new file mode 100644
index 0000000..e61f10f
--- /dev/null
+++ b/src/pages/user-list/user-list.scss
@@ -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;
+  }
+}
diff --git a/src/pages/user-list/user-list.ts b/src/pages/user-list/user-list.ts
new file mode 100644
index 0000000..931b085
--- /dev/null
+++ b/src/pages/user-list/user-list.ts
@@ -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();
+    });
+  }
+
+}
diff --git a/src/pipes/parser/parser.ts b/src/pipes/parser/parser.ts
index b4c68e5..0e6c7f4 100644
--- a/src/pipes/parser/parser.ts
+++ b/src/pipes/parser/parser.ts
@@ -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);
   }