diff --git a/img-of-app/img1.png b/img-of-app/img1.png new file mode 100644 index 0000000..310cb3e Binary files /dev/null and b/img-of-app/img1.png differ diff --git a/img-of-app/img2.png b/img-of-app/img2.png new file mode 100644 index 0000000..d7a469c Binary files /dev/null and b/img-of-app/img2.png differ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index e4710df..2340b87 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts index 060f616..9bf29ad 100644 --- a/src/app/articles.service.ts +++ b/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(url); } + getArticlesOfTags(tagName){ + const url = `${this.baseUrl}articles/?limit=${this.limit}&tag=${tagName}`; + return this.http.get(url); + } + + authenticator(){ + const user = {"user":{"email": "ttadstestuser@gmail.com","password": "123456789"}}; + const UserUrl = `${this.baseUrl}users/login`; + return this.http.post(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); + }); + } } + + diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html index 404cd99..4a87840 100644 --- a/src/app/articles/articles.component.html +++ b/src/app/articles/articles.component.html @@ -1,9 +1,32 @@ - -
-

{{article.title}}

-

{{article.body}}

+
+ +

+
+ + +   + +
+
+

{{article.title}}

+ Descripcion: {{article.description}}
+ Body: {{article.body}}
+ Creado: {{article.createdAt}}
+ Tags: {{article.tagList}}
+ SLUG : {{article.slug}}
+
+ + +
- - -{{tags | json}} - diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss index e69de29..74b0ba3 100644 --- a/src/app/articles/articles.component.scss +++ b/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; +} \ No newline at end of file diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts index 434bf47..e52856e 100644 --- a/src/app/articles/articles.component.ts +++ b/src/app/articles/articles.component.ts @@ -10,10 +10,11 @@ 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); @@ -21,4 +22,8 @@ export class ArticlesComponent implements OnInit { loadTags() { this.service.getTags().subscribe(response => this.tags = response.tags); } + loadArticlesOfTag(tagName){ + this.service.getArticlesOfTags(tagName).subscribe(response => this.articlesOfTag = response.articles); + } } + diff --git a/src/app/comments/comments.component.html b/src/app/comments/comments.component.html new file mode 100644 index 0000000..632d107 --- /dev/null +++ b/src/app/comments/comments.component.html @@ -0,0 +1,16 @@ +

Comements

+ +
+ + + diff --git a/src/app/comments/comments.component.scss b/src/app/comments/comments.component.scss new file mode 100644 index 0000000..83a359f --- /dev/null +++ b/src/app/comments/comments.component.scss @@ -0,0 +1,12 @@ +p { + margin: 0; + text-align: center; +} + +.input{ + min-width: 100% +} + +.btn { + min-width: 100% +} \ No newline at end of file diff --git a/src/app/comments/comments.component.spec.ts b/src/app/comments/comments.component.spec.ts new file mode 100644 index 0000000..db6dea2 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CommentsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CommentsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/comments/comments.component.ts b/src/app/comments/comments.component.ts new file mode 100644 index 0000000..4e4e991 --- /dev/null +++ b/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(); + } +} diff --git a/src/index.html b/src/index.html index 62a7817..dc18d30 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,7 @@ + diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..652cd90 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1 +1,3 @@ -/* You can add global styles to this file, and also import other style files */ +body { + background-color: oldlace; +} \ No newline at end of file