(fix): moved algorithm to a queryParam

(fix): removed title
(fix): keyup.enter listener for search input

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

@@ -17,20 +17,63 @@
  autocomplete="off"
  class="mdl-textfield__input ng-pristine ng-valid ng-touched"
  type="text"
- (keyup)="search()"
+ (keyup.enter)="search()"
  >
  <label class="mdl-textfield__label" for="search"></label>
  </div>
  </div>
 
  <ng-container *ngIf="!collapseNavItems">
- <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'feed', 'top']" routerLinkActive="active" i18n>Feed</a>
- <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'videos', 'top']" routerLinkActive="active" i18n>Videos</a>
- <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'images', 'top']" routerLinkActive="active" i18n>Images</a>
- <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'articles', 'top']" routerLinkActive="active" i18n>Articles</a>
- <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'groups', 'top']" routerLinkActive="active" i18n>Groups</a>
- <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
- <a class="m-proChannelTopbar__navItem" [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active" *ngIf="!currentUser">Signup / Login</a>
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="['/pro', channel.username, 'feed']"
+ [queryParams]="{algorithm: 'pro'}"
+ routerLinkActive="active"
+ i18n
+ >Feed</a>
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="['/pro', channel.username, 'videos']"
+ [queryParams]="{algorithm: 'pro'}"
+ routerLinkActive="active"
+ i18n
+ >Videos</a>
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="['/pro', channel.username, 'images']"
+ [queryParams]="{algorithm: 'pro'}"
+ routerLinkActive="active"
+ i18n
+ >Images</a>
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="['/pro', channel.username, 'articles']"
+ [queryParams]="{algorithm: 'pro'}"
+ routerLinkActive="active"
+ i18n
+ >Articles</a>
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="['/pro', channel.username, 'groups']"
+ [queryParams]="{algorithm: 'pro'}"
+ routerLinkActive="active"
+ i18n
+ >Groups</a>
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="['/pro', channel.username, 'donate']"
+ [queryParams]="{algorithm: 'pro'}"
+ routerLinkActive="active"
+ i18n
+ >Donate</a>
+ <a
+ class="m-proChannelTopbar__navItem"
+ [routerLink]="['/pro', channel.username, 'signup']"
+ [queryParams]="{algorithm: 'pro'}"
+ routerLinkActive="active"
+ *ngIf="!currentUser"
+ i18n
+ >Signup / Login</a>
  </ng-container>
 
  <ng-container *ngIf="currentUser">

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

-<h1 [ngSwitch]="type">
- <ng-template ngSwitchCase="videos" i18n>Videos</ng-template>
- <ng-template ngSwitchCase="images" i18n>Images</ng-template>
- <ng-template ngSwitchCase="blogs" i18n>Articles</ng-template>
- <ng-template ngSwitchCase="groups" i18n>Groups</ng-template>
- <ng-template ngSwitchCase="activities" i18n>Feed</ng-template>
- <ng-template ngSwitchDefault>{{ type | titlecase }}</ng-template>
-</h1>
-
 <div class="m-proChannelList__algorithm">
  <a [routerLink]="['/pro', channelUsername, getTypeForRoute(type), 'hot']" routerLinkActive="active" i18n>
  <i class="material-icons">whatshot</i>

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

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router  } from "@angular/router";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from "@angular/router";
 import { Subscription } from "rxjs";
 import { FeedsService } from "../../../../common/services/feeds.service";
 import { ProChannelService } from '../channel.service';
@@ -10,11 +10,12 @@ import { first } from "rxjs/operators";
  templateUrl: 'list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ProChannelListComponent implements OnInit {
+export class ProChannelListComponent implements OnInit, OnDestroy {
 
  type: string;
 
  params$: Subscription;
+ queryParams$: Subscription;
 
  entities: any[] = [];
 
@@ -56,10 +57,12 @@ export class ProChannelListComponent implements OnInit {
  throw new Error('Unknown type');
  }
 
- this.algorithm = params['algorithm'] || 'top';
 
  this.load(true);
  });
+ this.queryParams$ = this.route.queryParams.subscribe(queryParams => {
+ this.algorithm = queryParams['algorithm'] || 'top';
+ });
 
  this.feedsService.feed.subscribe(async entities => {
  if (!entities.length)
@@ -74,6 +77,15 @@ export class ProChannelListComponent implements OnInit {
  });
  }
 
+ ngOnDestroy() {
+ if (this.params$) {
+ this.params$.unsubscribe();
+ }
+ if (this.queryParams$) {
+ this.queryParams$.unsubscribe();
+ }
+ }
+
  async load(refresh: boolean = false) {
  if (refresh) {
  this.feedsService.clear();
@@ -113,7 +125,7 @@ export class ProChannelListComponent implements OnInit {
  * Returns the feed type on par to routes
  * @param type feed type
  */
- getTypeForRoute(type: string): string{
+ getTypeForRoute(type: string): string {
  let routeType = '';
  switch (type) {
  case 'videos':

src/app/modules/pro/pro.module.ts

@@ -48,7 +48,7 @@ const routes: Routes = [
  component: ProChannelSignupComponent
  },
  {
- path: ':type/:algorithm',
+ path: ':type',
  component: ProChannelListComponent,
  },
  ]