diff --git a/client/index.html b/client/index.html index 946f330..746bf47 100644 --- a/client/index.html +++ b/client/index.html @@ -5,16 +5,16 @@ Conduit - + - - -
- -
- + +
+ +
+ \ No newline at end of file diff --git a/client/pages/home.comp.html b/client/pages/home.comp.html index bfc2e09..6dbda6d 100644 --- a/client/pages/home.comp.html +++ b/client/pages/home.comp.html @@ -9,7 +9,7 @@
  • - Global Feed + Global Feed
    • diff --git a/client/pages/home.comp.js b/client/pages/home.comp.js index eda8756..7ee9c73 100644 --- a/client/pages/home.comp.js +++ b/client/pages/home.comp.js @@ -24,16 +24,27 @@ export class HomeComponent extends HTMLElement { this.appendChild(el()); const globalFeed = document.getElementById('globalFeed'); + this.fetchAndGenerateGlobalFeed(globalFeed); - fetch('https://conduit.productionready.io/api/articles').then(function (response) { - return response.json(); - }).then(r => { - r.articles.forEach(article => { - this.generateArticle(article, globalFeed); - }); + this.popularTags(); + + const globalFeedButton = this.querySelector('#globalFeedButton'); + globalFeedButton.addEventListener('click', () => { + this.removeCurrentTagFilter(); + globalFeedButton.classList.add('active'); + this.cleanGlobalFeed(); + this.fetchAndGenerateGlobalFeed(globalFeed); }); + }); + } - this.popularTags(); + fetchAndGenerateGlobalFeed(globalFeed) { + fetch('https://conduit.productionready.io/api/articles').then(function (response) { + return response.json(); + }).then(r => { + r.articles.forEach(article => { + this.generateArticle(article, globalFeed); + }); }); } @@ -57,11 +68,7 @@ export class HomeComponent extends HTMLElement { r.tags.forEach(tag => { const tagEl = this.createNewTagElement(tag); tagEl.addEventListener('click', () => { - - const getCurrentTagFilter = document.getElementById('tagFilter'); - if(getCurrentTagFilter) { - getCurrentTagFilter.parentNode.removeChild(getCurrentTagFilter); - } + this.removeCurrentTagFilter(); navItems.forEach(navItem => { const navLink = navItem.querySelector('a'); @@ -71,11 +78,7 @@ export class HomeComponent extends HTMLElement { const newNavItem = this.creanteNewNavItem(tag); feedOptions.appendChild(newNavItem); - - const globalFeed = document.getElementById('globalFeed'); - while (globalFeed.firstChild) { - globalFeed.removeChild(globalFeed.firstChild); - } + this.cleanGlobalFeed(); fetch('https://conduit.productionready.io/api/articles?limit=10&offset=0&tag=' + tag).then(function (response) { return response.json(); @@ -84,14 +87,27 @@ export class HomeComponent extends HTMLElement { this.generateArticle(article, globalFeed); }); }); - // https://conduit.productionready.io/api/articles?limit=10&offset=0&tag=testing - }); tagList.appendChild(tagEl); }); }); } + cleanGlobalFeed() { + const globalFeed = document.getElementById('globalFeed'); + while (globalFeed.firstChild) { + globalFeed.removeChild(globalFeed.firstChild); + } + return globalFeed; + } + + removeCurrentTagFilter() { + const getCurrentTagFilter = document.getElementById('tagFilter'); + if (getCurrentTagFilter) { + getCurrentTagFilter.parentNode.removeChild(getCurrentTagFilter); + } + } + creanteNewNavItem(tag) { const newNavItem = document.createElement('li'); newNavItem.className = 'nav-item';