implement returning back to global feed

gothinkster · May 17, 2017 · d07b8ff · d07b8ff
1 parent ef1c2c8
commit d07b8ff
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 27 deletions.
diff --git a/client/index.html b/client/index.html
@@ -5,16 +5,16 @@
     <title>Conduit</title>
     <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
     <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
-    <link href="http://fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
+    <link href="http://fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"
+          rel="stylesheet" type="text/css">
     <!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
     <link rel="stylesheet" href="http://demo.productionready.io/main.css">
 </head>
 <body>
-<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>
diff --git a/client/pages/home.comp.html b/client/pages/home.comp.html
@@ -9,7 +9,7 @@
                         <!--<a class="nav-link disabled" href="">Your Feed</a>-->
                         <!--</li>-->
                         <li class="nav-item">
-                            <a class="nav-link active" href="">Global Feed</a>
+                            <a id="globalFeedButton" style="cursor: pointer;" class="nav-link active">Global Feed</a>
                         </li>
                     </ul>
                 </div>

diff --git 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';