Merge branch 'master' of https://github.com/mits-gossau/event-driven-web-components-realworld-example-app

Author: tailormadecode

src/es/components/molecules/ArticleFeedToggle.js

@@ -149,7 +149,7 @@ export default class ArticleFeedToggle extends HTMLElement {
           ${active === 2 ? `
             <li class="nav-item">
               <a href="#/" class="nav-link active">
-                <i class="ion-pound"></i>${this.query.tag}
+                <i class="ion-pound"></i> ${this.query.tag}
               </a>
             </li>
           ` : ''}

src/es/components/molecules/Comments.js

@@ -16,7 +16,7 @@ export default class Comments extends HTMLElement {
     super()
 
     /**
-     * Listens to the event name/typeArg: 'comments'
+     * Listens to the event name/typeArg: 'comment'
      *
      * @param {CustomEvent & {detail: import("../controllers/Comments.js").CommentsEventDetail}} event
      */
@@ -26,7 +26,7 @@ export default class Comments extends HTMLElement {
     })
 
     /**
-     * Listens to the event name/typeArg: 'comment'
+     * Listens to the event name/typeArg: 'comments'
      * which is returned when adding a comment
      *
      * @param {CustomEvent & {detail: import("../controllers/Comments.js").CommentEventDetail}} event

src/es/components/organisms/Header.js

@@ -14,20 +14,20 @@ export default class Header extends HTMLElement {
   constructor () {
     super()
 
-    this.username = null
+    this.user = null
     /**
-     * Listens to the event name/typeArg: 'article'
+     * Listens to the event name/typeArg: 'user'
      *
      * @param {CustomEvent & {detail: import("../controllers/User.js").UserEventDetail}} event
      */
     this.userListener = event => {
       event.detail.fetch.then(user => {
-        if (this.shouldComponentRender(user.username)) this.render(user.username)
-        this.username = user.username
+        if (this.shouldComponentRender(user)) this.render(user)
+        this.user = user
       }).catch(error => {
         console.log(`Error@UserFetch: ${error}`)
         if (this.shouldComponentRender(null)) this.render(null)
-        this.username = null
+        this.user = null
       })
     }
   }
@@ -49,20 +49,20 @@ export default class Header extends HTMLElement {
   /**
    * evaluates if a render is necessary
    *
-   * @param {string} username
+   * @param {import("../../helpers/Interfaces.js").User} user
    * @return {boolean}
    */
-  shouldComponentRender (username) {
-    return this.username !== username
+  shouldComponentRender (user) {
+    return this.user !== user
   }
 
   /**
    * renders the header within the body, which is in this case the navbar
    *
-   * @param {string} [username = undefined]
+   * @param {import("../../helpers/Interfaces.js").User} [user = undefined]
    * @return {void}
    */
-  render (username) {
+  render (user) {
     this.innerHTML = /* html */ `
       <nav class="navbar navbar-light">
         <div class="container">
@@ -72,7 +72,7 @@ export default class Header extends HTMLElement {
               <!-- Add "active" class when you're on that page" -->
               <a class="nav-link active" href="#/">Home</a>
             </li>
-            ${username ? /* html */ `
+            ${user ? /* html */ `
               <li class="nav-item">
                 <a class="nav-link" href="#/editor">
                   <i class="ion-compose"></i>&nbsp;New Post
@@ -84,8 +84,9 @@ export default class Header extends HTMLElement {
                 </a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#/profile/${username}">
-                  ${username}
+                <a class="nav-link" href="#/profile/${user.username}">
+                  <img class="user-pic" src="${user.image}">
+                  ${user.username}
                 </a>
               </li>`
               : /* html */ `

src/es/components/pages/Article.js

@@ -35,7 +35,7 @@ export default class Article extends HTMLElement {
       event.detail.fetch.then(user => {
         if (this.shouldComponentRender(user)) this.render(undefined, user)
       }).catch(error => {
-        this.user = null
+        if (this.shouldComponentRender(null)) this.render(undefined, null)
         console.log(`Error@UserFetch: ${error}`)
       })
     }
@@ -65,6 +65,8 @@ export default class Article extends HTMLElement {
   disconnectedCallback () {
     document.body.removeEventListener('article', this.articleListener)
     document.body.removeEventListener('user', this.userListener)
+    // looks nicer when cleared
+    this.innerHTML = ''
   }
 
   /**

src/es/components/pages/Login.js

@@ -33,7 +33,7 @@ export default class Login extends HTMLElement {
     }
 
     /**
-     * Listens to the event name/typeArg: 'article'
+     * Listens to the event name/typeArg: 'user'
      *
      * @param {CustomEvent & {detail: import("../controllers/User.js").UserEventDetail}} event
      */

src/es/components/pages/Profile.js

@@ -71,6 +71,8 @@ export default class Article extends HTMLElement {
     document.body.removeEventListener('profile', this.profileListener)
     document.body.removeEventListener('user', this.userListener)
     if (this.btnFollow) this.btnFollow.removeEventListener('click', this.followBtnListener)
+    // looks nicer when cleared
+    this.innerHTML = ''
   }
 
   /**

src/es/components/pages/Register.js

@@ -36,7 +36,7 @@ export default class Register extends HTMLElement {
     }
 
     /**
-     * Listens to the event name/typeArg: 'article'
+     * Listens to the event name/typeArg: 'user'
      *
      * @param {CustomEvent & {detail: import("../controllers/User.js").UserEventDetail}} event
      */

src/es/helpers/Environment.js

@@ -86,7 +86,7 @@ class EnvironmentClass {
    */
   get slug () {
     const urlEnding = this.urlEnding
-    if (urlEnding && urlEnding[0].match(/.*-[a-z0-9]{6}$/)) return urlEnding[0]
+    if (urlEnding && urlEnding[0].match(/.*-[a-z0-9]{3,10}$/)) return urlEnding[0]
     return null
   }