src/app/modules/pro/channel/channel.component.ts

@@ -8,10 +8,10 @@ import {
   OnDestroy,
   OnInit
 } from '@angular/core';
-import { ActivatedRoute, Router, NavigationEnd, NavigationStart } from "@angular/router";
+import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
-import { MindsUser, Tag } from "../../../interfaces/entities";
+import { MindsUser } from "../../../interfaces/entities";
 import { Client } from "../../../services/api/client";
 import { MindsTitle } from '../../../services/ux/title';
 import { ProChannelService } from './channel.service';
@@ -39,6 +39,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
   params$: Subscription;
 
+  childParams$: Subscription;
+
   searchedText: string;
 
   routerSubscription: Subscription;
@@ -83,13 +85,6 @@ export class ProChannelComponent implements OnInit, OnDestroy {
           }
 
           this.currentURL = navigationEvent.urlAfterRedirects;
-          const segments = this.currentURL.split('/');
-          let lastSegment = segments[segments.length - 1];
-          let paramIndex = lastSegment.indexOf(';');
-
-          const type = paramIndex !== -1 ? lastSegment.substring(0, paramIndex) : lastSegment;
-
-          this.shouldShowCategories(type);
           this.setTitle();
         }
       } catch (e) {
@@ -102,14 +97,14 @@ export class ProChannelComponent implements OnInit, OnDestroy {
         this.username = params['username'];
       }
 
-      if (this.route.children.length > 0) {
-        this.shouldShowCategories(this.route.children[0].snapshot.params.type);
-      }
-
       if (this.username && (!this.channel || this.channel.username != this.username)) {
         this.load();
       }
     });
+
+    this.childParams$ = this.channelService.childParamsChange.subscribe((params) => {
+      this.shouldShowCategories(params.type);
+    });
   }
 
   setTitle() {
@@ -131,6 +126,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     this.params$.unsubscribe();
+    this.childParams$.unsubscribe();
     this.routerSubscription.unsubscribe();
   }
 
@@ -164,7 +160,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
     }
 
     this.channel.subscribed = true;
-    
+
     this.client.post('api/v1/subscribe/' + this.channel.guid, {})
       .then((response: any) => {
         if (response && response.error) {
@@ -244,15 +240,7 @@ export class ProChannelComponent implements OnInit, OnDestroy {
   }
 
   search() {
-    if (!this.currentURL) {
-      this.currentURL = `/pro/${this.channel.username}/articles`; //TODO ADD /TOP when algorithm is enabled
-    } else {
-      if (this.currentURL.includes('query')) {
-        this.currentURL = this.currentURL.split(';')[0];
-      }
-    }
-
-    this.router.navigate([this.currentURL, { query: this.searchedText, period: '24h' }]);
+    this.router.navigate([this.getCurrentURL(), { query: this.searchedText, period: '24h' }]);
   }
 
   clearSearch() {
@@ -266,12 +254,42 @@ export class ProChannelComponent implements OnInit, OnDestroy {
   }
 
   selectTag(clickedTag: any) {
-    this.channelService.setSelectedHashtag(clickedTag);
-
     for (let tag of this.channel.pro_settings.tag_list) {
       tag.selected = tag.tag == clickedTag.tag;
     }
 
+    const params = {
+      ...this.getCurrentURLParams()
+    };
+
+    params['hashtag'] = clickedTag.tag;
+
+    this.router.navigate([this.getCurrentURL(), params]);
+
     this.detectChanges();
   }
+
+  getCurrentURL() {
+    let currentURL = this.currentURL;
+    if (!currentURL) {
+      currentURL = `/pro/${this.channel.username}/articles`; //TODO ADD /TOP when algorithm is enabled
+    } else if (currentURL.includes(';')) {
+      currentURL = this.currentURL.split(';')[0];
+    }
+
+    return currentURL;
+  }
+
+  getCurrentURLParams() {
+    const params = {};
+    if (this.currentURL) {
+      const paramsArray = this.currentURL.split(';');
+      for (let i: number = 1; i < paramsArray.length; ++i) {
+        const p = paramsArray[i];
+        let pp = p.split('=');
+        params[pp[0]] = pp[1];
+      }
+    }
+    return params;
+  }
 }

src/app/modules/pro/channel/channel.service.ts

 import { EventEmitter, Injectable } from '@angular/core';
 import { MindsChannelResponse } from '../../../interfaces/responses';
-import { MindsUser, Tag } from '../../../interfaces/entities';
+import { MindsUser } from '../../../interfaces/entities';
 import { Client } from '../../../services/api/client';
 import { EntitiesService } from '../../../common/services/entities.service';
 import normalizeUrn from '../../../helpers/normalize-urn';
@@ -10,16 +10,18 @@ export class ProChannelService {
 
   currentChannel: MindsUser;
 
-  selectedHashtag: Tag;
+  childParams: any;
+
+  childParamsChange: EventEmitter<any> = new EventEmitter<any>();
 
-  selectedHashtagChange: EventEmitter<Tag> = new EventEmitter<Tag>();
 
   protected featuredContent: Array<any> | null;
 
   constructor(
     protected client: Client,
     protected entitiesService: EntitiesService,
-  ) { }
+  ) {
+  }
 
   async load(id: string) {
     try {
@@ -28,6 +30,7 @@ export class ProChannelService {
       const response: MindsChannelResponse = await this.client.get(`api/v1/channel/${id}`) as MindsChannelResponse;
 
       this.currentChannel = response.channel;
+      this.currentChannel.pro_settings.tag_list.unshift({ tag: 'all', label: 'All', selected: false });
       this.featuredContent = null;
 
       return this.currentChannel;
@@ -66,14 +69,15 @@ export class ProChannelService {
     return this.featuredContent;
   }
 
-  setSelectedHashtag(value: Tag) {
-    this.selectedHashtag = value;
-    this.selectedHashtagChange.emit(this.selectedHashtag);
+  setChildParams(params: any) {
+    this.childParams = params;
+    this.childParamsChange.emit(this.childParams);
   }
+
   linkTo(to, query, algorithm?) {
     let route = ['/pro', this.currentChannel.username, to];
 
-    if(algorithm) {
+    if (algorithm) {
       route.push(algorithm);
     }
 

src/app/modules/pro/channel/donate/donate.component.ts

@@ -15,6 +15,7 @@ export class ProChannelDonateComponent {
   constructor(
     public channelService: ProChannelService
   ) {
+    this.channelService.setChildParams({});
   }
 
   onWireCompleted() {

src/app/modules/pro/channel/list-modal/list-modal.component.ts

@@ -4,7 +4,6 @@ import { FeedsService } from '../../../../common/services/feeds.service';
 import { ProContentModalComponent } from '../content-modal/modal.component';
 import { OverlayModalService } from '../../../../services/ux/overlay-modal';
 import { OverlayModalComponent } from '../../../../common/components/overlay-modal/overlay-modal.component';
-import { Tag } from "../../../../interfaces/entities";
 
 @Component({
   selector: 'm-pro--channel-list-modal',
@@ -20,7 +19,7 @@ export class ProChannelListModal {
 
   query: string;
 
-  hashtag: Tag;
+  hashtag: string;
 
   parent: HTMLDivElement;
 
@@ -62,8 +61,8 @@ export class ProChannelListModal {
       params.push(`query=${this.query}`);
     }
 
-    if (this.hashtag) {
-      params.push(`hashtags=${this.hashtag.tag}`);
+    if (this.hashtag && this.hashtag !== 'all') {
+      params.push(`hashtags=${this.hashtag}`);
     }
 
     if (params.length > 0) {

src/app/modules/pro/channel/list/list.component.ts

@@ -31,7 +31,7 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
   displaySeeMoreTile: boolean = false;
 
-  selectedHashtag: Tag;
+  selectedHashtag: string;
 
   selectedHashtag$: Subscription;
 
@@ -48,12 +48,6 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.listen();
-
-    this.selectedHashtag$ = this.channelService.selectedHashtagChange.subscribe((tag) => {
-      this.selectedHashtag = tag;
-
-      this.load(true);
-    })
   }
 
   private listen() {
@@ -84,6 +78,9 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
       this.algorithm = params['algorithm'] || 'top';
       this.query = params['query'] || '';
       this.period = params['period'] || '';
+      this.selectedHashtag = params['hashtag'];
+
+      this.channelService.setChildParams(params);
       this.load(true);
     });
 
@@ -116,6 +113,7 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
   async load(refresh: boolean = false) {
     if (refresh) {
+      this.entities = [];
       this.feedsService.clear();
     }
 
@@ -125,8 +123,8 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
     let params = [];
 
-    if (this.selectedHashtag) {
-      params.push(`hashtags=${this.selectedHashtag.tag}`);
+    if (this.selectedHashtag && this.selectedHashtag !== 'all') {
+      params.push(`hashtags=${this.selectedHashtag}`);
     }
 
     if (this.query && (this.query !== '')) {

src/app/modules/pro/channel/signup/signup.component.ts

@@ -48,6 +48,8 @@ export class ProChannelSignupComponent {
       if (this.session.isLoggedIn()) {
         this.router.navigate(['/pro', this.username]);
       }
+
+      this.service.setChildParams(params);
     });
   }