Moved from DevHive

3 files changed, 261 insertions, 0 deletions

diff --git a/src/app/components/post-page/post-page.component.css b/src/app/components/post-page/post-page.component.css
new file mode 100644
index 0000000..3eec851
--- /dev/null
+++ b/src/app/components/post-page/post-page.component.css
@@ -0,0 +1,62 @@
+#content {
+  justify-content: flex-start !important;
+}
+
+#content > * {
+  width: 100%;
+}
+
+.many-buttons {
+  width: 100%;
+  display: flex;
+}
+
+.many-buttons > * {
+  flex: 1;
+  margin-right: .3em;
+}
+
+.many-buttons > *:last-of-type {
+  margin-right: 0;
+}
+
+#editPost {
+  display: flex;
+  position: relative;
+}
+
+#new-message-input {
+  flex: 1;
+  box-sizing: border-box;
+}
+
+#file-upload {
+  font-size: inherit;
+  color: transparent;
+  width: 1.99em;
+  height: 1.99em;
+  margin-left: .3em;
+}
+
+#file-upload:hover {
+  cursor: pointer;
+}
+
+#file-upload::-webkit-file-upload-button {
+  visibility: hidden;
+}
+
+#attachment-img {
+  height: 1.99em;
+  width: 1.99em;
+  position: absolute;
+  right: 0;
+  pointer-events: none;
+}
+
+
+.submit-btn {
+  max-width: 98%;
+  margin: 0 auto;
+  margin-bottom: .5em;
+}
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
new file mode 100644
index 0000000..8665865
--- /dev/null
+++ b/src/app/components/post-page/post-page.component.html
@@ -0,0 +1,37 @@
+<app-loading *ngIf="!dataArrived"></app-loading>
+
+<div id="content" *ngIf="dataArrived">
+	<div class="many-buttons"  *ngIf="loggedIn">
+		<button class="submit-btn" type="submit" (click)="backToFeed()">ᐊ Back to feed</button>
+		<button class="submit-btn" type="submit" (click)="backToProfile()">ᐊ Back to profile</button>
+	</div>
+	<button class="submit-btn" type="submit" (click)="toLogin()" *ngIf="!loggedIn">Login</button>
+	<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  id="editPost" [formGroup]="editPostFormGroup"  *ngIf="editingPost" (ngSubmit)="editPost()">
+		<input id="new-message-input" type="text" placeholder="New post message" class="input-field" formControlName="newPostMessage">
+		<img id="attachment-img" src="assets/images/paper-clip.png">
+		<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
+		<input type="submit" style="display: none" />
+	</form>
+	<div class="form-attachments" *ngIf="editingPost">
+		<div *ngFor="let file of files" class="form-attachment">
+			{{ file.name ? file.name : 'Attachment' }}
+			<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
+				☒
+			</div>
+		</div>
+	</div>
+	<form [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
+		<input type="text" placeholder="Add comment" class="input-field" formControlName="newComment">
+		<input type="submit" style="display: none" />
+	</form>
+	<div>
+		<div class="comment" *ngFor="let comm of post?.comments">
+			<app-comment [paramId]="comm.id.toString()"></app-comment>
+		</div>
+	</div>
+<div>
diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts
new file mode 100644
index 0000000..413ff80
--- /dev/null
+++ b/src/app/components/post-page/post-page.component.ts
@@ -0,0 +1,162 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { Guid } from 'guid-typescript';
+import { CommentService } from 'src/app/services/comment.service';
+import { PostService } from 'src/app/services/post.service';
+import { TokenService } from 'src/app/services/token.service';
+import { Post } from 'src/models/post';
+import { CloudinaryService } from 'src/app/services/cloudinary.service';
+
+@Component({
+  selector: 'app-post-page',
+  templateUrl: './post-page.component.html',
+  styleUrls: ['./post-page.component.css']
+})
+export class PostPageComponent implements OnInit {
+  private _title = 'Post';
+  public dataArrived = false;
+  public loggedIn = false;
+  public editable = false;
+  public editingPost = false;
+  public postId: Guid;
+  public post: Post;
+  public files: File[];
+  public editPostFormGroup: FormGroup;
+  public addCommentFormGroup: FormGroup;
+
+  constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService, private _commentService: CommentService, private _cloudinaryService: CloudinaryService){
+    this._titleService.setTitle(this._title);
+  }
+
+  ngOnInit(): void {
+    this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
+    this.postId = Guid.parse(this._router.url.substring(6));
+    this.files = [];
+
+    // 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) => {
+        this.post = result as Post;
+        this.post.fileURLs = Object.values(result)[7];
+        if (this.loggedIn) {
+          this.editable = this.post.creatorUsername === this._tokenService.getUsernameFromSessionStorageToken();
+        }
+        if (this.post.fileURLs.length > 0) {
+          this.loadFiles();
+        }
+        else {
+          this.dataArrived = true;
+        }
+      },
+      (err: HttpErrorResponse) => {
+        this._router.navigate(['/not-found']);
+      }
+    );
+
+    this.editPostFormGroup = this._fb.group({
+      newPostMessage: new FormControl(''),
+      fileUpload: new FormControl('')
+    });
+
+    this.addCommentFormGroup = this._fb.group({
+      newComment: new FormControl('')
+    });
+  }
+
+  private loadFiles(): void {
+    for (const fileURL of this.post.fileURLs) {
+      this._cloudinaryService.getFileRequest(fileURL).subscribe(
+        (result: object) => {
+          const file = result as File;
+          const tmp = {
+            name: fileURL.match('(?<=\/)(?:.(?!\/))+$')?.pop() ?? 'Attachment'
+          };
+
+          Object.assign(file, tmp);
+          this.files.push(file);
+
+          if (this.files.length === this.post.fileURLs.length) {
+            this.dataArrived = true;
+          }
+        }
+      );
+    }
+  }
+
+  backToFeed(): void {
+    this._router.navigate(['/']);
+  }
+
+  backToProfile(): void {
+    this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]);
+  }
+
+  toLogin(): void {
+    this._router.navigate(['/login']);
+  }
+
+  onFileUpload(event: any): void {
+    this.files.push(...event.target.files);
+    this.editPostFormGroup.get('fileUpload')?.reset();
+  }
+
+  removeAttachment(fileName: string): void {
+    this.files = this.files.filter(x => x.name !== fileName);
+  }
+
+  editPost(): void {
+    if (this._tokenService.getTokenFromSessionStorage() === '') {
+      this.toLogin();
+      return;
+    }
+
+    if (this.editingPost) {
+      let newMessage = this.editPostFormGroup.get('newPostMessage')?.value;
+      if (newMessage === '') {
+        newMessage = this.post.message;
+      }
+      this._postService.putPostWithSessionStorageRequest(this.postId, newMessage, this.files).subscribe(
+        (result: object) => {
+          this.reloadPage();
+        }
+      );
+      this.dataArrived = false;
+    }
+    this.editingPost = !this.editingPost;
+  }
+
+  addComment(): void {
+    if (!this.loggedIn) {
+      this._router.navigate(['/login']);
+      return;
+    }
+
+    const newComment = this.addCommentFormGroup.get('newComment')?.value;
+    if (newComment !== '' && newComment !== null) {
+      this._commentService.createCommentWithSessionStorageRequest(this.postId, newComment).subscribe(
+        (result: object) => {
+          this.editPostFormGroup.reset();
+          this.reloadPage();
+        }
+      );
+    }
+  }
+
+  deletePost(): void {
+    this._postService.deletePostWithSessionStorage(this.postId).subscribe(
+      (result: object) => {
+        this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]);
+      }
+    );
+  }
+
+  private reloadPage(): void {
+    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this._router.onSameUrlNavigation = 'reload';
+    this._router.navigate([this._router.url]);
+  }
+}