(Http) Ejercicio 1 y 2

src/app/app.module.ts

@@ -5,11 +5,13 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { ArticlesComponent } from './articles/articles.component';
 import { HttpClientModule } from '@angular/common/http';
+import { CommentsComponent } from './comments/comments.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    ArticlesComponent
+    ArticlesComponent,
+    CommentsComponent
   ],
   imports: [
     BrowserModule,

src/app/articles.service.ts

@@ -1,11 +1,12 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ArticlesService {
-
+  user : any;
+  limit : number = 5;
   readonly baseUrl = 'https://conduit.productionready.io/api/';
 
   constructor(private http: HttpClient) { }
@@ -17,4 +18,32 @@ export class ArticlesService {
     const url = this.baseUrl + 'tags';
     return this.http.get<any>(url);
   }
+  getArticlesOfTags(tagName){
+    const url = `${this.baseUrl}articles/?limit=${this.limit}&tag=${tagName}`;
+    return this.http.get<any>(url);
+  }
+
+  authenticator(){
+    const user = {"user":{"email": "ttadstestuser@gmail.com","password": "123456789"}};
+    const UserUrl = `${this.baseUrl}users/login`;
+    return this.http.post<any>(UserUrl, user);
+  }
+
+  insertComment(slug, comment){
+    const url = `${this.baseUrl}articles/${slug}/comments`;
+    const body = { "comment": { "body": comment } };
+
+    this.authenticator().subscribe(response => { 
+        this.user = response.user;
+        const httpHeaders = {
+          headers: new HttpHeaders({
+            'Content-Type': 'application/json',
+            'Authorization':'Token '+this.user.token
+          })
+        };
+        this.http.post(url, body, httpHeaders);
+    });
+  }
 }
+
+

src/app/articles/articles.component.html

@@ -1,9 +1,32 @@
-
-<div *ngFor="let article of articles">
-    <h1>{{article.title}} </h1>
-    <p>{{article.body}}</p>
+<div class="container">
+    <button 
+        (click)="loadTags()" 
+        type="button" 
+        class="btn btn-dark"
+    >Click to see the Tag cloud
+    </button>
+    <br><br>
+    <div class="tag-cloud">
+        <span *ngFor="let tag of tags">
+            <button 
+                (click)="loadArticlesOfTag(tag)" 
+                type="button" 
+                class="btn btn-light"
+            >{{ tag }}
+            </button>
+            &nbsp;
+        </span>
+    </div>
+    <div *ngFor="let article of articlesOfTag" class="article">
+        <h2>{{article.title}} </h2>
+        <b>Descripcion:</b> {{article.description}}<br>
+        <b>Body:</b> {{article.body}}<br>
+        <b>Creado:</b> {{article.createdAt}}<br>
+        <b>Tags:</b> {{article.tagList}}<br>
+        <b>SLUG :</b> {{article.slug}} <br>
+        <br>
+        <app-comments 
+            [slug]="article.slug">        
+        </app-comments>
+    </div>
 </div>
-
-<button (click)="loadArticles()">Cargar</button>
-{{tags | json}}
-<button (click)="loadTags()">Cargar Tags</button>

src/app/articles/articles.component.scss

@@ -0,0 +1,39 @@
+.container {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.btn-dark {
+    margin: 4em 27em 0em 27em;
+}
+.btn {
+    margin-top: 2rem;
+}
+.tag-cloud {
+    margin-left: 14em;
+    background-color: rgba(128, 128, 128, 0.5);; ;
+    width: 40em;
+    padding: 1em 3em 3em 3em;
+    border-radius: 40px;
+}
+
+.article {
+    background-color: lightcyan;
+    width: 15em;
+    padding: 1em;
+    margin: 1em;
+    word-break: break-all;
+    display: inline-block;
+    border-radius: 20px;
+    border: 1px solid cadetblue;
+}
+h2 {
+    text-align: center;
+    font-family: sans-serif;
+    font-style: italic;
+    font-variant: small-caps;
+    font-stretch: expanded;
+}
+b {
+    color: lightseagreen;
+}

src/app/articles/articles.component.ts

@@ -10,15 +10,20 @@ export class ArticlesComponent implements OnInit {
 
   articles:any = []
   tags: any = [];
-  constructor(private service: ArticlesService) { }
+  articlesOfTag:any = [];
 
+  constructor(private service: ArticlesService) { }
+
   ngOnInit(): void {
-
   }
   loadArticles() {
     this.service.getArticles().subscribe(response => this.articles = response.articles);
   }
   loadTags() {
     this.service.getTags().subscribe(response => this.tags = response.tags);
   }
+  loadArticlesOfTag(tagName){
+    this.service.getArticlesOfTags(tagName).subscribe(response => this.articlesOfTag = response.articles);
+  }
 }
+

src/app/comments/comments.component.html

@@ -0,0 +1,16 @@
+<p>Comements</p>
+<textarea 
+    #Comment 
+    class="input"
+    placeholder="Write your comment" 
+>
+</textarea>
+<br>
+<button 
+    (click)="insertComment(Comment)"
+    type="button" 
+    class="btn btn-dark"
+    >Add
+</button>
+
+

src/app/comments/comments.component.scss

@@ -0,0 +1,12 @@
+p {
+    margin: 0;
+    text-align: center;
+}
+
+.input{
+    min-width: 100%
+}
+
+.btn {
+    min-width: 100%
+}

src/app/comments/comments.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentsComponent } from './comments.component';
+
+describe('CommentsComponent', () => {
+  let component: CommentsComponent;
+  let fixture: ComponentFixture<CommentsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/comments/comments.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ArticlesService } from '../articles.service';
+
+@Component({
+  selector: 'app-comments',
+  templateUrl: './comments.component.html',
+  styleUrls: ['./comments.component.scss']
+})
+export class CommentsComponent {
+@Input() slug: string;
+
+  constructor(
+    private service: ArticlesService
+  ) { }
+
+  insertComment(comment){
+    this.service.insertComment(this.slug, comment.value)
+    comment.value = '';
+    comment.focus();
+  }
+}

src/index.html

@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
+body {
+    background-color: oldlace;
+}