infinte scroll for user page

zlg/src/pages/home/home.html

@@ -2,7 +2,7 @@
   <ion-navbar>
         <br>
         <button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
-    <ion-title align="middle">The Vault</ion-title>
+    <ion-title align=right>The Vault</ion-title>
   </ion-navbar>
 </ion-header>
 
@@ -20,9 +20,11 @@
     <button (click)="sendPost()" id="myVault-button18" style="font-weight:600;font-size:20px;" class="codystar button button-royal button-block button-small">Post</button>
   </div>
   
-  <div id="myVault-markdown4" class="show-list-numbers-and-dots overflow-box" style="overflow-y: scroll; height: 55vh;">
+  <div id="myVault-markdown4" class="show-list-numbers-and-dots overflow-box" style="overflow-y: scroll; height: 50vh;">
       <div style="color:#FFFFFF;list-style-type: none;" *ngFor="let p of posts">
-        <button (click)="goToUsersFeed(p)" class="button button-block" style="background-color:lightgray;text-align: left; word-wrap: break-word; white-space: normal"><strong>{{ p.userName }}: </strong>{{ p.message }}</button>
+        <button (click)="goToUsersFeed(p)" class="button button-block" style="background-color:lightgray;text-align: left; word-wrap: break-word; white-space: normal"><strong>{{ p.userName }}: </strong>{{ p.message }}
+        <p> Posted: {{ p.createdAt |date:'dd/MM/yyyy H:mm' }}</p>
+      </button>
       </div>
   </div>
 

zlg/src/pages/home/home.ts

@@ -37,23 +37,6 @@ export class HomePage implements OnInit{
     this.connect();  
   }
 
-//   connect() {
-//     const socket = new SockJS('https://fast-headland-39537.herokuapp.com/vault-socket');
-//     this.stompClient = Stomp.over(socket);
-
-//     this.stompClient.connect({}, (frame) => {
-//       console.log('Connected: ' + frame);
-//       this.stompClient.subscribe('/topic/posts', (post) => {
-//         this.posts.unshift(JSON.parse(post.body)));
-//       _this.stompClient.subscribe('/topic/posts', (post) => {
-//         _this.posts.unshift(JSON.parse(post.body));
-//      });
-//     }
-//   }
-//   );
-  
-// }
-
 connect() {
   const socket = new SockJS('https://fast-headland-39537.herokuapp.com/vault-socket');
   this.stompClient = Stomp.over(socket);
@@ -106,7 +89,7 @@ connect() {
 
   goToUsersFeed(post) {
     console.log(post.id);
-    let params = {id: post.userId};
+    let params = {id: post.userId, name: post.userName};
     this.navCtrl.push('UserfeedPage', params);
   }
 

zlg/src/pages/userfeed/userfeed.html

@@ -7,24 +7,37 @@
 <ion-header>
 
   <ion-navbar>
-    <ion-title align = "middle"><strong>{{user.name}}'s</strong> Vault</ion-title>
+    <ion-title align=right><strong>{{userName}}'s</strong> Vault</ion-title>
   </ion-navbar>
 </ion-header>
 
 
 <ion-content padding="true" style="background: url(../assets/img/0iNAJ9CJQ1qT57JTEweX_palePurpVault.png) no-repeat center;background-size:cover;" class="has-header">
   <ion-card-content text-center>
-      <ion-img src = "/assets/img/tom.jpg" width="250" height = "250"></ion-img>
+      <ion-img src = "/assets/img/tom.jpg" width="125" height = "125"></ion-img>
   </ion-card-content>
 
-
+<!-- 
   <ion-list>
-    <!-- <ion item *ngFor= "let post of feed"> -->
-    <ion-item>
+    <div style= "overflow-y:scroll">
+    <ion-item *ngFor= "let post of postArr">
       <h2>{{post.message}}</h2>
       <p>
-          {{post.timestamp}}
+          {{post.createdAt}}
       </p>
     </ion-item>
-  </ion-list>
+  </div>
+  </ion-list> -->
+  <div id="myVault-markdown4" class="show-list-numbers-and-dots overflow-box" style="overflow-y: scroll; height: 60vh;">
+      <div style="color:#FFFFFF;list-style-type: none;" *ngFor="let post of postArr">
+        <ion-item class="button button-block" style="background-color:lightgray;text-align: left; word-wrap: break-word; white-space: normal; cursor:none; ">{{ post.message }}
+        <p> Posted: {{post.createdAt |date:'MM/dd/yyyy H:mm'}}</p>
+        </ion-item>
+      </div>
+  </div>
+
+<ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="page < totalPage">
+  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..." style="color:lightgray"></ion-infinite-scroll-content>
+</ion-infinite-scroll>
+
 </ion-content>

zlg/src/pages/userfeed/userfeed.ts

@@ -15,28 +15,71 @@ import { UserProvider } from '../../providers/user/UserProvider';
   templateUrl: 'userfeed.html',
 })
 export class UserfeedPage {
-  //user: any;
-  user= {name:'Froilanda'};
+  userName: string;
   post= {timestamp: '3:19PM Sun August 5th 2018',message:'hello world'};
   userid: any;
   postArr: Array<any>;
+  data: any;
+  errorMessage: string;
+  page = 0;
+  perPage = 0;
+  totalData = 0;
+  totalPage = 0;
 
   constructor(public navCtrl: NavController, public navParams: NavParams,
               public UserProvider: UserProvider) {
     //this.user.name = this.navParams.get('name');
     this.userid = this.navParams.get('id');
+    this.userName = this.navParams.get('name');
+    this.getAllPostsByUserId();
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad UserfeedPage');
+    this.getAllPostsByUserId();
   }
 
-  getAllPostsByUserId(){
-    return this.UserProvider.getAllPostsByUserId(this.userid).subscribe(response => {
-      console.log("response: " + response);
-      this.postArr = response;
-      console.log("postarr: " + this.postArr);
-    });
+  // getAllPostsByUserId(){
+  //   return this.UserProvider.getAllPostsByUserId(this.userid).subscribe(response => {
+  //     console.log("response: " + response);
+  //     this.postArr = response;
+  //     console.log("postarr: " + this.postArr);
+  //   });
+  // }
+
+  getAllPostsByUserId() {
+    this.UserProvider.getAllPostsByUserId(this.page, this.userid)
+       .subscribe(
+         res => {
+           console.log(res)
+           this.data = res;
+           this.postArr = this.data.content;
+           this.perPage = this.data.size;
+           this.totalData = this.data.totalElements;
+           this.totalPage = this.data.totalPages;
+         },
+         error =>  this.errorMessage = <any>error);
+  }
+
+  doInfinite(infiniteScroll) {
+    this.page = this.page+1;
+    setTimeout(() => {
+      this.UserProvider.getAllPostsByUserId(this.page, this.userid)
+         .subscribe(
+           res => {
+             this.data = res;
+             this.perPage = this.data.size;
+             this.totalData = this.data.totalElements;
+             this.totalPage = this.data.totalPages;
+             for(let i=0; i<this.data.content.length; i++) {
+               this.postArr.push(this.data.content[i]);
+             }
+           },
+           error =>  this.errorMessage = <any>error);
+  
+      console.log('Async operation has ended');
+      infiniteScroll.complete();
+    }, 1000);
   }
 
 

zlg/src/providers/user/userProvider.ts

@@ -12,7 +12,7 @@ export class UserProvider{
   constructor(public http: HttpClient) {
   }
 
-  getAllPostsByUserId(id: string):Observable<any> {
-    return this.http.get(this.USER_API + id);
+  getAllPostsByUserId(page: number, id: string):Observable<any> {
+    return this.http.get(this.USER_API + id + "/?page="+ page);
   }
 }