Add like feature

Author: HugoCapocci

src/app/timeline/timeline.component.html

@@ -7,8 +7,12 @@
     {{ tweet.text }}
   </div>
   <div class="favorite">
-    <i class="far fa-heart"></i>
-    <span *ngIf="tweet.favoriteCount">{{ tweet.favoriteCount }}</span>
+    <i class="button fa-heart" [ngClass]="{
+      'fas': tweet.isLiked,
+      'far': !tweet.isLiked
+    }"
+    (click)="likeTweet(tweet.id)"></i>
+    <span *ngIf="tweet.favoriteCount != null">{{ tweet.favoriteCount }}</span>
   </div>
 </div>
 

src/app/timeline/timeline.component.less

@@ -61,3 +61,7 @@
     cursor: pointer;
   }
 }
+
+.favorite-count {
+  margin-left: 4px;
+}

src/app/timeline/timeline.component.ts

@@ -40,4 +40,15 @@ export class TimelineComponent implements OnInit {
     this.tweets.push(tweet);
   }
 
+  likeTweet(id) {
+    const tweetIndex = this.tweets.findIndex(tweet => tweet.id === id);
+    const tweet = this.tweets[tweetIndex];
+    if(!tweet.isLiked) {
+      tweet.favoriteCount ? tweet.favoriteCount++ : tweet.favoriteCount = 1;
+      tweet.isLiked = true;
+    } else {
+      tweet.favoriteCount--;
+      tweet.isLiked = false;
+    }
+  }
 }

src/app/tweet.ts

@@ -3,5 +3,6 @@ export interface Tweet {
   id: number,
   text: string,
   user: string,
-  favoriteCount?: number
+  favoriteCount?: number,
+  isLiked?: boolean
 }