(feat) Hot/Top/Latest selector for content

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

@@ -24,11 +24,11 @@
  </div>
 
  <ng-container *ngIf="!collapseNavItems">
- <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
- <a [routerLink]="['/pro', channel.username, 'videos']" routerLinkActive="active" i18n>Videos</a>
- <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
- <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
- <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
+ <a [routerLink]="['/pro', channel.username, 'feed', 'top']" routerLinkActive="active" i18n>Feed</a>
+ <a [routerLink]="['/pro', channel.username, 'videos', 'top']" routerLinkActive="active" i18n>Videos</a>
+ <a [routerLink]="['/pro', channel.username, 'images', 'top']" routerLinkActive="active" i18n>Images</a>
+ <a [routerLink]="['/pro', channel.username, 'articles', 'top']" routerLinkActive="active" i18n>Articles</a>
+ <a [routerLink]="['/pro', channel.username, 'groups', 'top']" routerLinkActive="active" i18n>Groups</a>
  <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
  <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active" *ngIf="!currentUser">Signup / Login</a>
  </ng-container>

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

@@ -7,6 +7,23 @@
  <ng-template ngSwitchDefault>{{ type | titlecase }}</ng-template>
 </h1>
 
+<div class="m-proChannelList__algorithm">
+ <a [routerLink]="['/pro', channelService.currentChannel.username, getTypeForRoute(type), 'hot']" routerLinkActive="active" i18n>
+ <i class="material-icons">whatshot</i>
+ <span i18n>HOT</span>
+ </a>
+
+ <a [routerLink]="['/pro', channelService.currentChannel.username, getTypeForRoute(type), 'top']" routerLinkActive="active" i18n>
+ <i class="material-icons">trending_up</i>
+ <span i18n>TOP</span>
+ </a>
+
+ <a [routerLink]="['/pro', channelService.currentChannel.username, getTypeForRoute(type), 'latest']" routerLinkActive="active" i18n>
+ <i class="material-icons">timelapse</i>
+ <span i18n>LATEST</span>
+ </a>
+</div>
+
 <div class="m-proChannelList__content">
  <ul class="m-proChannelListContent__list">
  <li *ngFor="let entity of entities">

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

@@ -5,6 +5,19 @@ m-pro--channel-list {
  margin: 0 0 0.4em;
  }
 
+ .m-proChannelList__algorithm {
+ background-color: var(--plain-background-color) !important;
+ width: fit-content;
+ margin-left: 20px;
+
+ i {
+ vertical-align: middle;
+ margin-right: 8px;
+ font-size: 18px;
+ color: #444!important;
+ }
+ }
+
  .m-proChannelList__content {
  width: 85%;
  margin: 0 auto;

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

 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router  } from "@angular/router";
 import { Subscription } from "rxjs";
 import { FeedsService } from "../../../../common/services/feeds.service";
 import { ProChannelService } from '../channel.service';
@@ -18,10 +18,13 @@ export class ProChannelListComponent implements OnInit {
 
  entities: any[] = [];
 
+ algorithm: string;
+
  constructor(
  public feedsService: FeedsService,
  protected channelService: ProChannelService,
  protected route: ActivatedRoute,
+ protected router: Router,
  protected cd: ChangeDetectorRef,
  ) {
  }
@@ -53,6 +56,8 @@ export class ProChannelListComponent implements OnInit {
  throw new Error('Unknown type');
  }
 
+ this.algorithm = params['algorithm'] || 'top';
+
  this.load(true);
  });
 
@@ -78,7 +83,7 @@ export class ProChannelListComponent implements OnInit {
 
  try {
  this.feedsService
- .setEndpoint(`api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}`)
+ .setEndpoint(`api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}/${this.algorithm}`)
  .setLimit(9)
  .fetch();
 
@@ -99,4 +104,32 @@ export class ProChannelListComponent implements OnInit {
  get seeMoreRoute() {
  return ['/', this.channelService.currentChannel.username];
  }
+
+ /**
+ * Returns the feed type on par to routes
+ * @param type feed type
+ */
+ getTypeForRoute(type: string): string{
+ let routeType = '';
+ switch (type) {
+ case 'videos':
+ routeType = 'videos';
+ break;
+ case 'images':
+ routeType = 'images';
+ break;
+ case 'blogs':
+ routeType = 'articles';
+ break;
+ case 'groups':
+ routeType = 'groups';
+ break;
+ case 'activities':
+ routeType = 'feed';
+ break;
+ default:
+ throw new Error('Unknown type');
+ }
+ return routeType;
+ }
 }

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

@@ -34,7 +34,7 @@ const routes: Routes = [
  children: [
  {
  path: '',
- redirectTo: 'articles',
+ redirectTo: 'articles/top',
  pathMatch: 'full'
  },
  {
@@ -46,8 +46,8 @@ const routes: Routes = [
  component: ProChannelSignupComponent
  },
  {
- path: ':type',
- component: ProChannelListComponent
+ path: ':type/:algorithm',
+ component: ProChannelListComponent,
  },
  ]
  },