fixed rating not beeing highlighted on init and and added capability of rating to handle multiple posts

3 files changed, 12 insertions, 16 deletions

diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index 230c27b..5ff2dca 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -40,8 +40,8 @@
 				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 *ngFor="let friendPost of posts; let i = index" class="post">
+				<app-post [paramId]="friendPost.postId.toString()" [index]="i"></app-post>
 			</div>
 		</section>
 	</section>
diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts
index 89620d7..a38d507 100644
--- a/src/app/components/post/post.component.ts
+++ b/src/app/components/post/post.component.ts
@@ -20,6 +20,7 @@ export class PostComponent implements OnInit {
   public votesNumber: number;
   public timeCreated: string;
   @Input() paramId: string;
+  @Input() index: number;
   public loggedIn = false;
   private voteBtns: HTMLCollectionOf<HTMLElement>;
 
@@ -33,9 +34,7 @@ export class PostComponent implements OnInit {
 
     this._postService.getPostRequest(Guid.parse(this.paramId)).subscribe(
       (result: object) => {
-        Object.assign(this.post, result);
-
-        console.log(this.post.postId);
+        Object.assign(this.post, result);      
 
         this.post.fileURLs = Object.values(result)[7];
         this.votesNumber = this.post.currentRating;
@@ -46,17 +45,16 @@ export class PostComponent implements OnInit {
 
         this.loadUser();        
       }
-    );
-
-    window.addEventListener("load", () => {
-      this.highlightButtonsOnInit();
-    });
+    ); 
   }
 
   private loadUser(): void {
     this._userService.getUserByUsernameRequest(this.post.creatorUsername).subscribe(
       (result: object) => {
         Object.assign(this.user, result);
+
+        this.highlightButtonsOnInit();
+
         this.loaded = true;
       }
     );
@@ -123,8 +121,8 @@ export class PostComponent implements OnInit {
   }
 
   private changeColorOfVoteButton(isUpvoted: boolean, isDownvoted: boolean): void {
-    this.voteBtns.item(0)!.style.backgroundColor = (isUpvoted) ? 'lightblue' : 'white';
-    this.voteBtns.item(1)!.style.backgroundColor = (isDownvoted) ? 'lightblue' : 'white';
+    this.voteBtns.item(this.index * 2)!.style.backgroundColor = (isUpvoted) ? 'lightblue' : 'white';
+    this.voteBtns.item((this.index * 2) + 1)!.style.backgroundColor = (isDownvoted) ? 'lightblue' : 'white';
   }
 
   private highlightButtonsOnInit(): void {
@@ -132,8 +130,6 @@ export class PostComponent implements OnInit {
       (x: object) => {
         const isLike: boolean = Object.values(x)[3];
 
-        console.log(this.voteBtns);
-
         this.changeColorOfVoteButton(isLike, !isLike);
       }
     );
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 0e5f633..5c21cee 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -52,8 +52,8 @@
 			<div id="no-posts" *ngIf="userPosts.length === 0">
 				{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
 			</div>
-			<div *ngFor="let userPost of userPosts">
-				<app-post [paramId]="userPost.postId.toString()"></app-post>
+			<div *ngFor="let userPost of userPosts; let i = index">
+				<app-post [paramId]="userPost.postId.toString()" [index]="i"></app-post>
 			</div>
 		</div>
 	</div>