Implemented edit post button functionality; fixed edit and create post requests in post service

4 files changed, 87 insertions, 19 deletions

diff --git a/src/DevHive.Angular/package-lock.json b/src/DevHive.Angular/package-lock.json
index 40595d4..166d493 100644
--- a/src/DevHive.Angular/package-lock.json
+++ b/src/DevHive.Angular/package-lock.json
@@ -2216,8 +2216,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "atob": {
       "version": "2.1.2",
@@ -3159,7 +3158,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -4014,8 +4012,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "depd": {
       "version": "1.1.2",
@@ -5114,13 +5111,12 @@
       "dev": true
     },
     "form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+      "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
       "requires": {
         "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
+        "combined-stream": "^1.0.8",
         "mime-types": "^2.1.12"
       }
     },
@@ -7334,14 +7330,12 @@
     "mime-db": {
       "version": "1.44.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
-      "dev": true
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
     },
     "mime-types": {
       "version": "2.1.27",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
       "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
-      "dev": true,
       "requires": {
         "mime-db": "1.44.0"
       }
@@ -10069,6 +10063,17 @@
         "uuid": "^3.3.2"
       },
       "dependencies": {
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.6",
+            "mime-types": "^2.1.12"
+          }
+        },
         "qs": {
           "version": "6.5.2",
           "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
diff --git a/src/DevHive.Angular/package.json b/src/DevHive.Angular/package.json
index 1f09ab1..967483a 100644
--- a/src/DevHive.Angular/package.json
+++ b/src/DevHive.Angular/package.json
@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "^11.0.7",
     "@angular/router": "^11.0.7",
     "@types/jwt-decode": "^3.1.0",
+    "form-data": "^3.0.0",
     "guid-typescript": "^1.0.9",
     "jwt-decode": "^3.1.2",
     "normalize.css": "^8.0.1",
diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
index 56e146d..3705ae6 100644
--- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
+++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.ts
@@ -1,6 +1,11 @@
+import {HttpErrorResponse} from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
+import {PostService} from 'src/app/services/post.service';
+import {TokenService} from 'src/app/services/token.service';
+import {Post} from 'src/models/post';
 
 @Component({
   selector: 'app-post-page',
@@ -8,16 +13,55 @@ import { Guid } from 'guid-typescript';
   styleUrls: ['./post-page.component.css']
 })
 export class PostPageComponent implements OnInit {
+  public editable = false;
+  public editingPost = false;
   public postId: Guid;
+  public editPostFormGroup: FormGroup;
 
-  constructor(private _router: Router)
+  constructor(private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService)
   { }
 
   ngOnInit(): void {
     this.postId = Guid.parse(this._router.url.substring(6));
+
+    // Gets the post and the logged in user and compares them,
+    // to determine if the current post is made by the user
+    this._postService.getPostRequest(this.postId).subscribe(
+      (result: object) => {
+        const post = result as Post;
+        this.editable = post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken();
+      },
+      (err: HttpErrorResponse) => {
+        this._router.navigate(['/not-found']);
+      }
+    );
+
+    this.editPostFormGroup = this._fb.group({
+      newPostMessage: new FormControl('')
+    });
   }
 
   backToFeed(): void {
     this._router.navigate(['/']);
   }
+
+  editPost(): void {
+    if (this.editingPost) {
+      const newMessage = this.editPostFormGroup.get('newPostMessage')?.value;
+      if (newMessage !== '') {
+        this._postService.putPostFromSessionStorageRequest(this.postId, newMessage).subscribe(
+          (result: object) => {
+            // Reload the page
+            this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+            this._router.onSameUrlNavigation = 'reload';
+            this._router.navigate([this._router.url]);
+          }
+        );
+      }
+    }
+    this.editingPost = !this.editingPost;
+  }
+
+  deletePost(): void {
+  }
 }
diff --git a/src/DevHive.Angular/src/app/services/post.service.ts b/src/DevHive.Angular/src/app/services/post.service.ts
index a35a323..c8f9a61 100644
--- a/src/DevHive.Angular/src/app/services/post.service.ts
+++ b/src/DevHive.Angular/src/app/services/post.service.ts
@@ -1,5 +1,6 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import * as FormData from 'form-data';
 import { Guid } from 'guid-typescript';
 import { Observable } from 'rxjs';
 import { Post } from 'src/models/post';
@@ -26,18 +27,23 @@ export class PostService {
     return this.createPostRequest(userId, token, postMessage);
   }
 
+  putPostFromSessionStorageRequest(postId: Guid, newMessage: string): Observable<object> {
+    const userId = this._tokenService.getUserIdFromSessionStorageToken();
+    const token = this._tokenService.getTokenFromSessionStorage();
+
+    return this.putPostRequest(userId, token, postId, newMessage);
+  }
+
   /* Post requests */
 
   createPostRequest(userId: Guid, authToken: string, postMessage: string): Observable<object> {
-    const body = {
-      message: postMessage,
-      files: []
-    };
+    const form = new FormData();
+    form.append('message', postMessage);
     const options = {
       params: new HttpParams().set('UserId', userId.toString()),
       headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
     };
-    return this._http.post(AppConstants.API_POST_URL, body, options);
+    return this._http.post(AppConstants.API_POST_URL, form, options);
   }
 
   getPostRequest(id: Guid): Observable<object> {
@@ -46,4 +52,16 @@ export class PostService {
     };
     return this._http.get(AppConstants.API_POST_URL, options);
   }
+
+  putPostRequest(userId: Guid, authToken: string, postId: Guid, newMessage: string): Observable<object> {
+    const body = {
+      postId: postId.toString(),
+      newMessage: newMessage
+    };
+    const options = {
+      params: new HttpParams().set('UserId', userId.toString()),
+      headers: new HttpHeaders().set('Authorization', 'Bearer ' + authToken)
+    };
+    return this._http.put(AppConstants.API_POST_URL, body, options);
+  }
 }