Merge pull request #7 from Team-Kaleidoscope/devHEADv0.2main

Second Stage: Complete

3 files changed, 59 insertions, 226 deletions

diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css
index cb155c6..295a379 100644
--- a/src/app/components/feed/feed.component.css
+++ b/src/app/components/feed/feed.component.css
@@ -1,179 +1,27 @@
-#feed-page {
-  height: 100%;
-  max-width: 40em;
-  box-sizing: border-box;
-  border: .5em solid var(--bg-color);
-
-  margin: 0 auto;
-
-  display: flex;
-}
-
-@media screen and (max-width: 750px) {
-  #profile-bar {
-    display: none !important;
-  }
-  #top-bar-profile-pic {
-    display: initial;
-  }
-}
-@media screen and (min-width: 750px) {
-  #profile-bar {
-    display: initial;
-  }
-  #top-bar-profile-pic {
-    display: none !important;
-  }
-}
-
-/* Content */
-
-#feed-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Profile bar */
-
-#profile-bar {
-  width: 20%;
-  height: fit-content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  box-sizing: border-box;
-  background-color: var(--bg-color);
-
-  margin-right: .5em;
-  padding-bottom: 1em;
-  padding: .5em;
-  border-radius: .6em;
-}
-
-#profile-bar-profile-pic {
-  width: 7em;
-  height: 7em;
-  box-sizing: border-box;
-  padding: .5em;
-}
-
-#profile-bar-name {
-  text-align: center;
-}
-
-#profile-bar-username {
-  margin: .5em 0;
-}
-
-#profile-bar > #profile-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/* Top bar */
-
-#top-bar {
-  display: flex;
-  flex-direction: column;
-  width: 98%;
-  margin: 0 auto;
-  margin-bottom: .5em;
-  box-sizing: border-box;
-}
-
-#top-bar-profile-pic {
-  height: 2.5em;
-  width: 2.5em;
-  margin-right: .5em;
-}
-
-#top-bar-profile-pic > img {
-  height: inherit;
-  width: inherit;
-}
-
-#top-bar-open-chat {
-  /* Until implemented */
+section:empty {
   display: none;
 }
 
-#main-content {
-  display: flex;
-}
-
-/* Create post */
-
-#create-post-form {
-  width: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
-
-#form-inputs {
-  display: flex;
-}
-
-#top-bar-create-post {
-  flex: 1;
-  font-size: inherit;
+#create-post {
   width: 100%;
-  height: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
-  border: 2px solid var(--bg-color);
-  border-radius: .6em;
-}
-
-#file-upload {
-  font-size: inherit;
-  color: transparent;
-  width: 1.5em;
-  height: 1.5em;
+  margin-top: 1em;
 }
 
-#file-upload:hover {
-  cursor: pointer;
+#attachments-btns img, .file-button > input {
+  height: 1.4em;
+  width: 1.4em;
 }
 
-#file-upload::-webkit-file-upload-button {
-  visibility: hidden;
+.file-button {
+  position: relative;
 }
 
-#attachment-img {
-  height: 1.5em;
-  width: 1.5em;
+.file-button > img {
   position: absolute;
-  right: .4em;
   pointer-events: none;
 }
 
-/* Posts */
-
-#no-posts-msg {
-  width: 100%;
-  margin-top: 1em;
-  color: gray;
-  text-align: center;
-}
-
-/* Elements, that act as buttons */
-
-#profile-bar > #profile-info:hover,
-#top-bar-profile-pic:hover {
-  cursor: pointer;
-}
-
-/* Can't copy text from */
-
-#profile-bar,
-.vote {
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+/Edge */
-  user-select: none; /* Standard */
+.file-button > input {
+  font-size: inherit;
+  color: transparent;
 }
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 1a03dcc..4832456 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -1,52 +1,38 @@
+<app-navbar></app-navbar>
+
 <app-loading *ngIf="!dataArrived"></app-loading>
 
-<div id="feed-page" *ngIf="dataArrived">
-	<nav id="profile-bar" class="round-image rounded-border">
-		<div id="profile-info" (click)="goToProfile()">
-			<img id="profile-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt=""/>
-			<div id="profile-bar-name">
-				{{ user.firstName }} {{ user.lastName }}
+<main class="centered-content scroll-standalone under-navbar flex-col flex-justify-start" *ngIf="dataArrived">
+	<form id="create-post" class="card flex-col" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
+		<textarea class="textarea-new-msg border-faded-slim border-bottom-only padding-dot2" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
+		<section class="flex-row flex-justify-start align-children-center padding-top-bot-dot5">
+			<div class="file-button hover-half-opacity click-effect">
+				<img src="/assets/icons/tabler-icon-paperclip.svg">
+				<input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 			</div>
-			<div id="profile-bar-username">
-				@{{ user.userName }}
+		</section>
+		<section class="flex-row bot-padding-dot6ger">
+			<div *ngFor="let file of files" class="form-attachment border-faded-slim flexible flex-row flex-no-wrap flex-center-align-items padding-dot2 margin-top-bot-dot2">
+				<div class="flexible">
+					{{ file.name ? file.name : 'Attachment' }}
+				</div>
+				<div class="flex-col hover-half-opacity border-radius-dot2 click-effect" (click)="removeAttachment(file.name)">
+					<img src="/assets/icons/tabler-icon-x.svg">
+				</div>
 			</div>
+		</section>
+		<button class="border-faded-slim padding-dot2 lighter-hover click-effect border-radius-dot3">
+			Post
+		</button>
+	</form>
+	<hr class="card-hr">
+	<section id="posts" (scroll)="onScroll($event)">
+		<div class="text-centered" *ngIf="posts.length === 0">
+			None of your friends have posted anything yet!<br>
+			Try refreshing your page!
 		</div>
-		<button class="submit-btn" (click)="goToSettings()">Settings</button>
-		<button class="submit-btn" (click)="logout()">Logout</button>
-	</nav>
-	<div id="feed-content">
-		<nav id="top-bar">
-			<div id="main-content">
-				<img id="top-bar-profile-pic" class="round-image" [src]="user.profilePictureURL" alt="" (click)="goToProfile()">
-				<form id="create-post-form" class="rounded-border" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
-					<div id="form-inputs">
-						<input id="top-bar-create-post" type="text" formControlName="newPostMessage" placeholder="What's on your mind?"/>
-						<input type="submit" style="display: none" /> <!-- You need this element, so when you press enter the request is sent -->
-						<img id="attachment-img" src="assets/images/paper-clip.png">
-						<input id="file-upload" type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
-					</div>
-					<div class="form-attachments">
-						<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>
-				<a id="top-bar-open-chat" href="">
-					<img src="assets/images/feed/chat-pic.png" alt=""/>
-				</a>
-			</div>
-		</nav>
-		<div id="posts" class="scroll-standalone" (scroll)="onScroll($event)">
-			<div id="no-posts-msg" *ngIf="posts.length === 0">
-				None of your friends have posted anything yet!<br>
-				Try refreshing your page!
-			</div>
-			<div *ngFor="let friendPost of posts" class="post">
-				<app-post [paramId]="friendPost.postId.toString()"></app-post>
-			</div>
+		<div *ngFor="let friendPost of posts" class="post">
+			<app-post [paramId]="friendPost.postId.toString()"></app-post>
 		</div>
-	</div>
-</div>
+	</section>
+</main>
diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts
index b412b3c..4100e41 100644
--- a/src/app/components/feed/feed.component.ts
+++ b/src/app/components/feed/feed.component.ts
@@ -1,12 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Router } from '@angular/router';
-import { User } from 'src/models/identity/user';
+import { User } from 'src/models/identity/user.model';
 import { UserService } from '../../services/user.service';
 import { AppConstants } from 'src/app/app-constants.module';
-import { HttpErrorResponse } from '@angular/common/http';
 import { FeedService } from 'src/app/services/feed.service';
-import { Post } from 'src/models/post';
+import { Post } from 'src/models/post.model';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { PostService } from 'src/app/services/post.service';
 import { TokenService } from 'src/app/services/token.service';
@@ -42,7 +41,7 @@ export class FeedComponent implements OnInit {
     this.files = [];
 
     const now = new Date();
-    now.setHours(now.getHours() + 2); // accounting for eastern european timezone
+    now.setHours(now.getHours() + 3); // accounting for eastern european timezone
     this._timeLoaded = now.toISOString();
 
     this.createPostFormGroup = this._fb.group({
@@ -50,27 +49,27 @@ export class FeedComponent implements OnInit {
       fileUpload: new FormControl('')
     });
 
-    this._userService.getUserFromSessionStorageRequest().subscribe(
-      (res: object) => {
+    this._userService.getUserFromSessionStorageRequest().subscribe({
+      next: (res: object) => {
         Object.assign(this.user, res);
         this.loadFeed();
       },
-      (err: HttpErrorResponse) => {
+      error: () => {
         this.logout();
       }
-    );
+    });
   }
 
   private loadFeed(): void {
-    this._feedService.getUserFeedFromSessionStorageRequest(this._currentPage++, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe(
-      (result: object) => {
+    this._feedService.getUserFeedFromSessionStorageRequest(this._currentPage++, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe({
+      next: (result: object) => {
         this.posts.push(...Object.values(result)[0]);
         this.finishUserLoading();
       },
-      (err) => {
+      error: () => {
         this.finishUserLoading();
       }
-    );
+    });
   }
 
   private finishUserLoading(): void {
@@ -103,14 +102,14 @@ export class FeedComponent implements OnInit {
     const postMessage = this.createPostFormGroup.get('newPostMessage')?.value;
     this.dataArrived = false;
 
-    this._postService.createPostWithSessionStorageRequest(postMessage, this.files).subscribe(
-      (result: object) => {
+    this._postService.createPostWithSessionStorageRequest(postMessage, this.files).subscribe({
+      next: () => {
         this.goToProfile();
       },
-      (err: HttpErrorResponse) => {
+      error: () => {
         this.dataArrived = true;
       }
-    );
+    });
   }
 
   onScroll(event: any): void {