no error on aborted but loading message

author space in username bug fixed with ""
pagination click scroll to top

src/es/components/controllers/User.js

@@ -194,7 +194,7 @@ export default class User extends HTMLElement {
               return data.user
             })
             .catch(error => {
-              if (!error.toString().includes('abort')) Environment.token = ''
+              if (error && typeof error.toString === 'function' && !error.toString().includes('aborted')) Environment.token = ''
               console.log(`Error@UserFetch: ${error}`)
             }) : Promise.reject(new Error('No token found'))
         },

src/es/components/molecules/TagList.js

@@ -69,6 +69,6 @@ export default class TagList extends HTMLElement {
       if (!tag || !tag.tags || !tag.tags.length) tag = { tags: ['No tags are here... yet.'] }
       this.innerHTML = `<div class="tag-list">${tag.tags.map(tag => `<a href="#/" class="tag-pill tag-default">${tag}</a>`).join('')}</div>`
     // @ts-ignore
-    }).catch(error => (this.innerHTML = console.warn(error) || '<div class="tag-list">An error occurred fetching the tags!</div>'))
+    }).catch(error => (this.innerHTML = console.warn(error) || (error && typeof error.toString === 'function' && error.toString().includes('aborted') ? '<div class="tag-list">Loading...</div>' : '<div class="tag-list">An error occurred fetching the tags!</div>')))
   }
 }

src/es/components/organisms/ListArticlePreviews.js

@@ -61,9 +61,10 @@ export default class ListArticlePreviews extends HTMLElement {
           const articlePreview = new children[0][1](article)
           this.appendChild(articlePreview)
         })
+        if (!this.getAttribute('no-scroll')) this.scrollToEl(this)
       }
     // @ts-ignore
-    }).catch(error => (this.innerHTML = console.warn(error) || '<div class="article-preview">An error occurred fetching the articles!</div>'))
+    }).catch(error => (this.innerHTML = console.warn(error) || (error && typeof error.toString === 'function' && error.toString().includes('aborted') ? '<div class="article-preview">Loading...</div>' : '<div class="article-preview">An error occurred fetching the articles!</div>')))
   }
 
   /**
@@ -86,4 +87,11 @@ export default class ListArticlePreviews extends HTMLElement {
       return elements
     }))
   }
+
+  // inspired from: https://github.com/Weedshaker/PeerWebSite/blob/master/JavaScript/js/Player/Player.js
+  scrollToEl (el) {
+    const rect = el.getBoundingClientRect()
+    // check if the element is outside the viewport, otherwise don't scroll
+    if (rect && rect.top < 0) el.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' })
+  }
 }

src/es/components/pages/Article.js

@@ -133,7 +133,7 @@ export default class Article extends HTMLElement {
 
                 ${user
                   ? `
-                    <c-comments><m-comments user-image=${user && (user.image || '')} user-name=${user && (user.username || '')}></m-comments></c-comments>
+                    <c-comments><m-comments user-image="${user && (user.image || '')}" user-name="${user && (user.username || '')}"></m-comments></c-comments>
                   `
                   : '<div class="col-xs-12 col-md-8 offset-md-2"><div><a href="#/login">Sign in</a> or <a href="#/register">sign up</a> to add comments on this article. </div></div>'}
                 </div>
@@ -148,7 +148,7 @@ export default class Article extends HTMLElement {
           node.replaceWith(articleMeta)
         })
         // @ts-ignore
-      }).catch(error => (this.innerHTML = console.warn(error) || '<div class="article-page">An error occurred fetching the article!</div>'))
+      }).catch(error => (this.innerHTML = console.warn(error) || (error && typeof error.toString === 'function' && error.toString().includes('aborted') ? '<div class="article-page">Loading...</div>' : '<div class="article-page">An error occurred fetching the article!</div>')))
     }
   }
 

src/es/components/pages/Profile.js

@@ -134,12 +134,12 @@ export default class Article extends HTMLElement {
           <div class="col-xs-12 col-md-10 offset-md-1">
 
             <div class="articles-toggle">
-              <m-article-feed-toggle favorited=${profile.username} author=${profile.username} itsMe=${user.username === profile.username ? 'true' : ''}></m-article-feed-toggle>
+              <m-article-feed-toggle favorited="${profile.username}" author="${profile.username}" itsMe=${user && user.username === profile.username ? 'true' : ''}></m-article-feed-toggle>
             </div>
 
             <o-list-article-previews><div class="article-preview">Loading...</div></o-list-article-previews>
 
-            <m-pagination author=${profile.username}></m-pagination>
+            <m-pagination author="${profile.username}"></m-pagination>
 
           </div>
 

test/es/Test.js

@@ -26,7 +26,7 @@ export default class Test {
     const results = document.createElement('div')
     results.innerHTML = `
       <div>
-        <a name=${name}></a>
+        <a name="${name}"></a>
         <h2>Results: ${name}</h2>
         <div class=result></div>
       </div>