From e26f13f053c860ec5a7d62e8fa8df587621ba2c4 Mon Sep 17 00:00:00 2001 From: aotaduy Date: Wed, 24 Jun 2020 14:28:10 -0300 Subject: [PATCH 01/10] clean --- src/app/app.component.html | 534 ------------------------------------- 1 file changed, 534 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index e48d8c1..e69de29 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,534 +0,0 @@ - - - - - - - - - - - - - - -
- - -
- - - - - - - - - - - - {{ title }} app is running! - - - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - New Component -
- -
- - - Angular Material -
- -
- - - Add PWA Support -
- -
- - - Add Dependency -
- -
- - - Run and Watch Tests -
- -
- - - Build for Production -
-
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build --prod
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -
- - - - - - - - - - - - \ No newline at end of file From eae7d406de9a33212798e35bd9f51c01a1a8a322 Mon Sep 17 00:00:00 2001 From: aotaduy Date: Wed, 24 Jun 2020 19:53:16 -0300 Subject: [PATCH 02/10] http --- README.md | 74 +++++++++++++++++---- package.json | 1 + src/app/app.component.html | 1 + src/app/app.module.ts | 8 ++- src/app/articles.service.spec.ts | 16 +++++ src/app/articles.service.ts | 20 ++++++ src/app/articles/articles.component.html | 9 +++ src/app/articles/articles.component.scss | 0 src/app/articles/articles.component.spec.ts | 25 +++++++ src/app/articles/articles.component.ts | 24 +++++++ 10 files changed, 162 insertions(+), 16 deletions(-) create mode 100644 src/app/articles.service.spec.ts create mode 100644 src/app/articles.service.ts create mode 100644 src/app/articles/articles.component.html create mode 100644 src/app/articles/articles.component.scss create mode 100644 src/app/articles/articles.component.spec.ts create mode 100644 src/app/articles/articles.component.ts diff --git a/README.md b/README.md index e5c5427..43a5481 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,73 @@ -# NgPeti +

Ejercicio

+ Vamos usar la api de realWorld app +
    +
  1. + Usando la API de RealWorld hacer una nube de tags que me permita obtener los tags del sitio y al hacer click en uno de ellos me muestre los primeros 5 articulos completos de cada TAG. Mostrando titulo, descripcion body fecha de creacion y lista de tags asociada a ese articulo. +
    2. +
+

Ejercicio 2

+

+ Con un usuario hardocdeado agregar un boton a un articulo del ejercicio anterior y hacer que le agregue un comentario ingresado en un textarea. tenemos que llamar el metodo login que nos va a devolver un objeto con un token. Ese token lo tenemos que agregar en un header del post para agregar el comentario con el siguiente formato

+ 
Authorization: Token [aca concatenado va el token obtenido]
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1. +API https://conduit.productionready.io/api/ -## Development server +End points: +/articles?limit=10&offset=0 -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. -## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +### Get Tags -## Build +`GET /api/tags` -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. +```JSON +{ + "tags": [ + "reactjs", + "angularjs" + ] +} +``` -## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +### List Articles -## Running end-to-end tests +`GET /api/articles` -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +Returns most recent articles globally by default, provide `tag`, `author` or `favorited` query parameter to filter results -## Further help +Query Parameters: -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). +Filter by tag: + +`?tag=AngularJS` + + +### Get Article + +`GET /api/articles/:slug` + +### Single Article + +```JSON +{ + "article": { + "slug": "how-to-train-your-dragon", + "title": "How to train your dragon", + "description": "Ever wonder how?", + "body": "It takes a Jacobian", + "tagList": ["dragons", "training"], + "createdAt": "2016-02-18T03:22:56.637Z", + "updatedAt": "2016-02-18T03:48:35.824Z", + "favorited": false, + "favoritesCount": 0, + "author": { + "username": "jake", + "bio": "I work at statefarm", + "image": "https://i.stack.imgur.com/xHWG8.jpg", + "following": false + } + } +} +``` diff --git a/package.json b/package.json index 72b4bd7..4ef96ff 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@angular/platform-browser": "~9.1.1", "@angular/platform-browser-dynamic": "~9.1.1", "@angular/router": "~9.1.1", + "@angular/http": "~9.1.1", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/app.component.html b/src/app/app.component.html index e69de29..6571e70 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..e4710df 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,14 +3,18 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { ArticlesComponent } from './articles/articles.component'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ - AppComponent + AppComponent, + ArticlesComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/articles.service.spec.ts b/src/app/articles.service.spec.ts new file mode 100644 index 0000000..84397c9 --- /dev/null +++ b/src/app/articles.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ArticlesService } from './articles.service'; + +describe('ArticlesService', () => { + let service: ArticlesService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ArticlesService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts new file mode 100644 index 0000000..060f616 --- /dev/null +++ b/src/app/articles.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +@Injectable({ + providedIn: 'root' +}) +export class ArticlesService { + + readonly baseUrl = 'https://conduit.productionready.io/api/'; + + constructor(private http: HttpClient) { } + getArticles() { + const url = this.baseUrl + 'articles'; + return this.http.get(url); + } + getTags() { + const url = this.baseUrl + 'tags'; + return this.http.get(url); + } +} diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html new file mode 100644 index 0000000..404cd99 --- /dev/null +++ b/src/app/articles/articles.component.html @@ -0,0 +1,9 @@ + +
+

{{article.title}}

+

{{article.body}}

+
+ + +{{tags | json}} + diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/articles/articles.component.spec.ts b/src/app/articles/articles.component.spec.ts new file mode 100644 index 0000000..c3e46ef --- /dev/null +++ b/src/app/articles/articles.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ArticlesComponent } from './articles.component'; + +describe('ArticlesComponent', () => { + let component: ArticlesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ArticlesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ArticlesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts new file mode 100644 index 0000000..434bf47 --- /dev/null +++ b/src/app/articles/articles.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { ArticlesService } from '../articles.service'; + +@Component({ + selector: 'app-articles', + templateUrl: './articles.component.html', + styleUrls: ['./articles.component.scss'] +}) +export class ArticlesComponent implements OnInit { + + articles:any = [] + tags: 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); + } +} From dc2c96b358427ee1f3e3744a6d057ca74bf68a84 Mon Sep 17 00:00:00 2001 From: aotaduy Date: Wed, 24 Jun 2020 19:57:03 -0300 Subject: [PATCH 03/10] improve readme --- README.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 43a5481..eb05619 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,18 @@

Ejercicio

- Vamos usar la api de realWorld app -
    -
  1. - Usando la API de RealWorld hacer una nube de tags que me permita obtener los tags del sitio y al hacer click en uno de ellos me muestre los primeros 5 articulos completos de cada TAG. Mostrando titulo, descripcion body fecha de creacion y lista de tags asociada a ese articulo. -
    2. -
+Vamos usar la api de realWorld app +
    +
  1. + Usando la API de RealWorld hacer una nube de tags que me permita obtener los tags del sitio y al hacer click en uno de ellos me muestre los primeros 5 articulos completos de cada TAG. Mostrando titulo, descripcion body fecha de creacion y lista de tags asociada a ese articulo. +
    2. +

Ejercicio 2

- Con un usuario hardocdeado agregar un boton a un articulo del ejercicio anterior y hacer que le agregue un comentario ingresado en un textarea. tenemos que llamar el metodo login que nos va a devolver un objeto con un token. Ese token lo tenemos que agregar en un header del post para agregar el comentario con el siguiente formato

- 
Authorization: Token [aca concatenado va el token obtenido]
+Con un usuario hardocdeado agregar un boton a un articulo del ejercicio anterior y hacer que le agregue un comentario ingresado en un textarea. tenemos que llamar el metodo login que nos va a devolver un objeto con un token. Ese token lo tenemos que agregar en un header del post para agregar el comentario con el siguiente formato

+
Authorization: Token [aca concatenado va el token obtenido]
-API https://conduit.productionready.io/api/ +### Base endpoint -End points: -/articles?limit=10&offset=0 +API https://conduit.productionready.io/api/ From 811e710b0b41e558bb4acd1d4ed250c60264e628 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Fri, 26 Jun 2020 23:37:42 -0300 Subject: [PATCH 04/10] commit inicial --- src/app/articles.service.ts | 5 +++-- src/app/articles/articles.component.html | 24 +++++++++++++++++------ src/app/articles/articles.component.scss | 25 ++++++++++++++++++++++++ src/app/articles/articles.component.ts | 8 +++++--- 4 files changed, 51 insertions(+), 11 deletions(-) diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts index 060f616..32b17d2 100644 --- a/src/app/articles.service.ts +++ b/src/app/articles.service.ts @@ -9,8 +9,9 @@ export class ArticlesService { readonly baseUrl = 'https://conduit.productionready.io/api/'; constructor(private http: HttpClient) { } - getArticles() { - const url = this.baseUrl + 'articles'; + getArticlesByTag(tag:string) { + const limit = 5; + const url = `${this.baseUrl}articles?tag=${tag}&limit=${limit}`; return this.http.get(url); } getTags() { diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html index 404cd99..7084bd2 100644 --- a/src/app/articles/articles.component.html +++ b/src/app/articles/articles.component.html @@ -1,9 +1,21 @@ +

Lista de tags

-
-

{{article.title}}

-

{{article.body}}

+
+
+

{{tag}}

+ + +
+ +
- -{{tags | json}} - + + +
+

+ {{article}} +

+
diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss index e69de29..36edbe0 100644 --- a/src/app/articles/articles.component.scss +++ b/src/app/articles/articles.component.scss @@ -0,0 +1,25 @@ +.title{ + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + font-size: xx-large; + font-weight: bold; + color: darkslategrey; + text-align: center; +} +//https://platzi.com/blog/tutorial-como-construir-un-layout-con-css-grid/ +.tag-group{ + display: inline-grid; + width: 150px; + height: 150px; + background-color: rgb(79, 123, 255); + margin: 20px; + padding: 10px; + border-radius: 10px; + +} + +.tag-grid{ + //display: grid; + background-color: lightgrey; + justify-items: center; + align-items: center; +} \ No newline at end of file diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts index 434bf47..535ca42 100644 --- a/src/app/articles/articles.component.ts +++ b/src/app/articles/articles.component.ts @@ -10,13 +10,15 @@ export class ArticlesComponent implements OnInit { articles:any = [] tags: any = []; + constructor(private service: ArticlesService) { } ngOnInit(): void { - + this.loadTags(); } - loadArticles() { - this.service.getArticles().subscribe(response => this.articles = response.articles); + + loadArticlesByTag(tag:string) { + this.service.getArticlesByTag(tag).subscribe(response => this.articles = response.articles); } loadTags() { this.service.getTags().subscribe(response => this.tags = response.tags); From 36cc03153a13b5c4c462d9ca70d9774483c97363 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Sun, 12 Jul 2020 14:36:31 -0300 Subject: [PATCH 05/10] hd --- package-lock.json | 203 ++++++++++++++++------- package.json | 10 +- src/app/articles/articles.component.html | 3 +- src/app/articles/articles.component.scss | 9 + src/app/articles/articles.component.ts | 2 + 5 files changed, 166 insertions(+), 61 deletions(-) diff --git a/package-lock.json b/package-lock.json index 512f702..b5d3a6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -173,16 +173,29 @@ } }, "@angular-devkit/schematics": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.1.tgz", - "integrity": "sha512-6wx2HcvafHvEjEa1tjDzW2hXrOiSE8ALqJUArb3+NoO1BDM42aGcqyPo0ODzKtDk12CgSsFXdNKRpQ5AmpSPtw==", + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.9.tgz", + "integrity": "sha512-aKuMmS3wshOTl9+01jiB50ml09fRN1WfOOtoNqwvKTEi87DrT6Mn3l0eVQo8PJK/bIq/FBmPgsIl2nsETiBSxg==", "dev": true, "requires": { - "@angular-devkit/core": "9.1.1", + "@angular-devkit/core": "9.1.9", "ora": "4.0.3", "rxjs": "6.5.4" }, "dependencies": { + "@angular-devkit/core": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz", + "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==", + "dev": true, + "requires": { + "ajv": "6.12.0", + "fast-json-stable-stringify": "2.1.0", + "magic-string": "0.25.7", + "rxjs": "6.5.4", + "source-map": "0.7.3" + } + }, "rxjs": { "version": "6.5.4", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", @@ -200,16 +213,16 @@ "integrity": "sha512-IvKv8sV0ymbzDEX2ZLW+F6nOTQqDYallHexuzRVT9txvNE8TNHyySvLcyC5dTmX9fj9LA72NZ6nFyhxq0LFvtQ==" }, "@angular/cli": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.1.tgz", - "integrity": "sha512-sjRAV4UF8M5v+2gw+EwCYSgciBZDc05AbNxQt+uUdxdfR1QU9hifWq8WDxfOR6jdDP5YqMtQsNaFNwrUyjJJoQ==", + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.9.tgz", + "integrity": "sha512-k8C0OY3oHoixd3buCgF8+VFe8YZGSGiprnbVMEF2WJHUUw87lPCu/d7dbID3AtVwdKdAB275rAt6IZEIzXInbw==", "dev": true, "requires": { - "@angular-devkit/architect": "0.901.1", - "@angular-devkit/core": "9.1.1", - "@angular-devkit/schematics": "9.1.1", - "@schematics/angular": "9.1.1", - "@schematics/update": "0.901.1", + "@angular-devkit/architect": "0.901.9", + "@angular-devkit/core": "9.1.9", + "@angular-devkit/schematics": "9.1.9", + "@schematics/angular": "9.1.9", + "@schematics/update": "0.901.9", "@yarnpkg/lockfile": "1.1.0", "ansi-colors": "4.1.1", "debug": "4.1.1", @@ -227,12 +240,44 @@ "uuid": "7.0.2" }, "dependencies": { + "@angular-devkit/architect": { + "version": "0.901.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.9.tgz", + "integrity": "sha512-Xokyh7bv4qICHpb5Xui1jPTi6ZZvzR5tbTIxT0DFWqw16TEkFgkNubQsW6mFSR3g3CXdySMfOwWExfa/rE1ggA==", + "dev": true, + "requires": { + "@angular-devkit/core": "9.1.9", + "rxjs": "6.5.4" + } + }, + "@angular-devkit/core": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz", + "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==", + "dev": true, + "requires": { + "ajv": "6.12.0", + "fast-json-stable-stringify": "2.1.0", + "magic-string": "0.25.7", + "rxjs": "6.5.4", + "source-map": "0.7.3" + } + }, "ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==", "dev": true }, + "rxjs": { + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", + "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, "uuid": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz", @@ -242,9 +287,9 @@ } }, "@angular/common": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.1.tgz", - "integrity": "sha512-bS13veMs7//YqYjYJ+JI78ylaCyVcdFKZKikd5SZa6+r6fajcyvLnSKqrKypG3O1BeJ8vOG/Pq54P5gWhbR6eA==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.11.tgz", + "integrity": "sha512-Vh5lF7zWwDK9RedmYXUc8vUXyrecR3j1mAWlTlnmcHYxxFThPzN/dr0slQcPi6nyJn0EmyRKUGvAoZx4rIb7wg==" }, "@angular/compiler": { "version": "9.1.1", @@ -464,6 +509,14 @@ "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.1.tgz", "integrity": "sha512-NX+LuK8JFisiq3uHCOK6YoN/yIb2R9Ye5mwiOPkuZA3lZLKCnUXqCHZbM8VHy/WdjIxxeUaFMJc38yV8RVoabg==" }, + "@angular/http": { + "version": "7.2.16", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-7.2.16.tgz", + "integrity": "sha512-yvjbNyzFSmmz4UTjCdy5M8mk0cZqf9TvSf8yN5UVIwtw4joyuUdlgJCuin0qSbQOKIf/JjHoofpO2JkPCGSNww==", + "requires": { + "tslib": "^1.9.0" + } + }, "@angular/language-service": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-9.1.1.tgz", @@ -1520,23 +1573,47 @@ } }, "@schematics/angular": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.1.tgz", - "integrity": "sha512-V0DcDNgHQ2YR+PGZI6+pf/mUNNxt5SusShkZ1PbwIMk/HUQpzEGkLjm3v1Jw9eIZKiuDx615GNU1xDzQ/KyNRQ==", + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.9.tgz", + "integrity": "sha512-c8YGZ6pDfr8IDD1qaOjlEBAkEz14KFSxDj0hCWs0xIM0py513tu5sW8+ziYxGG4bgqpsgVR/KAxuY78iBfUVag==", "dev": true, "requires": { - "@angular-devkit/core": "9.1.1", - "@angular-devkit/schematics": "9.1.1" + "@angular-devkit/core": "9.1.9", + "@angular-devkit/schematics": "9.1.9" + }, + "dependencies": { + "@angular-devkit/core": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz", + "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==", + "dev": true, + "requires": { + "ajv": "6.12.0", + "fast-json-stable-stringify": "2.1.0", + "magic-string": "0.25.7", + "rxjs": "6.5.4", + "source-map": "0.7.3" + } + }, + "rxjs": { + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", + "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + } } }, "@schematics/update": { - "version": "0.901.1", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.1.tgz", - "integrity": "sha512-g5B8hjXKCbUNLKCkWQxc5r2D9lOQXRTLZJNIqva+l/ck0AML5MpelxkqQId9ZGLfQqfFk/XjdSHRWgcmUs1WnA==", + "version": "0.901.9", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.9.tgz", + "integrity": "sha512-VChX0VO/oyfCF3y+HjMTU2qN3vGgJYxEI1V+Q9aAlwl95t3GAufuaFY1CNW3YV4XkYIjD88e3yWl8d5yO4qf4w==", "dev": true, "requires": { - "@angular-devkit/core": "9.1.1", - "@angular-devkit/schematics": "9.1.1", + "@angular-devkit/core": "9.1.9", + "@angular-devkit/schematics": "9.1.9", "@yarnpkg/lockfile": "1.1.0", "ini": "1.3.5", "npm-package-arg": "^8.0.0", @@ -1546,6 +1623,19 @@ "semver-intersect": "1.4.0" }, "dependencies": { + "@angular-devkit/core": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz", + "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==", + "dev": true, + "requires": { + "ajv": "6.12.0", + "fast-json-stable-stringify": "2.1.0", + "magic-string": "0.25.7", + "rxjs": "6.5.4", + "source-map": "0.7.3" + } + }, "rxjs": { "version": "6.5.4", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", @@ -1934,6 +2024,11 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "angular": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/angular/-/angular-1.8.0.tgz", + "integrity": "sha512-VdaMx+Qk0Skla7B5gw77a8hzlcOakwF8mjlW13DpIWIDlfqwAbSSLfd8N/qZnzEmQF4jC4iofInd3gE7vL8ZZg==" + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -2492,6 +2587,11 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "bootstrap": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz", + "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2929,9 +3029,9 @@ "dev": true }, "cli-width": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz", - "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", + "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", "dev": true }, "cliui": { @@ -6065,12 +6165,6 @@ "isobject": "^3.0.1" } }, - "is-promise": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz", - "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=", - "dev": true - }, "is-regex": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", @@ -7593,9 +7687,9 @@ } }, "npm-registry-fetch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", - "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.4.tgz", + "integrity": "sha512-6jb34hX/iYNQebqWUHtU8YF6Cjb1H6ouTFPClYsyiW6lpFkljTpdeftm53rRojtja1rKAvKNIIiTS5Sjpw4wsA==", "dev": true, "requires": { "JSONStream": "^1.3.4", @@ -7626,9 +7720,9 @@ } }, "safe-buffer": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", - "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", "dev": true }, "semver": { @@ -9865,13 +9959,10 @@ } }, "run-async": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz", - "integrity": "sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==", - "dev": true, - "requires": { - "is-promise": "^2.1.0" - } + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", + "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==", + "dev": true }, "run-queue": { "version": "1.0.3", @@ -10731,9 +10822,9 @@ "dev": true }, "spdx-correct": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", - "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", + "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==", "dev": true, "requires": { "spdx-expression-parse": "^3.0.0", @@ -10741,15 +10832,15 @@ } }, "spdx-exceptions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz", - "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz", + "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==", "dev": true }, "spdx-expression-parse": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", - "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", + "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", "dev": true, "requires": { "spdx-exceptions": "^2.1.0", diff --git a/package.json b/package.json index 4ef96ff..9ce98da 100644 --- a/package.json +++ b/package.json @@ -12,26 +12,28 @@ "private": true, "dependencies": { "@angular/animations": "~9.1.1", - "@angular/common": "~9.1.1", + "@angular/common": "^9.1.11", "@angular/compiler": "~9.1.1", "@angular/core": "~9.1.1", "@angular/forms": "~9.1.1", + "@angular/http": "^7.2.16", "@angular/platform-browser": "~9.1.1", "@angular/platform-browser-dynamic": "~9.1.1", "@angular/router": "~9.1.1", - "@angular/http": "~9.1.1", + "angular": "^1.8.0", + "bootstrap": "^4.5.0", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.1", - "@angular/cli": "~9.1.1", + "@angular/cli": "^9.1.9", "@angular/compiler-cli": "~9.1.1", "@angular/language-service": "~9.1.1", - "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", + "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html index 7084bd2..efc84ec 100644 --- a/src/app/articles/articles.component.html +++ b/src/app/articles/articles.component.html @@ -3,10 +3,11 @@

Lista de tags

{{tag}}

- +
diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss index 36edbe0..f85be1d 100644 --- a/src/app/articles/articles.component.scss +++ b/src/app/articles/articles.component.scss @@ -22,4 +22,13 @@ background-color: lightgrey; justify-items: center; align-items: center; +} + +.selected-tag{ + width: 95% !important; + height: 200px; +} + +.my-button{ + width: fit-content; } \ No newline at end of file diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts index 535ca42..0ba111b 100644 --- a/src/app/articles/articles.component.ts +++ b/src/app/articles/articles.component.ts @@ -10,6 +10,7 @@ export class ArticlesComponent implements OnInit { articles:any = [] tags: any = []; + selectedTag = ''; constructor(private service: ArticlesService) { } @@ -18,6 +19,7 @@ export class ArticlesComponent implements OnInit { } loadArticlesByTag(tag:string) { + this.selectedTag = tag; this.service.getArticlesByTag(tag).subscribe(response => this.articles = response.articles); } loadTags() { From dca9f936d331a92d355cc47928cac7a71d19ce6c Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Tue, 21 Jul 2020 17:07:11 -0300 Subject: [PATCH 06/10] error arreglado --- angular.json | 10 +++++++--- src/app/articles.service.ts | 1 + src/app/articles/articles.component.html | 2 +- src/app/articles/articles.component.ts | 2 +- 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/angular.json b/angular.json index 4deb648..e4b7f1e 100644 --- a/angular.json +++ b/angular.json @@ -123,6 +123,10 @@ } } } - }}, - "defaultProject": "ng-peti" -} + } + }, + "defaultProject": "ng-peti", + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts index 32b17d2..0ff5e45 100644 --- a/src/app/articles.service.ts +++ b/src/app/articles.service.ts @@ -9,6 +9,7 @@ export class ArticlesService { readonly baseUrl = 'https://conduit.productionready.io/api/'; constructor(private http: HttpClient) { } + getArticlesByTag(tag:string) { const limit = 5; const url = `${this.baseUrl}articles?tag=${tag}&limit=${limit}`; diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html index 7084bd2..cfb8cc0 100644 --- a/src/app/articles/articles.component.html +++ b/src/app/articles/articles.component.html @@ -16,6 +16,6 @@

Lista de tags

- {{article}} + {{article | json}}

diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts index 535ca42..424019a 100644 --- a/src/app/articles/articles.component.ts +++ b/src/app/articles/articles.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Injectable } from '@angular/core'; import { ArticlesService } from '../articles.service'; @Component({ From e2e5198a3ab0514f86b9d86e6875b3a113ea8cf7 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Wed, 22 Jul 2020 00:05:53 -0300 Subject: [PATCH 07/10] ejercicio 1 funcionando --- src/app/articles/articles.component.html | 44 ++++++++++++++---------- src/app/articles/articles.component.scss | 42 ++++++++++++++++------ 2 files changed, 57 insertions(+), 29 deletions(-) diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html index bf3ad6a..49821a3 100644 --- a/src/app/articles/articles.component.html +++ b/src/app/articles/articles.component.html @@ -1,22 +1,28 @@ -

Lista de tags

+

Nube de tags

-
-
-

{{tag}}

- - -
- - -
- - +
+
+ -
-

- {{article | json}} -

+
+
+

Titulo: {{article.title}}

+

Descripcion: {{article.description}}

+

Cuerpo: {{article.body}}

+

Fecha de creacion: {{article.createdAt}}

+

Etiquetas:

+
    +
  • {{tag}}
    • +
+
+
+
\ No newline at end of file diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss index f85be1d..9368701 100644 --- a/src/app/articles/articles.component.scss +++ b/src/app/articles/articles.component.scss @@ -7,18 +7,15 @@ } //https://platzi.com/blog/tutorial-como-construir-un-layout-con-css-grid/ .tag-group{ - display: inline-grid; - width: 150px; - height: 150px; - background-color: rgb(79, 123, 255); - margin: 20px; + display: inline-block; + background-color: rgb(40, 67, 148); padding: 10px; - border-radius: 10px; - + font-weight: bold; } -.tag-grid{ - //display: grid; +.tag-nav{ + display: inline-block; + width: 20%; background-color: lightgrey; justify-items: center; align-items: center; @@ -30,5 +27,30 @@ } .my-button{ - width: fit-content; + display: block; + padding: 10px; + background-color: rgb(62, 110, 212); + color: black; + text-decoration: none; +} + +.my-button:hover{ + background-color: rgb(24, 31, 128); +} + +.article{ + background-color: lightcoral; + padding: 10px; + margin-bottom: 5px; + +} + +.article-item{ + display: block; +} + +.main-content{ + margin-left: 20%; + display: float; + display: inline-block; } \ No newline at end of file From 7128687c20f3f1cd570ae34e8338371432d6710d Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Wed, 22 Jul 2020 22:11:32 -0300 Subject: [PATCH 08/10] ejercicio 2 funcionando --- src/app/articles.service.ts | 20 +++++++++++++++++++- src/app/articles/articles.component.html | 4 +++- src/app/articles/articles.component.ts | 7 ++++++- src/index.html | 2 +- 4 files changed, 29 insertions(+), 4 deletions(-) diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts index 0ff5e45..a7dae82 100644 --- a/src/app/articles.service.ts +++ b/src/app/articles.service.ts @@ -7,6 +7,7 @@ import { HttpClient } from '@angular/common/http'; export class ArticlesService { readonly baseUrl = 'https://conduit.productionready.io/api/'; + authenticationToken = null; constructor(private http: HttpClient) { } @@ -15,8 +16,25 @@ export class ArticlesService { const url = `${this.baseUrl}articles?tag=${tag}&limit=${limit}`; return this.http.get(url); } + getTags() { - const url = this.baseUrl + 'tags'; + const url = `${this.baseUrl}tags`; return this.http.get(url); } + + addCommentToArticle(slug: string, comment:string){ + const url = `${this.baseUrl}articles/${slug}/comments`; + this.authenticate(); + const headers = {Authorization: 'Token '+this.authenticationToken} + return this.http.post(url,{comment:{body:comment}},{headers}); + } + + authenticate(){ + if(this.authenticationToken === null) { + const url = `${this.baseUrl}users/login`; + const email = 'user123@dominio.com'; + const password = 'mipassword'; + this.http.post(url,{user:{email:email,password:password}}).subscribe(obj => this.authenticationToken = obj.user.token); + } + } } diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html index 49821a3..ffe4ac4 100644 --- a/src/app/articles/articles.component.html +++ b/src/app/articles/articles.component.html @@ -2,7 +2,7 @@

Nube de tags

-
+======= + + +
+
+

Titulo: {{article.title}}

+

Descripcion: {{article.description}}

+

Cuerpo: {{article.body}}

+

Fecha de creacion: {{article.createdAt.getDate()}}/ + {{article.createdAt.getMonth()+1}}/{{article.createdAt.getFullYear()}} - + {{article.createdAt.getHours()}}:{{article.createdAt.getMinutes()}} +

+

Etiquetas:

+
    +
  • {{tag}}
    • +
+
+
+>>>>>>> 398bb81... mejora de estilos diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss index 9368701..622fb74 100644 --- a/src/app/articles/articles.component.scss +++ b/src/app/articles/articles.component.scss @@ -1,35 +1,31 @@ .title{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; - font-size: xx-large; + font-size: 50px; font-weight: bold; - color: darkslategrey; + color: white; text-align: center; -} -//https://platzi.com/blog/tutorial-como-construir-un-layout-con-css-grid/ -.tag-group{ - display: inline-block; - background-color: rgb(40, 67, 148); - padding: 10px; - font-weight: bold; + display: block; + background-color: darkslategrey; + margin: -15px 0px 0px -15px; + padding: 25px; } -.tag-nav{ - display: inline-block; +.tag-group{ + float: left; width: 20%; - background-color: lightgrey; - justify-items: center; - align-items: center; + margin-left: -10px; + text-align: center; + background-color: rgb(105, 124, 233); } -.selected-tag{ - width: 95% !important; - height: 200px; -} +//.tag-nav{ +// display: inline-block; +//} .my-button{ display: block; padding: 10px; - background-color: rgb(62, 110, 212); + border-bottom: rgb(1, 1, 41) solid 2px; color: black; text-decoration: none; } @@ -38,19 +34,39 @@ background-color: rgb(24, 31, 128); } +.selected-tag{ + background-color: rgb(62, 110, 212); +} + .article{ - background-color: lightcoral; + background-color: rgb(230, 230, 230); padding: 10px; - margin-bottom: 5px; - + margin-top: 5px; + border-radius: 30px; } -.article-item{ +.article-itemgh{ display: block; } +.tag-list{ + display: inline-flex; + padding: 5px 10px 5px 10px; + border-radius: 10px; + background-color: gray; + margin-left: 10px; + margin-bottom: 10px; +} + .main-content{ - margin-left: 20%; - display: float; + margin-left: 30%; + width: 75%; display: inline-block; + margin-left: 20px; +} + +.tag-group-title{ + font-size: x-large; + font-weight: bold; + padding: 5px; } \ No newline at end of file diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts index 59de5a8..a6f195c 100644 --- a/src/app/articles/articles.component.ts +++ b/src/app/articles/articles.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, Injectable } from '@angular/core'; import { ArticlesService } from '../articles.service'; +import { Article } from '../entities/article'; @Component({ selector: 'app-articles', @@ -20,7 +21,7 @@ export class ArticlesComponent implements OnInit { loadArticlesByTag(tag: string) { this.selectedTag = tag; - this.service.getArticlesByTag(tag).subscribe(response => this.articles = response.articles); + this.service.getArticlesByTag(tag).subscribe(response => this.articles = response.articles.map(art => Article.createArticle(art))); } loadTags() { diff --git a/src/app/entities/article.spec.ts b/src/app/entities/article.spec.ts new file mode 100644 index 0000000..eea0b31 --- /dev/null +++ b/src/app/entities/article.spec.ts @@ -0,0 +1,7 @@ +import { Article } from './article'; + +describe('Article', () => { + it('should create an instance', () => { + expect(new Article()).toBeTruthy(); + }); +}); diff --git a/src/app/entities/article.ts b/src/app/entities/article.ts new file mode 100644 index 0000000..94057f9 --- /dev/null +++ b/src/app/entities/article.ts @@ -0,0 +1,19 @@ +export class Article { + title:string; + slug:string; + body:string; + createdAt:Date; + updatedAt:Date; + tagList:string[] + description:string; + author:Object; + favorited:boolean; + favoritesCount:number; + + static createArticle(art){ + let article = new Article(); + Object.assign(article,art); + article.createdAt = new Date(art.createdAt); + return article; + } +} From 43743014ee85a1304c449653e6e6ca48a7daf7a9 Mon Sep 17 00:00:00 2001 From: Oscar Dorronzoro Date: Thu, 23 Jul 2020 19:59:17 -0300 Subject: [PATCH 10/10] encadenamiento de requests --- src/app/articles.service.ts | 25 ++++++++-------- src/app/articles/articles.component.html | 36 ++++-------------------- src/app/articles/articles.component.scss | 25 ++++++++++++++++ src/app/articles/articles.component.ts | 7 +++-- 4 files changed, 48 insertions(+), 45 deletions(-) diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts index a7dae82..a4b1c55 100644 --- a/src/app/articles.service.ts +++ b/src/app/articles.service.ts @@ -7,7 +7,6 @@ import { HttpClient } from '@angular/common/http'; export class ArticlesService { readonly baseUrl = 'https://conduit.productionready.io/api/'; - authenticationToken = null; constructor(private http: HttpClient) { } @@ -22,19 +21,21 @@ export class ArticlesService { return this.http.get(url); } - addCommentToArticle(slug: string, comment:string){ + addCommentToArticle(slug: string, comment:string, callback){ const url = `${this.baseUrl}articles/${slug}/comments`; - this.authenticate(); - const headers = {Authorization: 'Token '+this.authenticationToken} - return this.http.post(url,{comment:{body:comment}},{headers}); + this.authenticate( + ({ user: {token} }) => { + const headers = {Authorization: 'Token ' + token} + this.http.post(url,{comment:{body:comment}},{headers}).subscribe(callback); + } + ); + } - authenticate(){ - if(this.authenticationToken === null) { - const url = `${this.baseUrl}users/login`; - const email = 'user123@dominio.com'; - const password = 'mipassword'; - this.http.post(url,{user:{email:email,password:password}}).subscribe(obj => this.authenticationToken = obj.user.token); - } + authenticate(functionRequest){ + const url = `${this.baseUrl}users/login`; + const email = 'user123@dominio.com'; + const password = 'mipassword'; + this.http.post(url,{user:{email:email,password:password}}).subscribe(functionRequest); } } diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html index be28ef1..25fcf14 100644 --- a/src/app/articles/articles.component.html +++ b/src/app/articles/articles.component.html @@ -1,35 +1,5 @@

Articulos

-<<<<<<< HEAD -
-
- - -
-
-

Titulo: {{article.title}}

-

Descripcion: {{article.description}}

-

Cuerpo: {{article.body}}

-

Fecha de creacion: {{article.createdAt}}

-

Etiquetas:

-
    -
  • {{tag}}
    • -
- - -
-
-
-
-=======