Merge pull request #3 from Team-Kaleidoscope/major-redesign

Major redesign

3 files changed, 22 insertions, 183 deletions

diff --git a/src/app/components/post-page/post-page.component.css b/src/app/components/post-page/post-page.component.css
index 4f2ae60..7405240 100644
--- a/src/app/components/post-page/post-page.component.css
+++ b/src/app/components/post-page/post-page.component.css
@@ -1,60 +1,3 @@
-#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 {
-  margin: 0 auto;
-  margin-bottom: .5em;
+main {
+  padding-top: 0.5em;
 }
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html
index 5da8cc7..cfca6c0 100644
--- a/src/app/components/post-page/post-page.component.html
+++ b/src/app/components/post-page/post-page.component.html
@@ -1,37 +1,23 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<main id="content" *ngIf="dataArrived">
-	<nav>
-		<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>
-	</nav>
-	<app-post [paramId]="postId.toString()" [index]="0"></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" />
+<main class="centered-content scroll-standalone under-navbar flex-col" *ngIf="dataArrived">
+	<app-post [paramId]="postId.toString()"></app-post>
+	<form class="card flex-col width-full margin-0-top" [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
+		<textarea rows="1" placeholder="Add a new comment" class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2 margin-bot-dot5" formControlName="newComment"></textarea>
+		<button class="border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3" type="submit">
+			Add Comment
+		</button>
 	</form>
-	<figure 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>
+	<hr class="card-hr">
+	<section>
+		<div class="text-centered" *ngIf="post?.comments?.length === 0">
+			Nobody has comented on this post yet!<br>
+			Try refreshing the page!
+		</div>
+		<div class="comment" *ngFor="let comm of post?.comments">
+			<app-comment [paramId]="comm.id.toString()"></app-comment>
 		</div>
-	</figure>
-	<form [formGroup]="addCommentFormGroup" (ngSubmit)="addComment()">
-		<input type="text" placeholder="Add comment" class="input-field" formControlName="newComment">
-		<input type="submit" style="display: none" />
-	</form>
-	<section class="comment" *ngFor="let comm of post?.comments">
-		<app-comment [paramId]="comm.id.toString()"></app-comment>
 	</section>
 </main>
diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts
index a60f4da..0babfdf 100644
--- a/src/app/components/post-page/post-page.component.ts
+++ b/src/app/components/post-page/post-page.component.ts
@@ -7,7 +7,6 @@ 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.model';
-import { CloudinaryService } from 'src/app/services/cloudinary.service';
 
 @Component({
   selector: 'app-post-page',
@@ -18,22 +17,17 @@ 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){
+  constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _postService: PostService, private _commentService: CommentService) {
     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
@@ -41,94 +35,19 @@ export class PostPageComponent implements OnInit {
       next: (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();
-          this.editPostFormGroup.get('newPostMessage')?.setValue(this.post.message);
-        }
-        if (this.post.fileURLs.length > 0) {
-          this.loadFiles();
-        }
-        else {
-          this.dataArrived = true;
-        }
+
+        this.dataArrived = true;
       },
       error: () => {
         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({
-        next: (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) {
-      const newMessage = this.editPostFormGroup.get('newPostMessage')?.value;
-
-      if (newMessage === '' && newMessage !== this.post.message) {
-        this._postService.putPostWithSessionStorageRequest(this.postId, newMessage, this.files).subscribe({
-          next: () => {
-            this.reloadPage();
-          }
-        });
-        this.dataArrived = false;
-      }
-    }
-    this.editingPost = !this.editingPost;
-  }
-
   addComment(): void {
     if (!this.loggedIn) {
       this._router.navigate(['/login']);
@@ -139,21 +58,12 @@ export class PostPageComponent implements OnInit {
     if (newComment !== '' && newComment !== null) {
       this._commentService.createCommentWithSessionStorageRequest(this.postId, newComment).subscribe({
         next: () => {
-          this.editPostFormGroup.reset();
           this.reloadPage();
         }
       });
     }
   }
 
-  deletePost(): void {
-    this._postService.deletePostWithSessionStorage(this.postId).subscribe({
-      next: () => {
-        this._router.navigate(['/profile/' + this._tokenService.getUsernameFromSessionStorageToken()]);
-      }
-    });
-  }
-
   private reloadPage(): void {
     this._router.routeReuseStrategy.shouldReuseRoute = () => false;
     this._router.onSameUrlNavigation = 'reload';