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

@@ -9,30 +9,32 @@
 
 <div class="m-proChannelList__content">
  <ul class="m-proChannelListContent__list">
- <li *ngFor="let entity of (feedsService.feed | async) as feed">
+ <li *ngFor="let entity of entities">
  <ng-container *ngIf="type === 'images' || type === 'videos' || type === 'blogs'">
  <m-pro--channel-tile
- [entity]="entity | async"
+ [entity]="entity"
  ></m-pro--channel-tile>
  </ng-container>
  <ng-container *ngIf="type === 'groups'">
  <m-newsfeed__entity
- [entity]="entity | async">
+ [entity]="entity">
 
  </m-newsfeed__entity>
  </ng-container>
+ <li
+ class="m-proChannelListContentList__seeMore"
+ *ngIf="entities.length != 0"
+ [routerLink]="seeMoreRoute"
+ i18n
+ >
+ See more
  </li>
  </ul>
- <ng-container *ngIf="!(feedsService.feed | async) || (feedsService.feed | async).length == 0; else seeMore">
+ <ng-container *ngIf="entities.length == 0">
  <div class="m-proChannelListContent__noContent" i18n>There's nothing to show</div>
  </ng-container>
- <ng-template #seeMore> 
- <div class="m-proChannelListContentList__seeMore" [routerLink]="seeMoreRoute" i18n>
- See more
- </div>
- </ng-template>
  <ng-container *ngIf="type === 'activities'">
- <pre *ngFor="let entity of (feedsService.feed | async)">{{entity | async | json}}</pre>
+ <pre *ngFor="let entity of entities"></pre>
  <!-- talk to Emi about this -->
  </ng-container>
 </div>

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

@@ -26,8 +26,8 @@ m-pro--channel-list {
  font-size: 14px;
  font-weight: 600;
  padding: 8px;
- color: #90a4ae!important;
- background-color: #eceff1!important;
+ color: #90a4ae !important;
+ background-color: #eceff1 !important;
  }
 
  ul.m-proChannelListContent__list {
@@ -107,8 +107,15 @@ m-pro--channel-list {
  width: 250px;
  }
  }
+ }
+
+ @media screen and (min-width: 1px) and (max-width: $min-desktop) {
+ .m-proChannelList__content {
+ margin: 0;
+ width: 100%;
+ }
 
- @media screen and (min-width: 1px) and (max-width: $max-mobile) {
+ ul.m-proChannelListContent__list {
  grid-template-columns: 1fr;
 
  li {

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

@@ -3,6 +3,7 @@ import { ActivatedRoute } from "@angular/router";
 import { Subscription } from "rxjs";
 import { FeedsService } from "../../../../common/services/feeds.service";
 import { ProChannelService } from '../channel.service';
+import { first } from "rxjs/operators";
 
 @Component({
  selector: 'm-pro--channel-list',
@@ -15,6 +16,8 @@ export class ProChannelListComponent implements OnInit {
 
  params$: Subscription;
 
+ entities: any[] = [];
+
  constructor(
  public feedsService: FeedsService,
  protected channelService: ProChannelService,
@@ -25,6 +28,7 @@ export class ProChannelListComponent implements OnInit {
 
  ngOnInit() {
  this.params$ = this.route.params.subscribe(params => {
+ this.entities = [];
  if (params['type']) {
  this.type = params['type'];
  }
@@ -51,6 +55,18 @@ export class ProChannelListComponent implements OnInit {
 
  this.load(true);
  });
+
+ this.feedsService.feed.subscribe(async entities => {
+ if (!entities.length)
+ return;
+
+ for (const entity of entities) {
+ if (entity)
+ this.entities.push(await entity.pipe(first()).toPromise());
+ }
+
+ this.detectChanges();
+ });
  }
 
  async load(refresh: boolean = false) {
@@ -69,8 +85,6 @@ export class ProChannelListComponent implements OnInit {
  } catch (e) {
  console.error('ProChannelListComponent.load', e);
  }
-
- this.detectChanges();
  }
 
  loadNext() {