diff options
12 files changed, 126 insertions, 28 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.css b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css index 50adee5..b1814fb 100644 --- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.css +++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.css @@ -6,13 +6,21 @@ width: 100%; } -#back-btns { +.many-buttons { width: 100%; display: flex; } -.submit-btn { +.many-buttons > * { flex: 1; + margin-right: .3em; +} + +.many-buttons:last-of-type { + margin-right: 0; +} + +.submit-btn { max-width: 98%; margin: 0 auto; margin-bottom: .5em; diff --git a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html index 4f6f33d..40a2aba 100644 --- a/src/DevHive.Angular/src/app/components/post-page/post-page.component.html +++ b/src/DevHive.Angular/src/app/components/post-page/post-page.component.html @@ -1,6 +1,14 @@ <div id="content"> - <div id="back-btns"> + <div class="many-buttons"> <button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button> </div> <app-post [paramId]="postId.toString()"></app-post> + <div class="many-buttons" *ngIf="editable"> + <button class="submit-btn" (click)="editPost()">Edit post</button> + <button class="submit-btn delete-btn" (click)="deletePost()">Delete post</button> + </div> + <form *ngIf="editingPost" [formGroup]="editPostFormGroup" (ngSubmit)="editPost()"> + <input type="text" placeholder="New post message" class="input-field" formControlName="newPostMessage"> + <input type="submit" style="display: none" /> + </form> <div> 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/components/profile-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css index 83f66f1..716ffc9 100644 --- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css @@ -78,11 +78,6 @@ hr { margin-top: 1em; } -#delete-account:hover { - color: indianred; - border-color: indianred !important; -} - #confirm-delete { box-sizing: border-box; width: 100%; diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html index c38a6d7..ef5e8fe 100644 --- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html +++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html @@ -101,6 +101,6 @@ <div id="confirm-delete" *ngIf="deleteAccountConfirm"> Are you sure you want to delete your account?<br>This is permanent! </div> - <button id="delete-account" class="submit-btn" (click)="deleteAccount()">Delete account</button> + <button class="submit-btn delete-btn" (click)="deleteAccount()">Delete account</button> </div> </div> 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); + } } diff --git a/src/DevHive.Angular/src/app/services/token.service.ts b/src/DevHive.Angular/src/app/services/token.service.ts index 8131228..62bc07e 100644 --- a/src/DevHive.Angular/src/app/services/token.service.ts +++ b/src/DevHive.Angular/src/app/services/token.service.ts @@ -32,6 +32,15 @@ export class TokenService { return userCred.ID; } + getUsernameFromSessionStorageToken(): string { + const jwt: IJWTPayload = { + token: this.getTokenFromSessionStorage() + }; + const userCred = jwt_decode<IUserCredentials>(jwt.token); + + return userCred.Username; + } + logoutUserFromSessionStorage(): void { sessionStorage.removeItem(AppConstants.SESSION_TOKEN_KEY); } diff --git a/src/DevHive.Angular/src/interfaces/user-credentials.ts b/src/DevHive.Angular/src/interfaces/user-credentials.ts index d91f715..bb47540 100644 --- a/src/DevHive.Angular/src/interfaces/user-credentials.ts +++ b/src/DevHive.Angular/src/interfaces/user-credentials.ts @@ -2,4 +2,5 @@ import { Guid } from 'guid-typescript'; export interface IUserCredentials { ID: Guid; + Username: string; } diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css index 2af47c6..6849190 100644 --- a/src/DevHive.Angular/src/styles.css +++ b/src/DevHive.Angular/src/styles.css @@ -215,3 +215,8 @@ input:focus, button:focus { transition: 0s; transform: scale(.9); } + +.delete-btn:hover { + color: indianred; + border-color: indianred !important; +} diff --git a/src/DevHive.Data/Repositories/PostRepository.cs b/src/DevHive.Data/Repositories/PostRepository.cs index 07b5875..f9f2475 100644 --- a/src/DevHive.Data/Repositories/PostRepository.cs +++ b/src/DevHive.Data/Repositories/PostRepository.cs @@ -24,6 +24,7 @@ namespace DevHive.Data.Repositories return await this._context.Posts .Include(x => x.Comments) .Include(x => x.Creator) + .Include(x => x.Rating) .FirstOrDefaultAsync(x => x.Id == id); } @@ -44,6 +45,7 @@ namespace DevHive.Data.Repositories public override async Task<bool> EditAsync(Guid id, Post newEntity) { Post post = await this.GetByIdAsync(id); + var ratingId = post.RatingId; this._context .Entry(post) @@ -58,6 +60,8 @@ namespace DevHive.Data.Repositories foreach(var comment in newEntity.Comments) post.Comments.Add(comment); + post.RatingId = ratingId; + this._context.Entry(post).State = EntityState.Modified; return await this.SaveChangesAsync(this._context); |