HTTP Exercises

src/app/app.component.html

@@ -1 +1 @@
-<app-articles></app-articles>
+<app-articles></app-articles>

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'
@@ -8,13 +8,49 @@ export class ArticlesService {
 
   readonly baseUrl = 'https://conduit.productionready.io/api/';
 
+  hardcodedUser: any = {
+    email: "niconelli2@gmail.com",
+    password: "fakeworld"
+  }
+
   constructor(private http: HttpClient) { }
+
   getArticles() {
     const url = this.baseUrl + 'articles';
     return this.http.get<any>(url);
   }
+
+  getArticlesByTag(tag: string){
+    const url = this.baseUrl + `articles?tag=${tag}`;
+    return this.http.get<any>(url);
+  }
+
   getTags() {
     const url = this.baseUrl + 'tags';
     return this.http.get<any>(url);
   }
+
+  postNewComment(text: string, endpoint: string) {
+    const userUrl = this.baseUrl + 'users/login';
+    this.http.post(userUrl, { user: this.hardcodedUser })
+    .subscribe((response) => {
+      const token = response["user"]["token"];
+      const commentsUrl = this.baseUrl + `articles/${endpoint}/comments`;
+      this.http.post(
+        commentsUrl,
+        {
+          comment: { body: text }
+        },
+        {
+          headers: new HttpHeaders({
+            "Content-Type": "application/json",
+            Authorization: `Token ${token}`
+          })
+        }
+      )
+      .subscribe((res) => { alert("Comment uploaded successfully") }),
+      (err: any) => { console.log(err); }
+    }),
+    (err: any) => { console.log(err); }
+  }
 }

src/app/articles/articles.component.html

@@ -1,9 +1,40 @@
+<header class="articlesHeader">
+    <h1 class="title">Articles from the Arctic</h1>
+    <h2 class="subtitle">Select one <b>tag</b> and cool articles will be selected just for you:</h2>
 
-<div *ngFor="let article of articles">
-    <h1>{{article.title}} </h1>
+    <div class="tagList">
+        <div *ngFor="let tag of tags" class="tag">
+            <span *ngIf="!(tag.indexOf('&zwnj;') > -1)">
+                <button (click)="loadNArticlesForTag(tag, 5)" class="tagButton">
+                    {{tag}}
+                </button>
+            </span>
+        </div>
+    </div>
+</header>
+
+<hr/>
+<div *ngFor="let article of articles" class="article">
+    <h2>{{article.title}}</h2>
+    <h3>{{article.description}}</h3>
     <p>{{article.body}}</p>
+    <br/>
+    <p>Creation Date: <b>{{article.createdAt}}</b></p>
+    <div class="myTagList">
+        <div *ngFor="let myTag of article.tagList">
+            <span *ngIf="!(myTag.indexOf('&zwnj;') > -1)">
+                <button (click)="loadNArticlesForTag(myTag, 5)" class="myTagButton">
+                    {{myTag}}
+                </button>
+            </span>
+        </div>
+    </div>
+    <br/>
+    <div class="comment">
+        <textarea ref-textarea
+        rows="4" cols="60" maxlength="240"
+        placeholder="Comment this post..."></textarea>
+    </div> 
+    <button (click)="createNewComment(textarea.value, article.slug)" class="commentButton">Post comment</button>   
+    <hr/>
 </div>
-
-<button (click)="loadArticles()">Cargar</button>
-{{tags | json}}
-<button (click)="loadTags()">Cargar Tags</button>

src/app/articles/articles.component.scss

@@ -0,0 +1,48 @@
+.articlesHeader {
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    text-align: center;
+    background-color: beige;
+    padding: 1.2rem;
+    .title { color: darkmagenta; }
+}
+
+.tagList, .myTagList {
+    display: flex;
+    justify-content: flex-start;
+    tag {
+        flex-direction: column;
+        flex-wrap: wrap;
+        margin-right: 1rem;
+    }
+}
+
+.tagButton, .myTagButton {
+    font-family: Arial, Helvetica, sans-serif;
+    margin-right: 0.3rem;
+    border: none;
+    border-radius: 0.3rem;
+    padding: 0.3rem;
+    background-color: darkmagenta;
+    color: white;
+}
+
+.article {
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    background-color: whitesmoke;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.comment>textarea {
+    resize: none;
+}
+
+.commentButton {
+    font-family: Arial, Helvetica, sans-serif;
+    margin-right: 0.3rem;
+    border: none;
+    border-radius: 0.3rem;
+    padding: 0.5rem;
+    background-color: navy;
+    color: white;
+}

src/app/articles/articles.component.ts

@@ -8,17 +8,31 @@ import { ArticlesService } from '../articles.service';
 })
 export class ArticlesComponent implements OnInit {
 
-  articles:any = []
+  articles: any = [];
   tags: any = [];
-  constructor(private service: ArticlesService) { }
+  constructor(private service: ArticlesService) { this.loadTags(); }
 
-  ngOnInit(): void {
+  ngOnInit(): void { }
 
-  }
   loadArticles() {
-    this.service.getArticles().subscribe(response => this.articles = response.articles);
+    this.service.getArticles().subscribe((response) => {
+      this.articles = response.articles;
+    });
+  }
+
+  loadNArticlesForTag(tag: any, quantity: number) {
+    this.service.getArticlesByTag(tag).subscribe((response) => {
+      this.articles = response.articles.slice(0, quantity);
+    });
   }
+
   loadTags() {
-    this.service.getTags().subscribe(response => this.tags = response.tags);
+    this.service.getTags().subscribe((response) => {
+      this.tags = response.tags;
+    });
+  }
+
+  createNewComment(text: string, endpoint: string) {
+    this.service.postNewComment(text, endpoint); 
   }
 }

src/styles.scss

@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+    margin: 0.5rem;
+    background-color: cornsilk;
+    background-image: url("assets/space-background.jpg");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+}