From 3cb18ca49e39e0605b713b1e5799fbccd38f865d Mon Sep 17 00:00:00 2001 From: Admir Sabanovic Date: Thu, 18 May 2017 20:43:42 +0200 Subject: [PATCH] profile preview --- client/components/article.comp.js | 18 +- client/components/comment-preview.comp.js | 18 +- client/components/comments-container.comp.js | 42 +++++ client/components/component.dec.js | 76 -------- client/components/layout/c-nav.comp.js | 15 +- client/components/popular-tags.comp.js | 9 - client/index.js | 6 + client/pages/article-preview.comp.js | 187 +++++++++---------- client/pages/home.comp.html | 32 ---- client/pages/home.comp.js | 7 + client/pages/login.comp.js | 1 - client/pages/profile.comp.js | 83 ++++++-- client/router/auth-defender.js | 6 + client/router/router-handler.js | 55 +++--- package.json | 14 +- 15 files changed, 280 insertions(+), 289 deletions(-) create mode 100644 client/components/comments-container.comp.js delete mode 100644 client/components/component.dec.js delete mode 100644 client/pages/home.comp.html create mode 100644 client/router/auth-defender.js diff --git a/client/components/article.comp.js b/client/components/article.comp.js index 7300473..1e5b5e1 100644 --- 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 {

${this.model.description ? this.model.description : ''}

Read more... diff --git a/client/components/comment-preview.comp.js b/client/components/comment-preview.comp.js index 9feceff..10c304c 100644 --- 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 new file mode 100644 index 0000000..5785f5f --- /dev/null +++ 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 ` + + + `; + }).join(' ')} + + `; + } +} diff --git a/client/components/component.dec.js b/client/components/component.dec.js deleted file mode 100644 index 25086b4..0000000 --- a/client/components/component.dec.js +++ /dev/null @@ -1,76 +0,0 @@ -export function X_Component(value) { - const templateUrl = value.templateUrl; - return function decorator(target) { - target.template = (model) => TemplateResolver.templatePromise(templateUrl, model); - } -} - - -class TemplateResolver { - constructor() { - } - - static hasCache(url) { - if (this.cache[url]) { - return this.cache[url]; - } - } - - static setCache(url, resolve) { - this.cache[url] = resolve; - } - - static templatePromise(templateUrl, model) { - let template = null; - let cache = this.hasCache(templateUrl); - if (cache) { - template = cache; - } else { - template = this.getTemplateAsync(templateUrl); - this.setCache(templateUrl, template); - } - - return new Promise((resolve, reject) => { - template.then(t => { - let parsed = this.parseTemplate(t, model); - resolve(parsed); - }); - }); - } - - - static parseTemplate(html, model) { - var htmlDecoded = eval('`' + html + '`'); - var toNode = html => - new DOMParser().parseFromString(htmlDecoded, 'text/html').body.firstChild; - return toNode; - } - - static async getTemplateAsync(templateUrl) { - let response = await - fetch(templateUrl); - let body = await - response.body; - let reader = await - body.getReader().read(); - var htmlDecoded = new TextDecoder("utf-8").decode(reader.value); - return htmlDecoded; - } - -} - -TemplateResolver.cache = []; - - -// return new Promise((resolve, reject) => { -// fetch(templateUrl).then(response => { -// response.body.getReader().read().then(a => { -// var htmlDecoded = new TextDecoder("utf-8").decode(a.value); -// htmlDecoded = eval('`' + htmlDecoded + '`'); -// var toNode = html => -// new DOMParser().parseFromString(htmlDecoded, 'text/html').body.firstChild; -// this.setCache(templateUrl, toNode); -// resolve(toNode); -// }); -// }); -// }); \ No newline at end of file diff --git a/client/components/layout/c-nav.comp.js b/client/components/layout/c-nav.comp.js index f428f23..bbf8b4b 100644 --- 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', ' New Post'); + let newArticle = this.createNavItemLink('#/editor', ' New Post'); this.$navUl.appendChild(newArticle); - let settings = this.createNavItemLink('/settings', ' Settings'); + let settings = this.createNavItemLink('#/settings', ' 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 `