Http Exercise - Articles and Comments

src/app/articles.service.ts

@@ -1,14 +1,15 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ArticlesService {
-
   readonly baseUrl = 'https://conduit.productionready.io/api/';
+  hardcodedMail = 'utnfrro@utn.frro';
+  hardcodedPass = 'utnutnutn';
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {}
   getArticles() {
     const url = this.baseUrl + 'articles';
     return this.http.get<any>(url);
@@ -17,4 +18,44 @@ export class ArticlesService {
     const url = this.baseUrl + 'tags';
     return this.http.get<any>(url);
   }
+  getArticlesByTag(tag: string) {
+    const url = this.baseUrl + `articles?tag=${tag}`;
+    return this.http.get<any>(url);
+  }
+
+  postComment(text, slug) {
+    const loginUrl = this.baseUrl + 'users/login';
+    this.http
+      .post(loginUrl, {
+        user: {
+          email: this.hardcodedMail,
+          password: this.hardcodedPass,
+        },
+      })
+      .subscribe((response) => {
+        const token = response['user']['token'];
+        const url = this.baseUrl + `/articles/${slug}/comments`;
+        this.http
+          .post(
+            url,
+            {
+              comment: { body: text },
+            },
+            {
+              headers: new HttpHeaders({
+                'Content-Type': 'application/json',
+                Authorization: 'Token ' + token,
+              }),
+            }
+          )
+          .subscribe((res) =>
+            alert(
+              'Thanks ' +
+                res['comment']['author']['username'] +
+                ', your comment was saved'
+            )
+          ),
+          (err) => console.log(err);
+      });
+  }
 }

src/app/articles/articles.component.html

@@ -1,9 +1,31 @@
-
-<div *ngFor="let article of articles">
-    <h1>{{article.title}} </h1>
-    <p>{{article.body}}</p>
+<div class="title">
+  <h1>Filter articles by your favorite TAG</h1>
 </div>
 
-<button (click)="loadArticles()">Cargar</button>
-{{tags | json}}
-<button (click)="loadTags()">Cargar Tags</button>
+<div *ngFor="let tag of tags">
+  <button (click)="showArticlesForTag(tag)" class="tag">{{ tag }}</button>
+</div>
+<br />
+<div class="article" *ngFor="let article of articles">
+  <h1>{{ article.title }}</h1>
+  <h3>{{ article.description }}</h3>
+  <p>{{ article.body }}</p>
+  <p><strong>Article created at</strong> {{ article.createdAt }}</p>
+  <div *ngFor="let ownTag of article.tagList">
+    <button class="ownTag">{{ ownTag }}</button>
+  </div>
+  <textarea
+    ref-textarea
+    rows="3"
+    cols="60"
+    maxlength="150"
+    placeholder="Leave a comment"
+  ></textarea>
+  <br />
+  <button
+    class="tag"
+    (click)="commentArticle({ text: textarea.value, slug: article.slug })"
+  >
+    Comment
+  </button>
+</div>

src/app/articles/articles.component.scss

@@ -0,0 +1,36 @@
+.article {
+    border: 2px solid lightgray;
+    background-color: #d4d4d4;
+    padding: 2em;
+    margin: 1em;
+}
+
+.tag{
+    border: none;
+    border-radius: 3px;
+    background-color: steelblue;
+    color: white;
+    padding: 5px;
+    margin: 2px;
+    float: left;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+.ownTag{
+    border: none;
+    border-radius: 3px;
+    background-color: rgb(57, 185, 157);
+    padding: 5px;
+    margin: 2px;
+    float: right;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+.title{
+    margin-left: 10px;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+textarea {
+    resize: none;
+}

src/app/articles/articles.component.ts

@@ -4,21 +4,31 @@ import { ArticlesService } from '../articles.service';
 @Component({
   selector: 'app-articles',
   templateUrl: './articles.component.html',
-  styleUrls: ['./articles.component.scss']
+  styleUrls: ['./articles.component.scss'],
 })
 export class ArticlesComponent implements OnInit {
-
-  articles:any = []
+  articles: any = [];
   tags: any = [];
-  constructor(private service: ArticlesService) { }
-
-  ngOnInit(): void {
-
+  constructor(private service: ArticlesService) {
+    this.loadTags();
   }
+
+  ngOnInit(): void {}
   loadArticles() {
-    this.service.getArticles().subscribe(response => this.articles = response.articles);
+    this.service
+      .getArticles()
+      .subscribe((response) => (this.articles = response.articles));
   }
   loadTags() {
-    this.service.getTags().subscribe(response => this.tags = response.tags);
+    this.service.getTags().subscribe((response) => (this.tags = response.tags));
+  }
+  showArticlesForTag(tag) {
+    this.service
+      .getArticlesByTag(tag)
+      .subscribe((response) => (this.articles = response.articles.slice(0, 5)));
+  }
+  commentArticle({text, slug}) {
+    this.service
+      .postComment(text, slug);
   }
 }