add comment preview component

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() {

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 `
+        <div class="card">
+          <div class="card-block">
+            <p id="comment-content" class="card-text"></p>
+          </div>
+          <div class="card-footer">
+            <a href="" class="comment-author">
+              <img id="author-image" src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
+            </a>
+            &nbsp;
+            <a id="author-username" href="#/profile/${this.username}" class="comment-author"></a>
+            <span id="createdAt" class="date-posted">Dec 29th</span>
+          </div>
+        </div>
+        `;
+    }
+
+}

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);

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 {
             </button>
           </div>
         </form>
-        
-        <div class="card">
-          <div class="card-block">
-            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-          </div>
-          <div class="card-footer">
-            <a href="" class="comment-author">
-              <img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
-            </a>
-            &nbsp;
-            <a href="" class="comment-author">Jacob Schmidt</a>
-            <span class="date-posted">Dec 29th</span>
-          </div>
+        <div id="comments-wrapper">
         </div>
+        
      
       </div>
 

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;