From 7e57754011630ebddb9871cfa4ba9ccb46f2fb3d Mon Sep 17 00:00:00 2001 From: Admir Sabanovic Date: Thu, 18 May 2017 12:53:00 +0200 Subject: [PATCH] add comment preview component --- client/components/article.comp.js | 4 - client/components/comment-preview.comp.js | 101 ++++++++++++++++++++++ client/index.js | 5 ++ client/pages/article-preview.comp.js | 32 ++++--- client/pages/profile.comp.js | 1 - 5 files changed, 121 insertions(+), 22 deletions(-) create mode 100644 client/components/comment-preview.comp.js diff --git a/client/components/article.comp.js b/client/components/article.comp.js index a283ae5..947b17b 100644 --- a/client/components/article.comp.js +++ b/client/components/article.comp.js @@ -1,10 +1,6 @@ -import {X_Component} from "./component.dec"; import {RouterHandler} from "../router/router-handler"; "use strict"; -@X_Component({ - templateUrl: 'components/article.comp.html' -}) export class ArticleComponent extends HTMLElement { constructor() { diff --git a/client/components/comment-preview.comp.js b/client/components/comment-preview.comp.js new file mode 100644 index 0000000..9feceff --- /dev/null +++ b/client/components/comment-preview.comp.js @@ -0,0 +1,101 @@ +import {RouterHandler} from "../router/router-handler"; +"use strict"; + +export class CommentPreviewComponent extends HTMLElement { + + constructor(username, content) { + super(); + this._username = username; + this._content = content; + this.authorImage = null; + this.createdAt = null; + + this.$authorUsername = null; + this.$authorImage = null; + this.$createdAt = null; + this.$content = null; + + this.navigateToUser = this.navigateToUser.bind(this); + } + + static get observedAttributes() { + return ['username', 'content']; //, 'authorImage', 'createdAt', 'content' + } + + attributeChangedCallback(name, oldValue, newValue) { + switch (name) { + case 'username' : { + this._username = newValue; + } + case 'content': { + this._content = newValue; + } + } + this.updateScreen(); + } + + disconnectedCallback() { + this.$authorUsername.removeEventListener('click', this.navigateToUser); + } + + connectedCallback() { + this.innerHTML = this.render(); + this.$authorUsername = this.querySelector('#author-username'); + this.$authorImage = this.querySelector('#author-image'); + this.$createdAt = this.querySelector('#createdAt'); + this.$content = this.querySelector('#comment-content'); + this.updateScreen(); + + + this.$authorUsername.addEventListener('click', this.navigateToUser); + } + + set username(value) { + this.setAttribute('username', value); + } + + get username() { + return this._username; + } + + get content() { + return this._content; + } + + set content(value) { + this.setAttribute('content', value) + } + + + updateScreen() { + this.$authorUsername.textContent = this._username; + this.$authorImage.textContent = this.authorImage; + this.$createdAt.textContent = this.createdAt; + this.$content.textContent = this.content; + } + + navigateToUser(e) { + e.preventDefault(); + RouterHandler.getInstance.router.navigate(this.$authorUsername.getAttribute('href')); + } + + + render() { + return ` +
+
+

+
+
+ + + +   + + Dec 29th +
+
+ `; + } + +} diff --git a/client/index.js b/client/index.js index d4fb51a..36293ae 100644 --- a/client/index.js +++ b/client/index.js @@ -8,6 +8,7 @@ import {ComponentRegistry} from "./component-registry"; import {RouterHandler} from "./router/router-handler"; import {ProfileComponent} from "./pages/profile.comp"; import {ArticlePreviewComponent} from "./pages/article-preview.comp"; +import {CommentPreviewComponent} from "./components/comment-preview.comp"; class App { constructor() { @@ -45,6 +46,10 @@ class App { { tagName: 'article-preview', component: ArticlePreviewComponent + }, + { + tagName: 'comment-preview', + component: CommentPreviewComponent } ]; ComponentRegistry.register(components); diff --git a/client/pages/article-preview.comp.js b/client/pages/article-preview.comp.js index 4794003..2ea88b9 100644 --- a/client/pages/article-preview.comp.js +++ b/client/pages/article-preview.comp.js @@ -1,3 +1,4 @@ +import {CommentPreviewComponent} from "../components/comment-preview.comp"; "use strict"; var markdown = require("markdown").markdown; @@ -16,7 +17,8 @@ export class ArticlePreviewComponent extends HTMLElement { this.$articleActionDate = null; this.$articleActionFollowUsername = null; this.$articleActionFavouritesCount = null; - console.log(markdown); + + this.$commentsWrapper = null; } static get observedAttributes() { @@ -39,23 +41,30 @@ export class ArticlePreviewComponent extends HTMLElement { this.$articleActionDate = document.getElementById('article-action-date'); this.$articleActionFollowUsername = document.getElementById('article-action-follow-username'); this.$articleActionFavouritesCount = document.getElementById('article-action-favorites-count'); - + this.$commentsWrapper = document.getElementById('comments-wrapper'); // /api/articles/:slug fetch('https://conduit.productionready.io/api/articles/' + this.slug).then((response) => { return response.json(); }).then(r => { this.article = r.article; this.updateArticleContent(); - console.log(this.article); }); fetch('https://conduit.productionready.io/api/articles/' + this.slug + '/comments').then((response) => { return response.json(); }).then(r => { - console.log(r); + r.comments.forEach(comment => { + // console.log(comment); + this.generateCommentComponents(comment); + }); }); } + generateCommentComponents(comment) { + let newComment = new CommentPreviewComponent(comment.author.username, comment.body); + this.$commentsWrapper.appendChild(newComment); + } + updateArticleContent() { this.$articleTitle.textContent = this.article.title; this.$profileUsername.textContent = this.article.author.username; @@ -148,20 +157,9 @@ export class ArticlePreviewComponent extends HTMLElement { - -
-
-

With supporting text below as a natural lead-in to additional content.

-
-
- - - -   - Jacob Schmidt - Dec 29th -
+
+
diff --git a/client/pages/profile.comp.js b/client/pages/profile.comp.js index 8ab9845..37918e3 100644 --- a/client/pages/profile.comp.js +++ b/client/pages/profile.comp.js @@ -8,7 +8,6 @@ export class ProfileComponent extends HTMLElement { this.username = params.username; this.model = null; - console.log(params); this.$username = null; this.$bio = null; this.userImg = null;