(refactor): Homepage (Mk2)

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

@@ -10,20 +10,12 @@
  </div>
  </div>
 
- <div class="m-pro--channel-home--section" *ngIf="content?.length">
- <h2 i18n>Top Content</h2>
-
- <div class="m-pro--channel-home--content">
- <m-pro--channel-tile
- *ngFor="let entity of content"
- [entity]="entity"
- (click)="onContentClick(entity)"
- ></m-pro--channel-tile>
- </div>
- </div>
-
  <div class="m-pro--channel-home--section" *ngFor="let category of categories">
- <h2 i18n>{{ category?.tag?.label }}</h2>
+ <h2 i18n>
+ <a
+ [routerLink]="getCategoryRoute(category.tag?.tag)"
+ >{{ category.tag?.label }}</a>
+ </h2>
 
  <div class="m-pro--channel-home--category-content">
  <ng-container *ngFor="let entity$ of category?.content">

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

@@ -15,6 +15,11 @@
  font-weight: 300;
  letter-spacing: 2px;
  line-height: 1.25;
+
+ > a {
+ font: inherit;
+ text-decoration: none;
+ }
  }
  }
 
@@ -24,7 +29,7 @@
  }
 
  .m-pro--channel-home--featured-content,
- .m-pro--channel-home--content {
+ .m-pro--channel-home--category-content {
  width: 80%;
  margin: 0 auto;
  display: grid;
@@ -36,23 +41,30 @@
  }
 
  .m-pro--channel-home--featured-content {
- grid-template-columns: repeat(2, 1fr);
+ grid-template-columns: repeat(4, 1fr);
+
+ *:nth-child(1) {
+ grid-column: span 4;
+ }
 
- *:first-child {
+ *:nth-child(2),
+ *:nth-child(3) {
  grid-column: span 2;
  }
 
  @media screen and (max-width: $max-mobile) {
  grid-template-columns: repeat(1, 1fr);
 
- *:first-child {
+ *:nth-child(1),
+ *:nth-child(2),
+ *:nth-child(3) {
  grid-column: initial;
  }
  }
  }
 
- .m-pro--channel-home--content {
- grid-template-columns: repeat(3, 1fr);
+ .m-pro--channel-home--category-content {
+ grid-template-columns: repeat(4, 1fr);
 
  @media screen and (max-width: $max-mobile) {
  grid-template-columns: repeat(1, 1fr);

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

@@ -14,8 +14,6 @@ export class ProChannelHomeComponent implements OnInit {
 
  featuredContent: Array<any> = [];
 
- content: Array<any> = [];
-
  categories: Array<{
  tag: { tag: string, label: string },
  content: Array<Observable<any>>,
@@ -35,9 +33,11 @@ export class ProChannelHomeComponent implements OnInit {
  }
 
  async load() {
+ const MAX_FEATURED_CONTENT = 19; // 1 + 2 + (4 * 4)
+
  this.inProgress = true;
  this.featuredContent = [];
- this.content = [];
+ this.categories = [];
  this.moreData = true;
 
  this.detectChanges();
@@ -47,9 +47,9 @@ export class ProChannelHomeComponent implements OnInit {
  this.detectChanges();
 
  const { content } = await this.channelService.getContent({
- limit: 24,
+ limit: MAX_FEATURED_CONTENT,
  });
- this.content.push(...content);
+ this.featuredContent = this.featuredContent.concat(content).slice(0, MAX_FEATURED_CONTENT);
  this.detectChanges();
 
  this.categories = await this.channelService.getAllCategoriesContent();
@@ -62,6 +62,14 @@ export class ProChannelHomeComponent implements OnInit {
  this.detectChanges();
  }
 
+ getCategoryRoute(tag) {
+ if (!this.channelService.currentChannel || !tag) {
+ return [];
+ }
+
+ return ['/pro', this.channelService.currentChannel.username, 'all', { hashtag: tag }];
+ }
+
  onContentClick(entity: any) {
  return this.channelService.open(entity, this.modalService);
  }

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

@@ -13,7 +13,7 @@
 <div class="m-proChannelList__content">
  <ul class="m-proChannelListContent__list" [class.m-proChannelListContent__normalList]="type === 'activities'">
  <li *ngFor="let entity of entities; let i = index">
- <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
+ <ng-container *ngIf="type === 'all' || type === 'images' || type === 'videos' || type === 'blogs'">
  <m-pro--channel-tile
  [entity]="entity"
  (click)="onTileClicked(entity)"

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

@@ -58,6 +58,9 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  this.type = this.paramsType = params['type'];
  }
  switch (params['type']) {
+ case 'all':
+ this.type = 'all';
+ break;
  case 'videos':
  this.type = 'videos';
  break;
@@ -121,25 +124,26 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
  this.detectChanges();
 
- let params = [];
+ let params: any = {};
 
  if (this.selectedHashtag && this.selectedHashtag !== 'all') {
- params.push(`hashtags=${this.selectedHashtag}`);
+ params.hashtags = this.selectedHashtag;
  }
 
  if (this.query && (this.query !== '')) {
- params.push(`&period=${this.period}&all=1&query=${this.query}&nsfw=&sync=1&limit=150&as_activities=1&from_timestamp=`);
+ params.period = this.period;
+ params.all = 1;
+ params.query = this.query;
+ params.sync = 1;
  }
 
  let url = `api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}/${this.algorithm}`;
 
- if (params.length > 0) {
- url += '?' + params.join('&');
- }
-
  try {
  this.feedsService
  .setEndpoint(url)
+ .setParams(params)
+ .setCastToActivities(false)
  .setLimit(10)
  .fetch();