Ymarivint dev

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/app.component.html

@@ -1,8 +1,24 @@
 <!--The content below is only a placeholder and can be replaced.-->
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+
 <div style="text-align:center">
   <img width="100" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
 
+<h2>Here are some links to help you start: </h2>
+
+<ul>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
+  </li>
+  <li>
+    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+  </li>
+</ul>
+
 <app-timeline></app-timeline>
 
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -1,16 +1,18 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { TimeAgoPipe } from 'time-ago-pipe';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { TimelineComponent } from './timeline/timeline.component';
+import { TimeAgoPipe } from 'time-ago-pipe';
+
+
 
 @NgModule({
   declarations: [
     AppComponent,
     TimelineComponent,
-    TimeAgoPipe,
+    TimeAgoPipe
   ],
   imports: [
     BrowserModule,

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
 }