diff --git a/src/app/app.component.html b/src/app/app.component.html index 6571e70..6c77e40 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts index 060f616..936943f 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' @@ -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(url); } + + getArticlesByTag(tag: string){ + const url = this.baseUrl + `articles?tag=${tag}`; + return this.http.get(url); + } + getTags() { const url = this.baseUrl + 'tags'; return this.http.get(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); } + } } diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html index 404cd99..3d4c55c 100644 --- a/src/app/articles/articles.component.html +++ b/src/app/articles/articles.component.html @@ -1,9 +1,40 @@ +
+

Articles from the Arctic

+

Select one tag and cool articles will be selected just for you:

-
-

{{article.title}}

+
+
+ + + +
+
+
+ +
+
+

{{article.title}}

+

{{article.description}}

{{article.body}}

+
+

Creation Date: {{article.createdAt}}

+
+
+ + + +
+
+
+
+ +
+ +
- - -{{tags | json}} - diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss index e69de29..1ee17b8 100644 --- a/src/app/articles/articles.component.scss +++ b/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; +} diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts index 434bf47..38ace3b 100644 --- a/src/app/articles/articles.component.ts +++ b/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); } } diff --git a/src/assets/space-background.jpg b/src/assets/space-background.jpg new file mode 100644 index 0000000..b09d983 Binary files /dev/null and b/src/assets/space-background.jpg differ diff --git a/src/styles.scss b/src/styles.scss index 90d4ee0..c93ebea 100644 --- a/src/styles.scss +++ b/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; +}