(wip): Pro home

src/app/interfaces/entities.ts

@@ -84,6 +84,7 @@ export interface MindsUser {
  footer_links: { href: string, title: string }[],
  scheme: string,
  styles?: { [key: string]: string },
+ featured_content?: Array<string>,
  };
 }
 

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

@@ -2,21 +2,23 @@ import { EventEmitter, Injectable } from '@angular/core';
 import { MindsChannelResponse } from '../../../interfaces/responses';
 import { MindsUser, Tag } from '../../../interfaces/entities';
 import { Client } from '../../../services/api/client';
+import { EntitiesService } from '../../../common/services/entities.service';
+import normalizeUrn from '../../../helpers/normalize-urn';
 
 @Injectable()
 export class ProChannelService {
+
  currentChannel: MindsUser;
+
  selectedHashtag: Tag;
 
  selectedHashtagChange: EventEmitter<Tag> = new EventEmitter<Tag>();
 
- setSelectedHashtag(value: Tag) {
- this.selectedHashtag = value;
- this.selectedHashtagChange.emit(this.selectedHashtag);
- }
+ protected featuredContent: Array<any> | null;
 
  constructor(
  protected client: Client,
+ protected entitiesService: EntitiesService,
  ) { }
 
  async load(id: string) {
@@ -26,6 +28,7 @@ export class ProChannelService {
  const response: MindsChannelResponse = await this.client.get(`api/v1/channel/${id}`) as MindsChannelResponse;
 
  this.currentChannel = response.channel;
+ this.featuredContent = null;
 
  return this.currentChannel;
  } catch (e) {
@@ -38,6 +41,35 @@ export class ProChannelService {
  }
  }
 
+ async getFeaturedContent(): Promise<Array<any>> {
+ if (!this.currentChannel) {
+ this.featuredContent = null;
+ return [];
+ }
+
+ if (!this.featuredContent) {
+ if (this.currentChannel.pro_settings.featured_content && this.currentChannel.pro_settings.featured_content.length) {
+ try {
+ const urns = this.currentChannel.pro_settings.featured_content.map(guid => normalizeUrn(guid));
+ const { entities } = await this.entitiesService.fetch(urns) as any;
+
+ this.featuredContent = entities;
+ } catch (e) {
+ this.featuredContent = null;
+ return [];
+ }
+ } else {
+ this.featuredContent = [];
+ }
+ }
+
+ return this.featuredContent;
+ }
+
+ setSelectedHashtag(value: Tag) {
+ this.selectedHashtag = value;
+ this.selectedHashtagChange.emit(this.selectedHashtag);
+ }
  linkTo(to, query, algorithm?) {
  let route = ['/pro', this.currentChannel.username, to];
 

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

+<div class="m-pro--channel-home">
+ <div class="m-pro--channel-home--featured-content">
+ <m-pro--channel-tile
+ *ngFor="let entity of featuredContent"
+ [entity]="entity"
+ (click)="onFeaturedContentClick(entity)"
+ ></m-pro--channel-tile>
+ </div>
+</div>

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

+.m-pro--channel-home {
+ .m-pro--channel-home--featured-content {
+ display: grid;
+ grid-gap: 24px;
+ grid-template-columns: repeat(2, 1fr);
+
+ *:first-child {
+ grid-column: span 2;
+ }
+ }
+}

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

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ProChannelService } from '../channel.service';
+
+@Component({
+ selector: 'm-pro--channel-home',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: 'home.component.html',
+})
+export class ProChannelHomeComponent implements OnInit {
+
+ featuredContent: Array<any> = [];
+
+ constructor(
+ protected channelService: ProChannelService,
+ protected cd: ChangeDetectorRef,
+ ) {
+ }
+
+ ngOnInit() {
+ this.load();
+ }
+
+ async load() {
+ this.featuredContent = await this.channelService.getFeaturedContent();
+ this.detectChanges();
+ }
+
+ onFeaturedContentClick(entity) {
+
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+}

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

@@ -21,6 +21,7 @@ import { WireModule } from "../wire/wire.module";
 import { ProContentModalComponent } from "./channel/content-modal/modal.component";
 import { VideoModule } from "../media/components/video/video.module";
 import { ProChannelListModal } from './channel/list-modal/list-modal.component';
+import { ProChannelHomeComponent } from './channel/home/home.component';
 
 const routes: Routes = [
  {
@@ -40,8 +41,7 @@ const routes: Routes = [
  children: [
  {
  path: '',
- redirectTo: 'articles',
- pathMatch: 'full'
+ component: ProChannelHomeComponent,
  },
  {
  path: 'donate',
@@ -83,6 +83,7 @@ const routes: Routes = [
  ProSubscriptionComponent,
  ProTileComponent,
  ProContentModalComponent,
+ ProChannelHomeComponent,
  ProChannelListModal,
  ProChannelComponent,
  ProChannelSignupComponent,