User profile loads properly if viewing the logged in user

4 files changed, 76 insertions, 11 deletions

diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css
index 4b6dde0..6954b22 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.css
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css
@@ -7,6 +7,30 @@
   justify-content: start;
 }
 
+hr {
+  width: calc(100% - 1em);
+  color: black;
+  border: 1px solid black;
+}
+
+/* Navigation bar (for loggedin user) */
+
+#navigation {
+  display: flex;
+  width: 100%;
+}
+
+.submit-btn {
+  flex: 1;
+  margin-top: 0;
+  margin-left: .5em;
+  font-size: inherit;
+}
+
+#navigation > .submit-btn:nth-of-type(1) {
+  margin-left: 0;
+}
+
 /* Top card */
 
 #main-info {
@@ -62,8 +86,3 @@
   width: 100%;
 }
 
-#posts > hr {
-  width: calc(100% - 1em);
-  color: black;
-  border: 1px solid black;
-}
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.html b/src/DevHive.Angular/src/app/components/profile/profile.component.html
index ddf4a21..5303db3 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -1,12 +1,22 @@
-<div id="content">
+<!-- TODO: replace with loading component -->
+<div id="content" style="justify-content: center;" *ngIf="!dataArrived">
+	Loading...
+</div>
+
+<div id="content" *ngIf="dataArrived">
+	<nav id="navigation">
+		<button class="submit-btn" type="submit" (click)="goBack()">ᐊ Back</button>
+		<button class="submit-btn" type="submit" (click)="navigateToSettings()" *ngIf="loggedInUser">Settings</button>
+	</nav>
+	<hr>
 	<div id="main-info" class="rounded-border">
 		<img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
 		<div id="other-main-info">
 			<div id="name">
-				Gosho Trapov
+				{{ user.firstName }} {{ user.lastName }}
 			</div>
 			<div id="username">
-				@gosho_trapov
+				@{{ user.userName }}
 			</div>
 		</div>
 	</div>
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.ts b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
index 6b40e31..16bb053 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { Guid } from 'guid-typescript';
 import { UserService } from 'src/app/services/user.service';
 import { User } from 'src/models/identity/user';
 import { AppConstants } from 'src/app/app-constants.module';
@@ -11,18 +10,51 @@ import { AppConstants } from 'src/app/app-constants.module';
   styleUrls: ['./profile.component.css']
 })
 export class ProfileComponent implements OnInit {
+  public loggedInUser = false;
   public dataArrived = false;
   public user: User;
 
   constructor(private _router: Router, private _userService: UserService)
   { }
 
+  private setDefaultUser(): void {
+    this.user = this._userService.getDefaultUser();
+  }
+
   ngOnInit(): void {
     const username = this._router.url.substring(9);
     console.log(username);
+
+    if (sessionStorage.getItem('UserCred')) {
       // Workaround for waiting the fetch response
       // TODO: properly wait for it, before loading the page contents
-    // setTimeout(() => { this.user = this._userService.fetchUserFromSessionStorage(); }, AppConstants.FETCH_TIMEOUT);
-    // setTimeout(() => { this.dataArrived = true; }, AppConstants.FETCH_TIMEOUT + 100);
+      setTimeout(() => {
+                          this.user = this._userService.fetchUserFromSessionStorage();
+      }, AppConstants.FETCH_TIMEOUT);
+
+      // After getting the user, check if we're on the profile page of the logged in user
+      setTimeout(() => {
+                          if (this.user.userName !== username) {
+                            this.setDefaultUser();
+                          } else {
+                            this.loggedInUser = true;
+                          }
+      }, AppConstants.FETCH_TIMEOUT + 50);
+    }
+    else {
+      this.setDefaultUser();
+    }
+
+    setTimeout(() => {
+      this.dataArrived = true;
+    }, AppConstants.FETCH_TIMEOUT + 100);
+  }
+
+  goBack(): void {
+    this._router.navigate(['/']);
+  }
+
+  navigateToSettings(): void {
+    this._router.navigate([this._router.url + '/settings']);
   }
 }
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index 81960f1..8c679d7 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -13,6 +13,10 @@ import { AppConstants } from 'src/app/app-constants.module';
 export class UserService {
   constructor() { }
 
+  getDefaultUser(): User {
+    return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', '');
+  }
+
   fetchUserFromSessionStorage(): User {
     // Get the token and userid from session storage
     const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? '');