From 25ec32bf16b66ecd09952ba147d40b49de546625 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Thu, 21 Jan 2021 12:13:51 +0200
Subject: Made profile icon dynamic

---
 src/DevHive.Angular/src/app/app-constants.module.ts                | 2 ++
 src/DevHive.Angular/src/app/components/feed/feed.component.css     | 3 ++-
 src/DevHive.Angular/src/app/components/feed/feed.component.html    | 4 ++--
 src/DevHive.Angular/src/app/components/feed/feed.component.ts      | 7 ++++++-
 src/DevHive.Angular/src/app/components/post/post.component.html    | 2 +-
 src/DevHive.Angular/src/app/components/post/post.component.ts      | 3 ++-
 .../src/app/components/profile/profile.component.html              | 2 +-
 .../src/app/components/profile/profile.component.ts                | 3 +++
 src/DevHive.Angular/src/app/services/user.service.ts               | 2 +-
 9 files changed, 20 insertions(+), 8 deletions(-)

(limited to 'src/DevHive.Angular')

diff --git a/src/DevHive.Angular/src/app/app-constants.module.ts b/src/DevHive.Angular/src/app/app-constants.module.ts
index df676da..9ce8896 100644
--- a/src/DevHive.Angular/src/app/app-constants.module.ts
+++ b/src/DevHive.Angular/src/app/app-constants.module.ts
@@ -5,4 +5,6 @@ export class AppConstants {
   public static API_USER_REGISTER_URL = AppConstants.API_USER_URL + '/register';
 
   public static FETCH_TIMEOUT = 500;
+
+  public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png';
 }
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css
index c54315f..fe3f4a1 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -65,7 +65,8 @@
 }
 
 #profile-bar-profile-pic {
-  width: 100%;
+  width: 7em;
+  height: 7em;
   box-sizing: border-box;
   padding: .5em;
 }
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
index a12aab6..d65eff4 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -6,7 +6,7 @@
 <div id="feed-page" *ngIf="dataArrived">
 	<nav id="profile-bar">
 		<div id="profile-info" (click)="goToProfile()">
-			<img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
+			<img id="profile-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt=""/>
 			<div id="profile-bar-name">
 				{{ user.firstName }} {{ user.lastName }}
 			</div>
@@ -19,7 +19,7 @@
 	</nav>
 		<div id="feed-content">
 		<nav id="top-bar">
-			<img id="top-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt="" (click)="goToProfile()">
+			<img id="top-bar-profile-pic" class="round-image" [src]="user.imageUrl" alt="" (click)="goToProfile()">
 			<input id="top-bar-create-post" type="text" placeholder="What's on your mind?"/>
 			<a id="top-bar-open-chat" href="">
 				<img src="assets/images/feed/chat-pic.png" alt=""/>
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
index b8fd5e4..aa8599d 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -33,7 +33,12 @@ export class FeedComponent implements OnInit {
       // 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.dataArrived = true;
+        if (this.user.imageUrl === '') {
+          this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON;
+        }
+      }, AppConstants.FETCH_TIMEOUT + 100);
     } else {
       this._router.navigate(['/login']);
     }
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
index 041158f..a7acb0e 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -1,7 +1,7 @@
 <div class="post">
 	<div class="content">
 		<div class="author">
-			<img class="round-image" src="assets/images/feed/profile-pic.png">
+			<img class="round-image" [src]="user.imageUrl">
 			<div class="author-info">
 				<div class="name">
 					{{ user.firstName }} {{ user.lastName }}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts
index b4bb2f0..f615262 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.ts
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Guid } from 'guid-typescript';
+import {AppConstants} from 'src/app/app-constants.module';
 import { User } from 'src/models/identity/user';
 
 @Component({
@@ -20,7 +21,7 @@ export class PostComponent implements OnInit {
         'gosho_trapov',
         'Gosho',
         'Trapov',
-        'assets/images/feed/profile-pic.png'
+        AppConstants.FALLBACK_PROFILE_ICON
     );
 
     this.votesNumber = 23;
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 5303db3..cd1e3ee 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.html
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.html
@@ -10,7 +10,7 @@
 	</nav>
 	<hr>
 	<div id="main-info" class="rounded-border">
-		<img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
+		<img class="round-image" [src]="user.imageUrl" alt=""/>
 		<div id="other-main-info">
 			<div id="name">
 				{{ user.firstName }} {{ user.lastName }}
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 51fc066..94ffe85 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.ts
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.ts
@@ -36,6 +36,9 @@ export class ProfileComponent implements OnInit {
                           if (this.user.userName !== username) {
                             this.setDefaultUser();
                           } else {
+                            if (this.user.imageUrl === '') {
+                              this.user.imageUrl = AppConstants.FALLBACK_PROFILE_ICON;
+                            }
                             this.loggedInUser = true;
                           }
       }, AppConstants.FETCH_TIMEOUT + 50);
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
index 36ac7cb..bfe7ed5 100644
--- a/src/DevHive.Angular/src/app/services/user.service.ts
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -14,7 +14,7 @@ export class UserService {
   constructor() { }
 
   getDefaultUser(): User {
-    return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', '');
+    return new User(Guid.createEmpty(), 'gosho_trapov', 'Gosho', 'Trapov', AppConstants.FALLBACK_PROFILE_ICON);
   }
 
   fetchUserFromSessionStorage(): User {
-- 
cgit v1.2.3