loads all posts now

zlg/src/app/app.module.ts

@@ -16,6 +16,9 @@ import { Signup } from '../pages/signup/signup'
 import { HomePage } from '../pages/home/home';
 import { WebsocketProvider } from '../providers/websocket/websocket';
 import { UserProvider } from '../providers/user/user';
+import { PostServiceProvider } from '../providers/post-service/post-service';
+import { HttpClient } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -28,7 +31,8 @@ import { UserProvider } from '../providers/user/user';
   imports: [
     BrowserModule,
     IonicModule.forRoot(MyApp),
-    SocketIoModule.forRoot(config)
+    SocketIoModule.forRoot(config),
+    HttpClientModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
@@ -43,7 +47,8 @@ import { UserProvider } from '../providers/user/user';
     SplashScreen,
     {provide: ErrorHandler, useClass: IonicErrorHandler},
     WebsocketProvider,
-    UserProvider
+    UserProvider,
+    PostServiceProvider
   ]
 })
 export class AppModule {}

zlg/src/pages/home/home.html

@@ -21,10 +21,9 @@
     <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" >
-      <ul style="color:#FFFFFF;list-style-type: none" *ngFor="let p of posts">
-        <li><strong>{{ p.userName }}: </strong> {{ p.message }}</li>
-      </ul>
+  <div id="myVault-markdown4" class="show-list-numbers-and-dots overflow-box">
+      <div style="color:#FFFFFF;list-style-type: none;overflow: scroll;" *ngFor="let p of posts" >
+        <button (click)="goToUsersFeed(p)" class="button button-block" style="background-color:lightgray;text-align: left"><strong>{{ p.userName }}: </strong>{{ p.message }}</button>
+      </div>
   </div>
 </ion-content>

zlg/src/pages/home/home.ts

@@ -6,14 +6,16 @@ import SockJS from 'sockjs-client';
 
 
 import { NavController } from 'ionic-angular';
+import { PostServiceProvider } from '../../providers/post-service/post-service';
 
 @Component({
   selector: 'page-home',
-  templateUrl: 'home.html'
+  templateUrl: 'home.html',
+  providers: [PostServiceProvider]
 })
 export class HomePage implements OnInit{
 
-  constructor(public navCtrl: NavController) {
+  constructor(public navCtrl: NavController, private postProvider: PostServiceProvider) {
 
   }
 
@@ -24,6 +26,7 @@ export class HomePage implements OnInit{
   postInput = "";
 
   ngOnInit() {
+    this.getAllPosts();
     this.connect();  
   }
   connect() {
@@ -34,13 +37,36 @@ export class HomePage implements OnInit{
     this.stompClient.connect({}, function (frame) {
       console.log('Connected: ' + frame);
       _this.stompClient.subscribe('/topic/posts', (post) => {
-        _this.posts.push(JSON.parse(post.body));
+        _this.posts.unshift(JSON.parse(post.body));
      });
     });
   }
 
+  getAllPosts() {
+    console.log("getting posts...");
+    //let previousPosts: any[] = this.postProvider.getAllPosts();
+    this.postProvider.getAllPosts().subscribe (
+      (posts) => { 
+        console.log("hello there?");
+        console.log(posts);
+        let postarray = posts as any[];
+        for (let i = 0; i < postarray.length; i++) {
+           this.posts.unshift(posts[i]);
+        }
+      }
+    );
+        
+  }
+
+  goToUsersFeed(post) {
+    let params = {id: post.userId};
+    //this.navCtrl.push('UsersFeed', params);
+  }
+
+
   sendPost() {
     this.stompClient.send(this.userPostUrl, {}, JSON.stringify({'id': '','message': this.postInput, 'userId': this.userId}))
+    this.postInput = "";
   }
 
   //  showPost(message, userName) {

zlg/src/providers/post-service/post-service.ts

@@ -0,0 +1,21 @@
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rx';
+
+/*
+  Generated class for the PostServiceProvider provider.
+
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
+@Injectable()
+export class PostServiceProvider {
+
+  constructor(public http: HttpClient) {
+    console.log('Hello PostServiceProvider Provider');
+  }
+
+  getAllPosts() {
+    return this.http.get("https://fast-headland-39537.herokuapp.com/posts/all");
+  }
+}