profile preview

gothinkster · May 18, 2017 · 3cb18ca · 3cb18ca
1 parent 5e8b228
commit 3cb18ca
Show file tree

Hide file tree

Showing 15 changed files with 280 additions and 289 deletions.
diff --git a/client/components/article.comp.js b/client/components/article.comp.js
@@ -10,6 +10,8 @@ export class ArticleComponent extends HTMLElement {
             heart: 0
         };
         this.updateHearts = this.updateHearts.bind(this);
+
+        this.$tagList = null;
     }
 
     static get observedAttributes() {
@@ -27,6 +29,7 @@ export class ArticleComponent extends HTMLElement {
 
     connectedCallback() {
         this.innerHTML = this.render();
+        // this.$tagList = this.querySelector('ul.tag-list');
         const button = this.querySelector('#ion-heart');
         button.addEventListener('click', this.updateHearts);
 
@@ -41,8 +44,6 @@ export class ArticleComponent extends HTMLElement {
             e.preventDefault();
             RouterHandler.getInstance.router.navigate(previewLink.getAttribute('href'));
         });
-
-
     }
 
 
@@ -73,12 +74,13 @@ export class ArticleComponent extends HTMLElement {
                     <p>${this.model.description ? this.model.description : ''}</p>
                     <span>Read more...</span>
                     <ul class="tag-list">
-                        <li class="tag-default tag-pill tag-outline">
-                            well
-                        </li>
-                        <li class="tag-default tag-pill tag-outline">
-                            well
-                        </li>
+                        ${this.model.tagList.map(tag => {
+                            return `
+                            <li class="tag-default tag-pill tag-outline">
+                            ${tag}
+                            </li>
+                            `;
+                        }).join(' ')}
                     </ul>
                 </a>
             </div>

diff --git a/client/components/comment-preview.comp.js b/client/components/comment-preview.comp.js
@@ -3,10 +3,10 @@ import {RouterHandler} from "../router/router-handler";
 
 export class CommentPreviewComponent extends HTMLElement {
 
-    constructor(username, content) {
+    constructor() {
         super();
-        this._username = username;
-        this._content = content;
+        this._username = null;
+        this._content = null;
         this.authorImage = null;
         this.createdAt = null;
 
@@ -23,6 +23,7 @@ export class CommentPreviewComponent extends HTMLElement {
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
+
         switch (name) {
             case 'username' : {
                 this._username = newValue;
@@ -31,6 +32,7 @@ export class CommentPreviewComponent extends HTMLElement {
                 this._content = newValue;
             }
         }
+
         this.updateScreen();
     }
 
@@ -68,10 +70,12 @@ export class CommentPreviewComponent extends HTMLElement {
 
 
     updateScreen() {
-        this.$authorUsername.textContent = this._username;
-        this.$authorImage.textContent = this.authorImage;
-        this.$createdAt.textContent = this.createdAt;
-        this.$content.textContent = this.content;
+        if (this.$authorUsername) {//dom is rendered
+            this.$authorUsername.textContent = this._username;
+            this.$authorImage.textContent = this.authorImage;
+            this.$createdAt.textContent = this.createdAt;
+            this.$content.textContent = this.content;
+        }
     }
 
     navigateToUser(e) {

diff --git a/client/components/comments-container.comp.js b/client/components/comments-container.comp.js
@@ -0,0 +1,42 @@
+export class CommentsContainerComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.comments = [];
+    }
+
+    static get observedAttributes() {
+        return [];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+
+    }
+
+    connectedCallback() {
+        this.slug = this.getAttribute('slug');
+        fetch('https://conduit.productionready.io/api/articles/' + this.slug + '/comments').then((response) => {
+            return response.json();
+        }).then(r => {
+            this.comments = r.comments;
+            this.innerHTML = this.render();
+        });
+    }
+
+    disconnectedCallback() {
+
+    }
+
+    render() {
+        return `
+            ${this.comments.map(comment => {
+                    return `
+                        <comment-preview 
+                            username="${comment.author.username}" 
+                            content="${comment.body}">
+                        </comment-preview>
+                    `;
+            }).join(' ')}
+            
+        `;
+    }
+}
diff --git a/client/components/component.dec.js b/client/components/component.dec.js
diff --git a/client/components/layout/c-nav.comp.js b/client/components/layout/c-nav.comp.js
@@ -64,13 +64,13 @@ export class CNavComponent extends HTMLElement {
     }
 
     createProfileLinks(user) {
-        let newArticle = this.createNavItemLink('/editor', '<i class="ion-compose"></i>&nbsp;New Post');
+        let newArticle = this.createNavItemLink('#/editor', '<i class="ion-compose"></i>&nbsp;New Post');
         this.$navUl.appendChild(newArticle);
 
-        let settings = this.createNavItemLink('/settings', '<i class="ion-gear-a"></i>&nbsp;Settings');
+        let settings = this.createNavItemLink('#/settings', '<i class="ion-gear-a"></i>&nbsp;Settings');
         this.$navUl.appendChild(settings);
 
-        let userProfile = this.createNavItemLink('/profile/' + user.username, user.username);
+        let userProfile = this.createNavItemLink('#/profile/' + user.username, user.username);
         this.$navUl.appendChild(userProfile);
     }
 
@@ -83,7 +83,6 @@ export class CNavComponent extends HTMLElement {
 
     setCurrentActive() {
         let curUrl = location.hash;
-        curUrl = curUrl.substring(1);
         console.log(curUrl);
         this.updateActive(curUrl);
     }
@@ -116,16 +115,16 @@ export class CNavComponent extends HTMLElement {
         return `
          <nav class="navbar navbar-light">
             <div class="container">
-                <a class="navbar-brand" href="/" data-navigo >conduit</a>
+                <a class="navbar-brand" href="#/" data-navigo >conduit</a>
                 <ul class="nav navbar-nav pull-xs-right">
                     <li class="nav-item">
-                        <a href="/" data-navigo class="nav-link">Home</a>
+                        <a href="#/" data-navigo class="nav-link">Home</a>
                     </li>
                     <li id="signin" class="nav-item">
-                        <a href="/login" data-navigo class="nav-link">Sign in</a>
+                        <a href="#/login" data-navigo class="nav-link">Sign in</a>
                     </li>
                     <li id="signup" class="nav-item">
-                        <a href="/register" data-navigo class="nav-link">Sign up</a>
+                        <a href="#/register" data-navigo class="nav-link">Sign up</a>
                     </li>
                 </ul>
             </div>

diff --git a/client/components/popular-tags.comp.js b/client/components/popular-tags.comp.js
@@ -4,13 +4,6 @@ export class PopularTagsComponent extends HTMLElement {
 
     constructor() {
         super();
-        // var event = new CustomEvent('build', { 'detail': elem.dataset.time });
-        //
-        // // Listen for the event.
-        //         elem.addEventListener('build', function (e) { ... }, false);
-        //
-        // // Dispatch the event.
-        //         elem.dispatchEvent(event);
     }
 
     static get observedAttributes() {
@@ -36,11 +29,9 @@ export class PopularTagsComponent extends HTMLElement {
         fetch('https://conduit.productionready.io/api/tags').then(function (response) {
             return response.json();
         }).then(r => {
-            if (tagList) {
                 while (tagList.firstChild) {
                     tagList.removeChild(tagList.firstChild);
                 }
-            }
             r.tags.forEach(tag => {
                 let tagEl = this.createNewTagElement(tag);
                 tagEl.addEventListener('click', () => {

diff --git a/client/index.js b/client/index.js
@@ -13,6 +13,8 @@ import {Authentication} from "./auth/authentication";
 import {EditorComponent} from "./pages/editor.comp";
 import {SettingsComponent} from "./pages/settings.comp";
 import {PopularTagsComponent} from "./components/popular-tags.comp";
+import {CommentsContainerComponent} from "./components/comments-container.comp";
+
 
 class App {
     constructor() {
@@ -56,6 +58,10 @@ class App {
                 tagName: 'comment-preview',
                 component: CommentPreviewComponent
             },
+            {
+                tagName: 'comments-container',
+                component: CommentsContainerComponent
+            },
             {
                 tagName: 'c-editor',
                 component: EditorComponent