From 53f5827828b52625f2b32df36bda5815c13bd8ac Mon Sep 17 00:00:00 2001
From: Silvan Struebi <silvan.struebi@gmail.com>
Date: Sat, 6 Mar 2021 10:32:55 +0100
Subject: [PATCH] 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              |  2 +-
 src/es/components/molecules/TagList.js             |  2 +-
 src/es/components/organisms/ListArticlePreviews.js | 10 +++++++++-
 src/es/components/pages/Article.js                 |  4 ++--
 src/es/components/pages/Profile.js                 |  4 ++--
 test/es/Test.js                                    |  2 +-
 6 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/es/components/controllers/User.js b/src/es/components/controllers/User.js
index 4a17be03a7..4df8d3a81f 100644
--- a/src/es/components/controllers/User.js
+++ b/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'))
         },
diff --git a/src/es/components/molecules/TagList.js b/src/es/components/molecules/TagList.js
index 10fe101fa8..4bdaf6fb60 100755
--- a/src/es/components/molecules/TagList.js
+++ b/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>')))
   }
 }
diff --git a/src/es/components/organisms/ListArticlePreviews.js b/src/es/components/organisms/ListArticlePreviews.js
index ade32a0177..16e54dc0bd 100755
--- a/src/es/components/organisms/ListArticlePreviews.js
+++ b/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' })
+  }
 }
diff --git a/src/es/components/pages/Article.js b/src/es/components/pages/Article.js
index 8f3c2d20fb..1cc99efce3 100755
--- a/src/es/components/pages/Article.js
+++ b/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>')))
     }
   }
 
diff --git a/src/es/components/pages/Profile.js b/src/es/components/pages/Profile.js
index 41f2fa5586..3f607a6ab2 100644
--- a/src/es/components/pages/Profile.js
+++ b/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>
 
diff --git a/test/es/Test.js b/test/es/Test.js
index 2bdf13f9be..10b5694b6c 100644
--- a/test/es/Test.js
+++ b/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>