Add like feature

Author: HugoCapocci

README.md

@@ -1,4 +1,4 @@
-# AngularShopTutorial
+# AngularTutorial
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.2.
 
@@ -25,3 +25,19 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+<hr/>
+
+# Exercice
+
+## Setup:
+
+  - Fork the project, and clone it
+  - create your own dev branch `git checkout -b dev`
+  - launch `npm install` to download dependencies
+
+## Sync with forked repository:
+
+ - use command `git fetch upstream` to retrieve master branch from forked repository. It will create a local upstream/master branch.
+ - go to your local master branch: `git checkout master`
+ - merge the upstream master to your local master: ` git merge upstream/master`. You're up to date!

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
 }