src/main/webapp/app/FaeBoo/Profile-head/profile-head.component.html

@@ -3,19 +3,19 @@
     <div class = "friend-cont">
 
         <div class="friend-pic friend4" id = "friend7">
-            <img class ="friend-photo friend4" src = "../../../content/images/defaultphoto.png">
+            <img class ="friend-photo friend4" src = "../../../content/images/faceofbooks3.jpg">
         </div>
 
         <div class="friend-pic friend3" id = "friend5">
-            <img class ="friend-photo friend3" src = "../../../content/images/defaultphoto.png">
+            <img class ="friend-photo friend3" src = "../../../content/images/faceofbooks4.png">
         </div>
 
         <div class="friend-pic friend2" id = "friend3">
-            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+            <img class ="friend-photo" src = "../../../content/images/faceofbooks2.jpg">
         </div>
 
         <div class="friend-pic friend1" id = "friend1">
-            <img class ="friend-photo" src = "../../../content/images/defaultphoto.png">
+            <img class ="friend-photo" src = "../../../content/images/faceofbooks1.png">
         </div>
 
         <div class = "profile-pic">
@@ -67,13 +67,16 @@
                 <div class = "button-holder"><button class = "postBtn">Schedule</button></div>
                 <div class = "button-holder"><button class = "postBtn">Memo</button></div>
                 <div class = "button-holder"><button class = "postBtn">Photo</button></div>
-                <div class = "button-holder"><button class = "postBtn" (click)="submitPost();">Submit</button></div>
+                <div class = "button-holder"><button class = "postBtn" (click)="submitPost();loadAll();">Submit</button></div>
             </div>
 
             <p id = "msg">Create a post...</p>
         </div>
-
-
     </div>
 
+    <div id = "post-container">
+            <div *ngFor="let post of posts;trackBy: trackId" class = "single-post">
+                {{post.content}}
+            </div>
+    </div>
 </div>

src/main/webapp/app/FaeBoo/Profile-head/profile-head.component.ts

@@ -1,23 +1,64 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { PostService } from 'app/entities/post';
 import { IPost } from 'app/shared/model/post.model';
-import { IUser } from 'app/core';
+import { IUser, Principal } from 'app/core';
 import { Observable } from 'rxjs';
 import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
+import { JhiAlertService } from 'ng-jhipster';
 
 @Component({
     selector: 'jhi-profile-head',
     templateUrl: './profile-head.component.html',
     styleUrls: ['profile-head.css']
 })
-export class ProfileHeadComponent {
+export class ProfileHeadComponent implements OnInit {
     str: string;
     post: IPost;
     user: IUser;
     isSaving: boolean;
     testPost: IPost;
+    posts: IPost[];
 
-    constructor(private postService: PostService) {}
+    constructor(private postService: PostService, private jhiAlertService: JhiAlertService) {}
+
+    ngOnInit() {
+        this.loadAll();
+    }
+
+    trackId(index: number, item: IPost) {
+        return item.id;
+    }
+
+    loadAll() {
+        this.postService.query().subscribe(
+            (res: HttpResponse<IPost[]>) => {
+                this.posts = res.body;
+            },
+            (res: HttpErrorResponse) => this.onError(res.message)
+        );
+    }
+
+    private onError(errorMessage: string) {
+        this.jhiAlertService.error(errorMessage, null, null);
+    }
+
+    getPost(): void {
+        console.log('2');
+        this.testPost = new class implements IPost {
+            content: string;
+            dislikes: number;
+            id: number;
+            likes: number;
+            numberOfComments: number;
+            owner: IUser;
+        }();
+        this.testPost.content = 'This is a test';
+        this.testPost.numberOfComments = 0;
+        this.testPost.likes = 0;
+        this.testPost.dislikes = 0;
+        this.testPost.id = 0;
+        // this.testPosts.push(this.testPost);
+    }
 
     submitPost(): void {
         this.post = new class implements IPost {
@@ -32,15 +73,19 @@ export class ProfileHeadComponent {
         this.post.dislikes = 0;
         this.post.likes = 0;
         this.post.numberOfComments = 0;
-        if (this.post.content.length > 1) {
-            this.save(this.post);
-        }
+        this.save(this.post);
+        this.str = '';
     }
 
     save(post: IPost) {
         this.isSaving = true;
-        this.subscribeToSaveResponse(this.postService.create(post));
-        console.log('post created');
+        const self = this;
+        this.postService
+            .create(post)
+            .toPromise()
+            .then(function(response) {
+                self.loadAll();
+            });
     }
 
     private subscribeToSaveResponse(result: Observable<HttpResponse<IPost>>) {

src/main/webapp/app/FaeBoo/Profile-head/profile-head.css

@@ -158,3 +158,23 @@ hr {
     grid-column-start: 1;
     grid-row-start: 2;
 }
+
+#post-container {
+    width: 65%;
+    min-height: 250px;
+    margin: auto;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.single-post {
+    width: 100%;
+    min-height: 100px;
+    padding: 15px;
+    box-sizing: border-box;
+    color: #969a9f;
+    border-radius: 5px;
+    background-color: #e2e6eb;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}

src/main/webapp/app/entities/post/post.component.ts

@@ -45,6 +45,7 @@ export class PostComponent implements OnInit, OnDestroy {
     }
 
     trackId(index: number, item: IPost) {
+        console.log(item);
         return item.id;
     }
 

src/main/webapp/app/layouts/navbar/navbar.component.html

@@ -45,7 +45,7 @@
                         </a>
                     </li>
                     <li>
-                        <a class="dropdown-item" routerLink="profile" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar()">
+                        <a class="dropdown-item" routerLink="profile" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="collapseNavbar();">
                             <fa-icon icon="asterisk" fixedWidth="true"></fa-icon>
                             <span jhiTranslate="global.menu.entities.profile">Profile</span>
                         </a>

src/main/webapp/app/layouts/navbar/navbar.component.ts

@@ -6,6 +6,7 @@ import { SessionStorageService } from 'ngx-webstorage';
 import { VERSION } from 'app/app.constants';
 import { JhiLanguageHelper, Principal, LoginModalService, LoginService } from 'app/core';
 import { ProfileService } from '../profiles/profile.service';
+import { ProfileHeadComponent } from 'app/FaeBoo/Profile-head/profile-head.component';
 
 @Component({
     selector: 'jhi-navbar',
@@ -19,6 +20,7 @@ export class NavbarComponent implements OnInit {
     swaggerEnabled: boolean;
     modalRef: NgbModalRef;
     version: string;
+    public profileHead: ProfileHeadComponent;
 
     constructor(
         private loginService: LoginService,