From 7e65be819767f0ce26e5bbe7ad0ede57002cda0e Mon Sep 17 00:00:00 2001
From: Joshua <acciarrijoshua@gmail.com>
Date: Thu, 16 Jul 2020 19:59:11 -0300
Subject: [PATCH 1/4] First exercise. Articles filtered by a Tag

---
 src/app/articles.service.ts              |  4 +++
 src/app/articles/articles.component.html | 24 ++++++++++++------
 src/app/articles/articles.component.scss | 32 ++++++++++++++++++++++++
 src/app/articles/articles.component.ts   | 24 +++++++++++-------
 4 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts
index 060f616..7809152 100644
--- a/src/app/articles.service.ts
+++ b/src/app/articles.service.ts
@@ -17,4 +17,8 @@ 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);
+  }
 }
diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html
index 404cd99..4453f2b 100644
--- a/src/app/articles/articles.component.html
+++ b/src/app/articles/articles.component.html
@@ -1,9 +1,19 @@
-
-<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>
+    </div>    
+
+
diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss
index e69de29..4146eb0 100644
--- a/src/app/articles/articles.component.scss
+++ b/src/app/articles/articles.component.scss
@@ -0,0 +1,32 @@
+.article {
+    border: 2px solid lightgray;
+    background-color: silver;
+    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;
+}
\ No newline at end of file
diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts
index 434bf47..edc6497 100644
--- a/src/app/articles/articles.component.ts
+++ b/src/app/articles/articles.component.ts
@@ -4,21 +4,27 @@ 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)));
   }
 }

From 0aa6997ec0202091d5823cbf7282bc7c412012ae Mon Sep 17 00:00:00 2001
From: Joshua <acciarrijoshua@gmail.com>
Date: Thu, 16 Jul 2020 20:52:35 -0300
Subject: [PATCH 2/4] Comment added and Visual changes

---
 src/app/articles/articles.component.html | 38 ++++++++++++++----------
 src/app/articles/articles.component.scss |  6 +++-
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html
index 4453f2b..5d952ba 100644
--- a/src/app/articles/articles.component.html
+++ b/src/app/articles/articles.component.html
@@ -1,19 +1,25 @@
 <div class="title">
-    <h1>Filter articles by your favorite TAG</h1> 
+  <h1>Filter articles by your favorite TAG</h1>
 </div>
 
-    <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>
-    </div>    
-
-
+<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
+    rows="3"
+    cols="60"
+    maxlength="150"
+    placeholder="Leave a comment"
+  ></textarea>
+  <br>
+  <button class="tag">Comment</button>
+</div>
diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss
index 4146eb0..5289da4 100644
--- a/src/app/articles/articles.component.scss
+++ b/src/app/articles/articles.component.scss
@@ -1,6 +1,6 @@
 .article {
     border: 2px solid lightgray;
-    background-color: silver;
+    background-color: #d4d4d4;
     padding: 2em;
     margin: 1em;
 }
@@ -29,4 +29,8 @@
 .title{
     margin-left: 10px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+textarea {
+    resize: none;
 }
\ No newline at end of file

From 94c3bbc1e012a29255d1b8a11945668b68122b0e Mon Sep 17 00:00:00 2001
From: Joshua <acciarrijoshua@gmail.com>
Date: Thu, 16 Jul 2020 21:28:13 -0300
Subject: [PATCH 3/4] Implementing Post Comment

---
 src/app/articles.service.ts              | 22 ++++++++++++++++++----
 src/app/articles/articles.component.html |  4 ++--
 src/app/articles/articles.component.ts   | 16 ++++++++++------
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts
index 7809152..4bbee50 100644
--- a/src/app/articles.service.ts
+++ b/src/app/articles.service.ts
@@ -2,13 +2,14 @@ import { Injectable } from '@angular/core';
 import { HttpClient } 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,8 +18,21 @@ export class ArticlesService {
     const url = this.baseUrl + 'tags';
     return this.http.get<any>(url);
   }
-  getArticlesByTag(tag: string){
+  getArticlesByTag(tag: string) {
     const url = this.baseUrl + `articles?tag=${tag}`;
     return this.http.get<any>(url);
   }
+  postComment(comment: string) {
+    const loginUrl = this.baseUrl + 'users/login';
+    this.http
+      .post(loginUrl, {
+        user: {
+          email: this.hardcodedMail,
+          password: this.hardcodedPass,
+        },
+      })
+      .subscribe(
+        (response) => console.log(response)
+      );
+  }
 }
diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html
index 5d952ba..154d1ff 100644
--- a/src/app/articles/articles.component.html
+++ b/src/app/articles/articles.component.html
@@ -14,12 +14,12 @@ <h3>{{ article.description }}</h3>
   <div *ngFor="let ownTag of article.tagList">
     <button class="ownTag">{{ ownTag }}</button>
   </div>
-  <textarea
+  <textarea ref-textarea
     rows="3"
     cols="60"
     maxlength="150"
     placeholder="Leave a comment"
   ></textarea>
   <br>
-  <button class="tag">Comment</button>
+  <button class="tag" (click)="commentArticle(textarea.value)">Comment</button>
 </div>
diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts
index edc6497..736f3b2 100644
--- a/src/app/articles/articles.component.ts
+++ b/src/app/articles/articles.component.ts
@@ -9,7 +9,9 @@ import { ArticlesService } from '../articles.service';
 export class ArticlesComponent implements OnInit {
   articles: any = [];
   tags: any = [];
-  constructor(private service: ArticlesService) {this.loadTags()}
+  constructor(private service: ArticlesService) {
+    this.loadTags();
+  }
 
   ngOnInit(): void {}
   loadArticles() {
@@ -18,13 +20,15 @@ export class ArticlesComponent implements OnInit {
       .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){
+  showArticlesForTag(tag) {
     this.service
       .getArticlesByTag(tag)
-      .subscribe( (response) => (this.articles = response.articles.slice(0, 5)));
+      .subscribe((response) => (this.articles = response.articles.slice(0, 5)));
+  }
+  commentArticle(comment: string) {
+    this.service
+      .postComment(comment);
   }
 }

From c8834ac460427f60ac858696242b664145a36712 Mon Sep 17 00:00:00 2001
From: Joshua <acciarrijoshua@gmail.com>
Date: Fri, 17 Jul 2020 00:31:21 -0300
Subject: [PATCH 4/4] Finally Implement Post Comment

---
 src/app/articles.service.ts              | 33 ++++++++++++++++++++----
 src/app/articles/articles.component.html | 12 ++++++---
 src/app/articles/articles.component.ts   |  4 +--
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts
index 4bbee50..d819ae1 100644
--- a/src/app/articles.service.ts
+++ b/src/app/articles.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root',
@@ -22,7 +22,8 @@ export class ArticlesService {
     const url = this.baseUrl + `articles?tag=${tag}`;
     return this.http.get<any>(url);
   }
-  postComment(comment: string) {
+
+  postComment(text, slug) {
     const loginUrl = this.baseUrl + 'users/login';
     this.http
       .post(loginUrl, {
@@ -31,8 +32,30 @@ export class ArticlesService {
           password: this.hardcodedPass,
         },
       })
-      .subscribe(
-        (response) => console.log(response)
-      );
+      .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);
+      });
   }
 }
diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html
index 154d1ff..9fd8646 100644
--- a/src/app/articles/articles.component.html
+++ b/src/app/articles/articles.component.html
@@ -14,12 +14,18 @@ <h3>{{ article.description }}</h3>
   <div *ngFor="let ownTag of article.tagList">
     <button class="ownTag">{{ ownTag }}</button>
   </div>
-  <textarea ref-textarea
+  <textarea
+    ref-textarea
     rows="3"
     cols="60"
     maxlength="150"
     placeholder="Leave a comment"
   ></textarea>
-  <br>
-  <button class="tag" (click)="commentArticle(textarea.value)">Comment</button>
+  <br />
+  <button
+    class="tag"
+    (click)="commentArticle({ text: textarea.value, slug: article.slug })"
+  >
+    Comment
+  </button>
 </div>
diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts
index 736f3b2..8439cb8 100644
--- a/src/app/articles/articles.component.ts
+++ b/src/app/articles/articles.component.ts
@@ -27,8 +27,8 @@ export class ArticlesComponent implements OnInit {
       .getArticlesByTag(tag)
       .subscribe((response) => (this.articles = response.articles.slice(0, 5)));
   }
-  commentArticle(comment: string) {
+  commentArticle({text, slug}) {
     this.service
-      .postComment(comment);
+      .postComment(text, slug);
   }
 }