From 45b2983c5b02418e2b423ede233c846798ed5d13 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sat, 16 Jan 2021 11:25:56 +0200
Subject: Moved fetch functions from the feed, login and register pages to the
 user service and added loading time for the fetch result

---
 .../src/app/components/feed/feed.component.html    |  7 +-
 .../src/app/components/feed/feed.component.ts      | 38 +++++------
 .../src/app/components/login/login.component.ts    | 17 +----
 .../app/components/register/register.component.ts  | 25 ++------
 .../src/app/services/user.service.ts               | 75 ++++++++++++++++++++++
 5 files changed, 104 insertions(+), 58 deletions(-)
 create mode 100644 src/DevHive.Angular/src/app/services/user.service.ts

(limited to 'src/DevHive.Angular')

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 ffbad14..03ce497 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -1,4 +1,9 @@
-<div id="feed-page">
+<!-- TODO: replace with loading component -->
+<div id="content" *ngIf="!dataArrived">
+	Loading...
+</div>
+
+<div id="feed-page" *ngIf="dataArrived">
 	<nav id="profile-bar" class="rounded-border">
 		<img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/>
 		<div id="profile-bar-name">
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 2889e7f..144e76a 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -1,13 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
-import { Guid } from 'guid-typescript';
-import jwt_decode from 'jwt-decode';
-import { FeedService } from 'src/app/services/feed.service';
 import { User } from 'src/models/identity/user';
-import { IJWTPayload } from 'src/interfaces/jwt-payload';
-import { IUserCredentials } from 'src/interfaces/user-credentials';
 import { PostComponent } from '../post/post.component';
+import { UserService } from '../../services/user.service';
 
 @Component({
   selector: 'app-feed',
@@ -16,17 +12,16 @@ import { PostComponent } from '../post/post.component';
 })
 export class FeedComponent implements OnInit {
   private _title = 'Feed';
+  private _timeoutFetchData = 500;
+  public dataArrived = false;
   public user: User;
   public posts: PostComponent[];
 
-  constructor(private titleService: Title, private service: FeedService, private router: Router) {
+  constructor(private titleService: Title, private router: Router, private userService: UserService) {
     this.titleService.setTitle(this._title);
   }
 
   ngOnInit(): void {
-    // Default values, so it doesn't give an error while initializing
-    this.user = new User(Guid.createEmpty(), '', '', '', '');
-
     this.posts = [
       new PostComponent(),
       new PostComponent(),
@@ -35,21 +30,20 @@ export class FeedComponent implements OnInit {
     ];
 
     if (sessionStorage.getItem('UserCred')) {
-      const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? '');
-      const userCred = jwt_decode<IUserCredentials>(jwt.token);
-      this.saveUserData(userCred.ID, jwt.token);
+      // Workaround for waiting the fetch response
+      // TODO: properly wait for it, before loading the page contents
+      setTimeout(() =>
+                 {
+                   this.user = this.userService.fetchUserFromSessionStorage();
+                 },
+                 this._timeoutFetchData);
+      setTimeout(() =>
+                 {
+                   this.dataArrived = true;
+                 },
+                 this._timeoutFetchData + 100);
     } else {
       this.router.navigate(['/login']);
     }
   }
-
-  saveUserData(userId: Guid, authToken: string): void {
-    fetch(`http://localhost:5000/api/User?Id=${userId}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: 'Bearer ' + authToken
-      }
-    }).then(response => response.json()).then(data => Object.assign(this.user, data));
-  }
 }
diff --git a/src/DevHive.Angular/src/app/components/login/login.component.ts b/src/DevHive.Angular/src/app/components/login/login.component.ts
index b3698e2..de40a21 100644
--- a/src/DevHive.Angular/src/app/components/login/login.component.ts
+++ b/src/DevHive.Angular/src/app/components/login/login.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
+import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-login',
@@ -13,7 +14,7 @@ export class LoginComponent implements OnInit {
 
   private _title = 'Login';
 
-  constructor(private titleService: Title, private fb: FormBuilder, private router: Router) {
+  constructor(private titleService: Title, private fb: FormBuilder, private router: Router, private userService: UserService) {
     titleService.setTitle(this._title);
   }
 
@@ -29,19 +30,7 @@ export class LoginComponent implements OnInit {
   }
 
   async onSubmit(): Promise<void> {
-    const response = await fetch('http://localhost:5000/api/User/login', {
-      method: 'POST',
-      body: JSON.stringify({
-        UserName: this.loginUserFormGroup.get('username')?.value,
-        Password: this.loginUserFormGroup.get('password')?.value
-      }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    const userCred: string = await response.json();
-
-    sessionStorage.setItem('UserCred', JSON.stringify(userCred));
+    this.userService.loginUser(this.loginUserFormGroup);
     this.router.navigate(['/']);
   }
 
diff --git a/src/DevHive.Angular/src/app/components/register/register.component.ts b/src/DevHive.Angular/src/app/components/register/register.component.ts
index 7304589..b8bd779 100644
--- a/src/DevHive.Angular/src/app/components/register/register.component.ts
+++ b/src/DevHive.Angular/src/app/components/register/register.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
+import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-register',
@@ -13,7 +14,7 @@ export class RegisterComponent implements OnInit {
 
   private _title = 'Register';
 
-  constructor(private titleService: Title, private fb: FormBuilder, private router: Router) {
+  constructor(private titleService: Title, private fb: FormBuilder, private router: Router, private userService: UserService) {
     titleService.setTitle(this._title);
   }
 
@@ -45,26 +46,8 @@ export class RegisterComponent implements OnInit {
     this.registerUserFormGroup.valueChanges.subscribe(console.log);
   }
 
-  async onSubmit(): Promise<void> {
-    // TODO: add a check for form data validity
-
-    const response = await fetch('http://localhost:5000/api/User/register', {
-      method: 'POST',
-      body: JSON.stringify({
-        UserName: this.registerUserFormGroup.get('username')?.value,
-        Email: this.registerUserFormGroup.get('email')?.value,
-        FirstName: this.registerUserFormGroup.get('firstName')?.value,
-        LastName: this.registerUserFormGroup.get('lastName')?.value,
-        Password: this.registerUserFormGroup.get('password')?.value
-      }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    const userCred: string = await response.json();
-
-    // TODO: don't redirect if there is an error response
-    sessionStorage.setItem('UserCred', JSON.stringify(userCred));
+  onSubmit(): void {
+    this.userService.registerUser(this.registerUserFormGroup);
     this.router.navigate(['/']);
   }
 
diff --git a/src/DevHive.Angular/src/app/services/user.service.ts b/src/DevHive.Angular/src/app/services/user.service.ts
new file mode 100644
index 0000000..35215e0
--- /dev/null
+++ b/src/DevHive.Angular/src/app/services/user.service.ts
@@ -0,0 +1,75 @@
+import { Injectable } from '@angular/core';
+import {Guid} from 'guid-typescript';
+import { User } from '../../models/identity/user';
+import jwt_decode from 'jwt-decode';
+import { IJWTPayload } from '../../interfaces/jwt-payload';
+import { IUserCredentials } from '../../interfaces/user-credentials';
+import { FormGroup } from '@angular/forms';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  constructor() { }
+
+  fetchUserFromSessionStorage(): User {
+    // Get the token and userid from session storage
+    const jwt: IJWTPayload = JSON.parse(sessionStorage.getItem('UserCred') ?? '');
+    const userCred = jwt_decode<IUserCredentials>(jwt.token);
+
+    return this.fetchUser(userCred.ID, jwt.token);
+  }
+
+  fetchUser(userId: Guid, authToken: string): User {
+    const fetchedUser: User = new User(Guid.createEmpty(), '', '', '', '');
+
+    // Fetch the data and assign it to fetchedUser
+    fetch(`http://localhost:5000/api/User?Id=${userId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer ' + authToken
+      }
+    }).then(response => response.json())
+      .then(data => Object.assign(fetchedUser, data));
+
+    return fetchedUser;
+  }
+
+  // TODO: make return bool when the response is an error
+  loginUser(loginUserFormGroup: FormGroup): void {
+    // Save the fetch reponse in the sessionStorage
+    fetch('http://localhost:5000/api/User/login', {
+      method: 'POST',
+      body: JSON.stringify({
+        UserName: loginUserFormGroup.get('username')?.value,
+        Password: loginUserFormGroup.get('password')?.value
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then(response => response.json())
+      .then(data => sessionStorage.setItem('UserCred', JSON.stringify(data)));
+  }
+
+  // TODO: make return bool when the response is an error
+  registerUser(registerUserFormGroup: FormGroup): void {
+    // TODO: add a check for form data validity
+
+    // Like in login, save the fetch reponse in the sessionStorage
+    fetch('http://localhost:5000/api/User/register', {
+      method: 'POST',
+      body: JSON.stringify({
+        UserName: registerUserFormGroup.get('username')?.value,
+        Email: registerUserFormGroup.get('email')?.value,
+        FirstName: registerUserFormGroup.get('firstName')?.value,
+        LastName: registerUserFormGroup.get('lastName')?.value,
+        Password: registerUserFormGroup.get('password')?.value
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then(response => response.json())
+      .then(data => sessionStorage.setItem('UserCred', JSON.stringify(data)));
+  }
+}
-- 
cgit v1.2.3