comments

app/components/article-preview-banner.js

@@ -0,0 +1,148 @@
+import {Authentication} from "../auth/authentication";
+export class ArticlePreviewBannerComponent extends HTMLElement {
+
+    constructor() {
+        super();
+        this.auth = Authentication.instance.auth;
+        this.followButtonAction = this.followButtonAction.bind(this);
+        this._title = null;
+        this._username = null;
+        this._favoritesCount = null;
+        this._date = null;
+        this._image = null;
+    }
+
+    static get observedAttributes() {
+        return ['title', 'username', 'favorites-count', 'date', 'image'];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (newValue) {
+            switch (name) {
+                case 'title': {
+                    this._title = newValue;
+                    break;
+                }
+                case 'username': {
+                    this._username = newValue;
+                    break;
+                }
+                case 'favorites-count' : {
+                    this._favoritesCount = newValue;
+                    break;
+                }
+                case 'date' : {
+                    this._date = newValue;
+                    break;
+                }
+                case 'image': {
+                    this._image = newValue;
+                    break;
+                }
+            }
+            this.innerHTML = this.render();
+        }
+    }
+
+    connectedCallback() {
+        this.innerHTML = this.render();
+    }
+
+    followButtonAction(e) {
+
+    }
+
+    disconnectedCallback() {
+        if (this.$followButton) {
+            this.$followButton.removeEventListener('click', this.followButtonAction);
+        }
+    }
+
+
+    render() {
+        return `
+                  <div class="banner">
+                    <div class="container">
+                
+                      <h1 id="article-title">
+                        ${this.title}
+                      </h1>
+                
+                      <div class="article-meta">
+                        <a href="">
+                            <img src="${this.image}" alt="no img" />
+                        </a>
+                        <div class="info">
+                          <a id="profile-username" href="" class="author">${this._username}</a>
+                          <span id="article-date" class="date">${this.date}</span>
+                        </div>
+${
+            this.auth && this.auth.username === this.username ?
+                `
+                <span>
+                <a class="btn btn-outline-secondary btn-sm" href="#/editor/asdasd-d1z1f3">
+                    <i class="ion-edit"></i>TODO Edit Article
+                </a>
+                <button class="btn btn-outline-danger btn-sm"><i class="ion-trash-a">
+                    </i>TODO Delete Article</button>
+                </span>` : `
+                <button class="btn btn-sm btn-outline-secondary">
+                  <i class="ion-plus-round"></i>
+                  &nbsp;
+                 TODO Follow ${this._username}
+                </button>
+                &nbsp;&nbsp;
+                <button class="btn btn-sm btn-outline-secondary">
+                  <i class="ion-heart"></i>
+                  &nbsp;
+                 TODO Favorite Post <span class="counter">${this.favoritesCount}</span>
+                </button>`
+            }
+
+                      </div>
+                
+                    </div>
+                  </div>
+`;
+    }
+
+    set title(value) {
+        this.setAttribute('title', value);
+    }
+
+    get title() {
+        return this._title;
+    }
+
+    set username(value) {
+        this.setAttribute('username', value);
+    }
+
+    get username() {
+        return this._username;
+    }
+
+    set favoritesCount(value) {
+        this.setAttribute('favorites-count', value);
+    }
+
+    get favoritesCount() {
+        return this._favoritesCount;
+    }
+
+    set date(value) {
+        this.setAttribute('date', value);
+    }
+
+    get date() {
+        return this._date;
+    }
+
+    set image(value) {
+        this.setAttribute('image', value);
+    }
+
+    get image() {
+        return this._image;
+    }
+}

app/components/comment-create.comp.js

@@ -0,0 +1,74 @@
+import {Authentication} from "../auth/authentication";
+export class CommentCreateComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.postComment = this.postComment.bind(this);
+        this.auth = Authentication.instance.auth;
+        this.image = "https://static.productionready.io/images/smiley-cyrus.jpg";
+        if (this.auth) {
+            this.image = this.auth.image;
+        }
+    }
+
+    static get observedAttributes() {
+        return [];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+    }
+
+    connectedCallback() {
+        if (this.auth) {
+            this.innerHTML = this.renderCommentForm();
+            this.$postCommentBtn = this.querySelector('#postCommentBtn');
+            this.$commentValue = this.querySelector('#comment-value');
+            this.$postCommentBtn.addEventListener('click', this.postComment)
+        } else {
+            this.innerHTML = this.renderLoginButtons();
+        }
+    }
+
+    postComment(e) {
+        e.preventDefault();
+        var event = new CustomEvent('comment', {'detail': this.$commentValue.value});
+        this.dispatchEvent(event);
+    }
+
+    disconnectedCallback() {
+        if (this.auth) {
+            this.$postCommentBtn.removeEventListener('click', this.postComment)
+        }
+    }
+
+    renderCommentForm() {
+        return `
+        <form class="card comment-form">
+          <div class="card-block">
+            <textarea id="comment-value" class="form-control" placeholder="TODO - Write a comment..." rows="3"></textarea>
+          </div>
+          <div class="card-footer">
+            <img src="${this.image ? this.image : 'https://static.productionready.io/images/smiley-cyrus.jpg'}" class="comment-author-img" />
+            <button id="postCommentBtn" class="btn btn-sm btn-primary">
+             Post Comment
+            </button>
+          </div>
+        </form>
+`;
+    }
+
+    renderLoginButtons() {
+        return `
+<div class="col-xs-12 col-md-8 offset-md-2">
+<p>
+<a class="" href="#/login">Sign in</a>
+ or 
+<a class="" href="#/register">sign up</a>
+ to add comments on this article.
+</p>
+<div>
+
+</div>
+</div>`;
+    }
+
+}

app/components/comments-container.comp.js

@@ -26,6 +26,10 @@ export class CommentsContainerComponent extends HTMLElement {
 
     }
 
+    refresh() {
+        this.innerHTML = this.render();
+    }
+
     render() {
         return `
             ${this.comments.map(comment => {

app/components/user-info.comp.js

@@ -0,0 +1,89 @@
+import {Authentication} from "../auth/authentication";
+export class UserInfoComponent extends HTMLElement {
+
+    constructor() {
+        super();
+        this.auth = Authentication.instance.auth;
+        this.followButtonAction = this.followButtonAction.bind(this);
+    }
+
+    static get observedAttributes() {
+        return [];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+
+    }
+
+    connectedCallback() {
+        this.username = this.getAttribute('username');
+        fetch('https://conduit.productionready.io/api/profiles/' + this.username).then((response) => {
+            return response.json();
+        }).then(r => {
+            this.model = r.profile;
+            this.innerHTML = this.render();
+            this.$followButton = this.querySelector('#follow-button');
+            if(this.$followButton) {
+                this.$followButton.addEventListener('click', this.followButtonAction);
+            }
+        });
+    }
+
+    followButtonAction(e) {
+
+    }
+
+    disconnectedCallback() {
+        if(this.$followButton) {
+            this.$followButton.removeEventListener('click', this.followButtonAction);
+        }
+    }
+
+    // this.$username = document.getElementById('username');
+    // this.$bio = document.getElementById('bio');
+    // this.userImg = document.getElementById('user-img');
+
+    // this.followButtonUsername = document.getElementById('follow-button-username');
+
+    // updateUserProfileDom() {
+    //     this.$username.textContent = this.model.username;
+    //     if(this.followButtonUsername) {
+    //         this.followButtonUsername.textContent = this.model.username;
+    //     }
+    //     this.$bio.textContent = this.model.bio;
+    //     this.userImg.setAttribute('src', this.model.image);
+    // }
+
+    render() {
+        return `
+
+<div class="user-info">
+    <div class="container">
+      <div class="row">
+    
+        <div class="col-xs-12 col-md-10 offset-md-1">
+          <img id="user-img" src="${this.model.image}" class="user-img" />
+          <h4 id="username">${this.username}</h4>
+          <p id="bio">
+            ${this.model.bio ? this.model.bio : ''}
+          </p>
+          ${!this.auth ?
+            `<button id="follow-button" class="btn btn-sm btn-outline-secondary action-btn">
+            <i class="ion-plus-round"></i>
+            &nbsp;
+            Follow ${this.username}
+          </button>` :
+            `<a class="btn btn-sm btn-outline-secondary action-btn" href="/#/settings"><i class="ion-gear-a"></i> Edit Profile Settings</a>`
+            }
+          
+          
+        </div>
+    
+      </div>
+    </div>
+</div>
+
+
+`;
+    }
+}

app/core/core.js

@@ -12,6 +12,9 @@ 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";
+import {UserInfoComponent} from "../components/user-info.comp";
+import {ArticlePreviewBannerComponent} from "../components/article-preview-banner";
+import {CommentCreateComponent} from "../components/comment-create.comp";
 
 export class Core {
     constructor() {
@@ -81,5 +84,17 @@ const components = [
     {
         tagName: 'popular-tags',
         component: PopularTagsComponent
+    },
+    {
+        tagName: 'user-info',
+        component: UserInfoComponent
+    },
+    {
+        tagName: 'article-preview-banner',
+        component: ArticlePreviewBannerComponent
+    },
+    {
+        tagName: 'comment-create',
+        component: CommentCreateComponent
     }
 ];

app/http/http.js

@@ -24,7 +24,10 @@ export class Http {
         };
 
         if (authentication === true) {
-            headers['Authorization'] = 'Token ' + Authentication.instance.auth.token;
+            const auth = Authentication.instance.auth;
+            if(auth) {
+                headers['Authorization'] = 'Token ' + auth.token;
+            }
         }
         return fetch(config.rest_url + path, {
             headers: headers
@@ -42,6 +45,12 @@ export class Http {
             var token = null;
             if (auth) {
                 token = auth.token;
+            } else {
+                //stop immediately
+                RouterHandler.instance.router.navigate('#/login');
+                return new Promise((resolve, rej) => {
+                    rej();
+                });
             }
             headers['Authorization'] = 'Token ' + token;
         }