refactor

.gitignore

@@ -16,4 +16,6 @@
 .DS_Store
 Thumbs.db
 build
-dist
+dist
+
+client/config.js

client/router/auth-defender.js → app/auth/auth-defender.js

@@ -1,4 +1,4 @@
-import {Authentication} from "../auth/authentication";
+import {Authentication} from "./authentication";
 export class AuthDefender {
     static canActivate() {
         return Authentication.instance.auth;

client/auth/authentication.js → app/auth/authentication.js

@@ -6,21 +6,11 @@ export class Authentication {
             throw new Error('use instance');
         }
 
-        var unparsedAuth = localStorage.getItem('auth');
-        if (unparsedAuth) {
-            this._auth = JSON.parse(unparsedAuth);
-        }
         this._callbacks = [];
         return Authentication.inst;
     }
 
     get auth() {
-        if (this._auth) {
-            var unparsedAuth = localStorage.getItem('auth');
-            if (unparsedAuth) {
-                this._auth = JSON.parse(unparsedAuth);
-            }
-        }
         return JSON.parse(localStorage.getItem('auth'));
     }
 

client/components/article.comp.js → app/components/article.comp.js

@@ -1,4 +1,5 @@
 import {RouterHandler} from "../router/router-handler";
+import {Authentication} from "../auth/authentication";
 "use strict";
 
 export class ArticleComponent extends HTMLElement {
@@ -10,8 +11,6 @@ export class ArticleComponent extends HTMLElement {
             heart: 0
         };
         this.updateHearts = this.updateHearts.bind(this);
-
-        this.$tagList = null;
     }
 
     static get observedAttributes() {
@@ -29,7 +28,6 @@ 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);
 
@@ -47,10 +45,59 @@ export class ArticleComponent extends HTMLElement {
     }
 
 
-    updateHearts() {
-        var span = this.querySelector('#ion-heart > span');
-        this.model.favoritesCount = this.model.favoritesCount + 1;
-        span.innerHTML = this.model.favoritesCount;
+    updateHearts(e) {
+        e.preventDefault();
+        var auth = Authentication.instance.auth;
+        if (!auth) {
+            RouterHandler.getInstance.router.navigate('#/login');
+        }
+        let headers = {
+            'Accept': 'application/json, text/plain, */*',
+            'Content-Type': 'application/json',
+            'Authorization': 'Token ' + auth.token
+        };
+        console.log(this.model);
+        if (this.model.favorited) {
+            this.unfavoritArticle(headers);
+        } else {
+            this.favoriteArticle(headers);
+        }
+        // POST /api/articles/:slug/favorite
+
+        // DELETE /api/articles/:slug/favorite
+    }
+
+
+    favoriteArticle(headers) {
+        fetch('https://conduit.productionready.io/api/articles/' + this.model.slug + '/favorite', {
+            headers: headers,
+            method: 'POST'
+        }).then(function (response) {
+            return response.json();
+        }).then(r => {
+            console.log(r);
+            this.model.favorited = r.article.favorited;
+            var span = this.querySelector('#ion-heart > span');
+            span.parentNode.classList.add('active');
+            this.model.favoritesCount = this.model.favoritesCount + 1;
+            span.innerHTML = this.model.favoritesCount;
+        });
+    }
+
+    unfavoritArticle(headers) {
+        fetch('https://conduit.productionready.io/api/articles/' + this.model.slug + '/favorite', {
+            headers: headers,
+            method: 'DELETE'
+        }).then(function (response) {
+            return response.json();
+        }).then(r => {
+            console.log(r);
+            this.model.favorited = r.article.favorited;
+            var span = this.querySelector('#ion-heart > span');
+            this.model.favoritesCount = this.model.favoritesCount - 1;
+            span.parentNode.classList.remove('active');
+            span.innerHTML = this.model.favoritesCount;
+        });
     }
 
 
@@ -65,7 +112,7 @@ export class ArticleComponent extends HTMLElement {
                         <a id="author" href="/profile/${this.model.author.username}" class="author">${this.model.author.username}</a>
                         <span class="date">${this.model.createdAt}</span>
                     </div>
-                    <button id="ion-heart" class="btn btn-outline-primary btn-sm pull-xs-right">
+                    <button id="ion-heart" class="btn btn-outline-primary btn-sm pull-xs-right ${this.model.favorited ? 'active' : ''}">
                         <i class="ion-heart"></i> <span>${this.model.favoritesCount}</span>
                     </button>
                 </div>
@@ -80,7 +127,7 @@ export class ArticleComponent extends HTMLElement {
                             ${tag}
                             </li>
                             `;
-                        }).join(' ')}
+                         }).join(' ')}
                     </ul>
                 </a>
             </div>

client/components/layout/c-nav.comp.js → app/components/layout/c-nav.comp.js

@@ -83,7 +83,6 @@ export class CNavComponent extends HTMLElement {
 
     setCurrentActive() {
         let curUrl = location.hash;
-        console.log(curUrl);
         this.updateActive(curUrl);
     }
 

app/config.js

@@ -0,0 +1,3 @@
+export const config = {
+    rest_url: 'https://conduit.productionready.io/api/'
+};

app/config.js.example

@@ -0,0 +1,3 @@
+export const config = {
+    rest_url: 'https://conduit.productionready.io/api/'
+};

app/core/core.js

@@ -0,0 +1,85 @@
+import {layoutComponents} from "../components/layout/index";
+import {ArticleComponent} from "../components/article.comp";
+import {HomeComponent} from "../pages/home.comp";
+import {CLoginComponent} from "../pages/login.comp";
+import {CRegisterComponent} from "../pages/register.comp";
+import {RouterOutlet} from "../router/router-outlet";
+import {ComponentRegistry} from "./component-registry";
+import {ProfileComponent} from "../pages/profile.comp";
+import {ArticlePreviewComponent} from "../pages/article-preview.comp";
+import {CommentPreviewComponent} from "../components/comment-preview.comp";
+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";
+
+export class Core {
+    constructor() {
+        if (!Core.inst) {
+            Core.inst = this;
+        } else {
+            throw new Error('use instance');
+        }
+
+        ComponentRegistry.register(components);
+
+        return Core.inst;
+    }
+
+    static get instance() {
+        return Core.inst;
+    }
+}
+Core.inst = null;
+
+const components = [
+    ...layoutComponents,
+    {
+        tagName: 'c-article',
+        component: ArticleComponent
+    },
+    {
+        tagName: 'router-outlet',
+        component: RouterOutlet
+    },
+    {
+        tagName: 'c-home',
+        component: HomeComponent
+    },
+    {
+        tagName: 'c-login',
+        component: CLoginComponent
+    },
+    {
+        tagName: 'c-register',
+        component: CRegisterComponent
+    },
+    {
+        tagName: 'c-profile',
+        component: ProfileComponent
+    },
+    {
+        tagName: 'article-preview',
+        component: ArticlePreviewComponent
+    },
+    {
+        tagName: 'comment-preview',
+        component: CommentPreviewComponent
+    },
+    {
+        tagName: 'comments-container',
+        component: CommentsContainerComponent
+    },
+    {
+        tagName: 'c-editor',
+        component: EditorComponent
+    },
+    {
+        tagName: 'c-settings',
+        component: SettingsComponent
+    },
+    {
+        tagName: 'popular-tags',
+        component: PopularTagsComponent
+    }
+];

app/http/http.js

@@ -0,0 +1,33 @@
+import {Authentication} from "../auth/authentication";
+import {config} from '../config';
+
+export class Http {
+    constructor() {
+        if (!Http.inst) {
+            Http.inst = this;
+        } else {
+            throw new Error('use instance');
+        }
+
+        return Http.inst;
+    }
+
+    static get instance() {
+        return Http.inst;
+    }
+
+    doGet(path, authentication) {
+        const headers = {
+            'Accept': 'application/json, text/plain, */*',
+            'Content-Type': 'application/json',
+        };
+
+        if(authentication === true) {
+            headers['Authorization'] = 'Token ' + Authentication.instance.auth.token;
+        }
+        return fetch(config.rest_url + path, {
+            headers: headers
+        });
+    }
+}
+Http.inst = null;

client/index.html → app/index.html

@@ -11,10 +11,10 @@
     <link rel="stylesheet" href="//demo.productionready.io/main.css">
 </head>
 <body>
-    <c-nav></c-nav>
-    <div class="home-page">
-        <router-outlet></router-outlet>
-    </div>
-    <c-footer></c-footer>
+<c-nav></c-nav>
+<div class="home-page">
+    <router-outlet></router-outlet>
+</div>
+<c-footer></c-footer>
 </body>
-</html>
+</html>

app/index.js

@@ -0,0 +1,19 @@
+import {RouterHandler} from "./router/router-handler";
+import {Authentication} from "./auth/authentication";
+import {Core} from "./core/core";
+import {Http} from "./http/http";
+
+/**
+ * Order is important !
+ */
+class App {
+    constructor() {
+        new Authentication();
+        const router = new RouterHandler();
+        new Core();
+        new Http();
+        router.init();
+    }
+}
+
+new App();

client/pages/article-preview.comp.js → app/pages/article-preview.comp.js

@@ -41,7 +41,7 @@ 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();
@@ -51,13 +51,6 @@ export class ArticlePreviewComponent extends HTMLElement {
         });
     }
 
-    generateCommentComponents(comment) {
-        // let newComment = new CommentPreviewComponent();
-        // comment.author.username, comment.body
-        // newComment.setAttribute('username', comment.author.username);
-        // this.$commentsWrapper.appendChild(newComment);
-    }
-
     updateArticleContent() {
         this.$articleTitle.textContent = this.article.title;
         this.$profileUsername.textContent = this.article.author.username;

client/pages/home.comp.js → app/pages/home.comp.js

@@ -1,7 +1,8 @@
+"use strict";
 import {ArticleComponent} from "../components/article.comp";
 import {Authentication} from "../auth/authentication";
 import {RouterHandler} from "../router/router-handler";
-"use strict";
+import {Http} from "../http/http";
 
 
 export class HomeComponent extends HTMLElement {
@@ -12,7 +13,6 @@ export class HomeComponent extends HTMLElement {
             this.auth = Authentication.instance.auth;
         }
 
-        this.$yourFeed = null;
         this.yourFeedHandleEvent = this.yourFeedHandleEvent.bind(this);
         this.globalFeedEventHandle = this.globalFeedEventHandle.bind(this);
         RouterHandler.getInstance.router.navigate('#/');
@@ -40,11 +40,7 @@ export class HomeComponent extends HTMLElement {
             console.log('NOT AUTHORIZED');
         } else {
             this.$yourFeedButton.addEventListener('click', this.yourFeedHandleEvent);
-            this.fetchArticles('/feed', {
-                'Accept': 'application/json, text/plain, */*',
-                'Content-Type': 'application/json',
-                'Authorization': 'Token ' + this.auth.token
-            });
+            this.fetchArticles('/feed', true);
             console.log('AUTHORIZED');
         }
 
@@ -69,11 +65,7 @@ export class HomeComponent extends HTMLElement {
         this.removeCurrentTagFilter();
         this.$yourFeedButton.classList.add('active');
         this.$globalFeedButton.classList.remove('active');
-        this.fetchArticles('/feed', {
-            'Accept': 'application/json, text/plain, */*',
-            'Content-Type': 'application/json',
-            'Authorization': 'Token ' + this.auth.token
-        });
+        this.fetchArticles('/feed', true);
     }
 
     generateArticle(article) {
@@ -116,12 +108,11 @@ export class HomeComponent extends HTMLElement {
 
 
 
-    fetchArticles(params, headers) {
+    fetchArticles(params, auth) {
         this.cleanGlobalFeed();
         this.$globalFeed.innerHTML = '<div class="article-preview">Loading articles </div>';
-        fetch('https://conduit.productionready.io/api/articles' + params, {
-            headers: headers
-        }).then(function (response) {
+
+        Http.instance.doGet('/articles' + params, auth).then(function (response) {
             return response.json();
         }).then(r => {
             this.$globalFeed.textContent = '';