Merge pull request #7 from Team-Kaleidoscope/devHEADv0.2main

Second Stage: Complete

3 files changed, 107 insertions, 211 deletions

diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
index ebcd406..c7e112f 100644
--- a/src/app/components/profile/profile.component.css
+++ b/src/app/components/profile/profile.component.css
@@ -1,105 +1,27 @@
-* {
-  box-sizing: border-box;
+#user-info {
+  font-size: 1.3em;
 }
 
-#content {
-  max-width: 22em;
-  justify-content: start;
+#profile-picture {
+  height: 5rem;
+  width: 5rem;
 }
 
-hr {
-  width: calc(100% - 1em);
-  color: black;
-  border: 1px solid black;
+.sec-info-card {
+  padding-bottom: calc(var(--card-padding) - 0.3em);
 }
 
-form {
-  width: 100%;
+.sec-info-title {
+  padding-bottom: 0.2em;
+  margin-bottom: 0.3em;
 }
 
-/* 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:first-child {
-  margin-left: 0;
-}
-
-/* Top card */
-
-#main-info {
-  display: flex;
-  width: 100%;
-  margin-bottom: .25em
-}
-
-#main-info > img {
-  width: 5em;
-  height: 5em;
-}
-
-#other-main-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
-
-#other-main-info > * {
-  font-size: 1.4em;
-}
-
-#other-main-info *:nth-child(1) {
-  margin-top: auto;
-}
-
-#other-main-info *:nth-last-child(1) {
-  margin-bottom: auto;
-}
-
-#add-friend, #loggedin-password {
-  flex: 0 !important;
-  margin-top: .4em;
-  max-width: 8em;
-  font-size: .6em !important;
-}
-
-#loggedin-password {
-  max-width: 100%;
-}
-
-/* Languages and technologies */
-
-.secondary-info {
-  margin-top: .25em;
-  margin-bottom: .25em;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-/* Posts */
-
-#no-posts {
-  width: 100%;
-  text-align: center;
-  color: gray;
-  margin-top: .2em;
+.none-message {
+  margin-bottom: 0.3em;
 }
 
-#posts {
-  width: 100%;
-  height: 100%;
+.sec-info {
+  width: fit-content;
+  background-color: #424242;
+  margin: 0 0.3em 0.3em 0;
 }
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 0e5f633..c6fdee6 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,60 +1,57 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<div id="content" *ngIf="dataArrived">
-	<nav id="navigation">
-		<button class="submit-btn" (click)="goBack()">ᐊ Back</button>
-		<button class="submit-btn" (click)="navigateToSettings()" *ngIf="isTheLoggedInUser">Settings</button>
-		<button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isTheLoggedInUser && isAdminUser">Panel</button>
-		<button class="submit-btn" (click)="logout()" *ngIf="isTheLoggedInUser">Logout</button>
-	</nav>
-	<hr>
-	<div class="scroll-standalone" (scroll)="onScroll($event)">
-		<div id="main-info" class="rounded-border">
-			<img class="round-image" [src]="user.profilePictureURL" alt=""/>
-			<div id="other-main-info">
-				<div id="name">
-					{{ user.firstName }} {{ user.lastName }}
-				</div>
-				<div id="username">
-					@{{ user.userName }}
-				</div>
-				<form [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
-					<button id="add-friend" type="submit" class="submit-btn">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button>
-					<br>
-					<input id="loggedin-password" type="password" formControlName="password" class="input-field" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
-				</form>
-			</div>
+<main class="scroll-standalone under-navbar flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
+	<section id="user-info" class="card flex-row width-full flex-justify-center">
+		<div>
+			<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
 		</div>
-		<div class="secondary-info rounded-border">
-			Languages:
-			<div *ngFor="let lang of user.languages">
-				<div class="user-language">
-					{{ lang.name }}
-				</div>
+		<div class="flexible flex-col flex-center-align-items flex-justify-center side-padding-dot3">
+			<div class="text-centered">
+				{{ user.firstName }} {{ user.lastName }}
 			</div>
-			<div *ngIf="user.languages.length === 0">
-				&nbsp;None
+			<div>
+				@{{ user.userName }}
 			</div>
+			<button id="add-friend" class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 font-size-dot8 margin-top-dot4" (click)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
+				{{ friendOfUser ? 'Unfriend' : 'Add friend' }}
+			</button>
 		</div>
-		<div class="secondary-info rounded-border">
-			Technologies:
-			<div *ngFor="let tech of user.technologies">
-				<div class="user-language">
-					{{ tech.name }}
-				</div>
-			</div>
-			<div *ngIf="user.technologies.length === 0">
-				&nbsp;None
-			</div>
+	</section>
+	<section class="card sec-info-card flex-col width-full">
+		<div class="sec-info-title border-faded-slim border-bottom-only">
+			Languages
+		</div>
+		<div class="none-message" *ngIf="user.languages.length === 0">
+			None
 		</div>
-		<hr>
-		<div id="posts">
-			<div id="no-posts" *ngIf="userPosts.length === 0">
-				{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+		<div class="flex-row">
+			<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let lang of user.languages">
+				{{ lang.name }}
 			</div>
-			<div *ngFor="let userPost of userPosts">
-				<app-post [paramId]="userPost.postId.toString()"></app-post>
+		</div>
+	</section>
+	<section class="card sec-info-card flex-col width-full">
+		<div class="sec-info-title border-faded-slim border-bottom-only">
+			Technologies
+		</div>
+		<div class="none-message" *ngIf="user.technologies.length === 0">
+			None
+		</div>
+		<div  class="flex-row">
+			<div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let tech of user.technologies">
+				{{ tech.name }}
 			</div>
 		</div>
-	</div>
-</div>
+	</section>
+	<hr class="card-hr">
+	<section>
+		<div class="text-centered" *ngIf="userPosts.length === 0">
+			{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+		</div>
+		<div *ngFor="let userPost of userPosts">
+			<app-post [paramId]="userPost.postId.toString()"></app-post>
+		</div>
+	</section>
+</main>
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index bbf8585..f9f64b5 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -1,18 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { UserService } from 'src/app/services/user.service';
-import { User } from 'src/models/identity/user';
+import { User } from 'src/models/identity/user.model';
 import { AppConstants } from 'src/app/app-constants.module';
-import { HttpErrorResponse } from '@angular/common/http';
 import { Location } from '@angular/common';
 import { LanguageService } from 'src/app/services/language.service';
 import { TechnologyService } from 'src/app/services/technology.service';
-import { Post } from 'src/models/post';
+import { Post } from 'src/models/post.model';
 import { FeedService } from 'src/app/services/feed.service';
 import { TokenService } from 'src/app/services/token.service';
 import { Title } from '@angular/platform-browser';
-import { Friend } from 'src/models/identity/friend';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { FriendService } from 'src/app/services/friend.service';
 
 @Component({
   selector: 'app-profile',
@@ -29,44 +27,34 @@ export class ProfileComponent implements OnInit {
   public isAdminUser = false;
   public dataArrived = false;
   public friendOfUser = false;
-  public updatingFriendship = false;
   public user: User;
   public userPosts: Post[];
-  public updateFrienship: FormGroup;
 
-  constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location, private _tokenService: TokenService) {
+  constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _friendService: FriendService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location, private _tokenService: TokenService) {
     this._titleService.setTitle(this._title);
   }
 
-  private setDefaultUser(): void {
-    this.user = this._userService.getDefaultUser();
-  }
-
   ngOnInit(): void {
     this._urlUsername = this._router.url.substring(9);
 
     const now = new Date();
-    now.setHours(now.getHours() + 2); // accounting for eastern europe timezone
+    now.setHours(now.getHours() + 3); // accounting for eastern europe timezone
     this._timeLoaded = now.toISOString();
     this._currentPage = 1;
 
     this.user = this._userService.getDefaultUser();
     this.userPosts = [];
 
-    this.updateFrienship = this._fb.group({
-      password: new FormControl('')
-    });
-
-    this._userService.getUserByUsernameRequest(this._urlUsername).subscribe(
-      (res: object) => {
+    this._userService.getUserByUsernameRequest(this._urlUsername).subscribe({
+      next: (res: object) => {
         Object.assign(this.user, res);
         this.isAdminUser = this.user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME);
         this.loadLanguages();
       },
-      (err: HttpErrorResponse) => {
+      error: () => {
         this._router.navigate(['/not-found']);
       }
-    );
+    });
   }
 
   private loadLanguages(): void {
@@ -96,17 +84,17 @@ export class ProfileComponent implements OnInit {
   }
 
   private loadPosts(): void {
-    this._feedService.getUserPostsRequest(this.user.userName, this._currentPage++, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe(
-      (result: object) => {
+    this._feedService.getUserPostsRequest(this.user.userName, this._currentPage++, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe({
+      next: (result: object) => {
         const resultArr: Post[] = Object.values(result)[0];
         this.userPosts.push(...resultArr);
         this.finishUserLoading();
       },
-      (err: HttpErrorResponse) => {
+      error: () => {
         this._currentPage = -1;
         this.finishUserLoading();
       }
-    );
+    });
   }
 
   private finishUserLoading(): void {
@@ -114,8 +102,8 @@ export class ProfileComponent implements OnInit {
       this.isUserLoggedIn = true;
       const userFromToken: User = this._userService.getDefaultUser();
 
-      this._userService.getUserFromSessionStorageRequest().subscribe(
-        (tokenRes: object) => {
+      this._userService.getUserFromSessionStorageRequest().subscribe({
+        next: (tokenRes: object) => {
           Object.assign(userFromToken, tokenRes);
 
           if (userFromToken.friends.map(x => x.userName).includes(this._urlUsername)) {
@@ -126,28 +114,16 @@ export class ProfileComponent implements OnInit {
           }
           this.dataArrived = true;
         },
-        (err: HttpErrorResponse) => {
+        error: () => {
           this.logout();
         }
-      );
+      });
     }
     else {
       this.dataArrived = true;
     }
   }
 
-  goBack(): void {
-    this._router.navigate(['/']);
-  }
-
-  navigateToAdminPanel(): void {
-    this._router.navigate(['/admin-panel']);
-  }
-
-  navigateToSettings(): void {
-    this._router.navigate([this._router.url + '/settings']);
-  }
-
   logout(): void {
     this._tokenService.logoutUserFromSessionStorage();
 
@@ -158,34 +134,35 @@ export class ProfileComponent implements OnInit {
   }
 
   modifyFriend(): void {
-    if (this.updatingFriendship) {
-      this.dataArrived = false;
-
-      this._userService.getUserFromSessionStorageRequest().subscribe(
-        (result: object) => {
-          const loggedInUser: User = result as User;
+    this.dataArrived = false;
+    if (this.friendOfUser) {
+      this.removeFriendFromLoggedInUser();
+    }
+    else {
+      this.addFriendToLoggedInUser();
+    }
+  }
 
-          if (this.friendOfUser) {
-            loggedInUser.friends = loggedInUser.friends.filter(x => x.userName !== this.user.userName);
-          }
-          else {
-            const newFriend = new Friend();
-            newFriend.userName = this.user.userName;
-            loggedInUser.friends.push(newFriend);
-          }
+  private addFriendToLoggedInUser(): void {
+    this._friendService.postFriendWithSessionStorageRequest(this.user.userName).subscribe({
+      next: () => {
+        this.reloadPage();
+      },
+      error: () => {
+        this._router.navigate(['/']);
+      }
+    });
+  }
 
-          this._userService.putBareUserFromSessionStorageRequest(loggedInUser, this.updateFrienship.get('password')?.value).subscribe(
-            (resultUpdate: object) => {
-              this.reloadPage();
-            },
-            (err: HttpErrorResponse) => {
-              this._router.navigate(['/']);
-            }
-          );
-        }
-      );
-    }
-    this.updatingFriendship = !this.updatingFriendship;
+  private removeFriendFromLoggedInUser(): void {
+    this._friendService.deleteFriendWithSessionStorageRequest(this.user.userName).subscribe({
+      next: () => {
+        this.reloadPage();
+      },
+      error: () => {
+        this._router.navigate(['/']);
+      }
+    });
   }
 
   onScroll(event: any): void {