(wip): Inject Pro on users

src/app/app.module.ts

@@ -59,6 +59,7 @@ import { CanaryModule } from './modules/canary/canary.module';
 import { HttpClientModule } from "@angular/common/http";
 import { AnalyticsModule } from "./modules/analytics/analytics.module";
 import { ProModule } from './modules/pro/pro.module';
+import { ChannelContainerModule } from './modules/channel-container/channel-container.module';
 
 @NgModule({
  bootstrap: [
@@ -119,9 +120,10 @@ import { ProModule } from './modules/pro/pro.module';
  MobileModule,
  IssuesModule,
  CanaryModule,
+ ChannelsModule,
 
  //last due to :username route
- ChannelsModule,
+ ChannelContainerModule,
  ],
  providers: [
  MindsAppRoutingProviders,

src/app/modules/channel-container/channel-container.component.html

+<ng-container *ngIf="channel; else loader">
+ <ng-container *ngIf="!channel.pro; else isProChannel">
+ <m-channel #channelComponent></m-channel>
+ </ng-container>
+ <ng-template #isProChannel>
+ <m-pro--channel
+ #proChannelComponent
+ ></m-pro--channel>
+ </ng-template>
+</ng-container>
+<ng-template #loader>
+ <div class="m-channel-container--loader" *ngIf="inProgress">
+ <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
+ </div>
+</ng-template>

src/app/modules/channel-container/channel-container.component.scss

+m-channel-container {
+ .m-channel-container--loader {
+ padding-top: 48px;
+ text-align: center;
+ }
+}

src/app/modules/channel-container/channel-container.component.ts

+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, Subscription } from 'rxjs';
+import { Client } from '../../services/api/client';
+import { MindsUser } from '../../interfaces/entities';
+import { MindsChannelResponse } from '../../interfaces/responses';
+import { ChannelComponent } from '../channels/channel.component';
+import { ProChannelComponent } from '../pro/channel/channel.component';
+
+@Component({
+ selector: 'm-channel-container',
+ templateUrl: 'channel-container.component.html',
+ changeDetection: ChangeDetectionStrategy.Default,
+})
+export class ChannelContainerComponent implements OnInit, OnDestroy {
+
+ inProgress: boolean = false;
+
+ channel: MindsUser;
+
+ protected username: string;
+
+ protected param$: Subscription;
+
+ @ViewChild('channelComponent', { static: false }) channelComponent: ChannelComponent;
+
+ @ViewChild('proChannelComponent', { static: false }) proChannelComponent: ProChannelComponent;
+
+ constructor(
+ protected route: ActivatedRoute,
+ protected client: Client,
+ ) {
+ }
+
+ ngOnInit(): void {
+ this.param$ = this.route.params.subscribe(params => {
+ if (params['username']) {
+ this.username = params['username'];
+
+ if (this.username && (!this.channel || this.channel.username != this.username)) {
+ this.load();
+ }
+ }
+ });
+ }
+
+ canDeactivate(): boolean | Observable<boolean> {
+ if (this.channelComponent) {
+ return this.channelComponent.canDeactivate();
+ }
+
+ return true;
+ }
+
+ ngOnDestroy(): void {
+ this.param$.unsubscribe();
+ }
+
+ async load() {
+ if (!this.username) {
+ return;
+ }
+
+ this.inProgress = true;
+
+ try {
+ const response: MindsChannelResponse = await this.client.get(`api/v1/channel/${this.username}`) as MindsChannelResponse;
+ this.channel = response.channel;
+ } catch (e) {
+ console.error(e);
+ }
+
+ this.inProgress = false;
+ }
+}

src/app/modules/channel-container/channel-container.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule as NgCommonModule } from '@angular/common';
+import { ChannelsModule } from '../channels/channels.module';
+import { ProModule } from '../pro/pro.module';
+import { ChannelContainerComponent } from './channel-container.component';
+import { CommonModule } from '../../common/common.module';
+
+@NgModule({
+ imports: [
+ NgCommonModule,
+ CommonModule,
+ ProModule,
+ ChannelsModule,
+ ],
+ declarations: [
+ ChannelContainerComponent,
+ ],
+ entryComponents: [
+ ChannelContainerComponent,
+ ],
+})
+export class ChannelContainerModule { }

src/app/modules/channels/channel.component.ts

@@ -82,6 +82,8 @@ export class ChannelComponent {
  } else {
  this.filter = params['filter'];
  }
+ } else {
+ this.filter = 'feed';
  }
 
  if (params['editToggle']) {

src/app/modules/channels/channels.module.ts

@@ -71,6 +71,7 @@ const routes: Routes = [
  ChannelSocialProfiles,
  ChannelFeedComponent,
  ChannelSidebar,
+ ChannelComponent,
  ],
  entryComponents: [
  ChannelComponent,

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

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ProChannelService } from "../channel.service";
 import { Router } from "@angular/router";
 import { MindsUser, Tag } from "../../../../interfaces/entities";
@@ -27,14 +27,12 @@ export class ProCategoriesComponent {
  this.selectTag(value, false);
  }
 
+ @Output() onSelectTag: EventEmitter<string | null> = new EventEmitter<string|null>();
+
  get channel(): MindsUser {
  return this.channelService.currentChannel;
  }
 
- get currentURL(): string {
- return `pro/${this.channel.username}/${this.type}`
- }
-
  constructor(
  protected channelService: ProChannelService,
  protected router: Router,
@@ -42,7 +40,7 @@ export class ProCategoriesComponent {
  ) {
  }
 
- selectTag(clickedTag: Tag | string, redirect: boolean = true) {
+ selectTag(clickedTag: Tag | string, triggerEvent: boolean = true) {
  if (typeof clickedTag !== 'string') {
  clickedTag = clickedTag.tag;
  }
@@ -52,18 +50,8 @@ export class ProCategoriesComponent {
 
  this.detectChanges();
 
- if (redirect) {
- const params = {
- ...this.params
- };
-
- if (clickedTag === 'all') {
- delete params.hashtag;
- } else {
- params.hashtag = clickedTag;
- }
-
- this.router.navigate([this.currentURL, params]);
+ if (triggerEvent) {
+ this.onSelectTag.emit(clickedTag !== 'all' ? clickedTag : null);
  }
  }
 

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

@@ -6,21 +6,21 @@
  <img
  class="m-proChannelTopbar__logo"
  [src]="channel.pro_settings.logo_image"
- [routerLink]="['/pro', channel.username]"
+ [routerLink]="homeRouterLink"
  >
 
  <div class="m-proChannelTopbar__SearchBox">
  <div class="mdl-textfield mdl-js-textfield">
  <i class="material-icons search">search</i>
  <input
- [(ngModel)]="searchedText"
+ [(ngModel)]="query"
  id="search"
  autocomplete="off"
  class="mdl-textfield__input ng-pristine ng-valid ng-touched"
  type="text"
  (keyup.enter)="search()"
  >
- <ng-container *ngIf="searchedText">
+ <ng-container *ngIf="query">
  <i class="material-icons clear" (click)="clearSearch()">close</i>
  </ng-container>
  <label class="mdl-textfield__label" for="search"></label>
@@ -30,37 +30,42 @@
  <ng-container *ngIf="!collapseNavItems">
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="['/pro', channel.username, 'feed']"
+ [routerLink]="feedRouterLink"
  routerLinkActive="active"
  i18n
  >Feed</a>
+
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="linkTo('videos', searchedText)"
+ [routerLink]="videosRouterLink"
  routerLinkActive="active"
  i18n
  >Videos</a>
+
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="linkTo('images', searchedText)"
+ [routerLink]="imagesRouterLink"
  routerLinkActive="active"
  i18n
  >Images</a>
+
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="linkTo('articles', searchedText)"
+ [routerLink]="articlesRouterLink"
  routerLinkActive="active"
  i18n
  >Articles</a>
+
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="linkTo('communities', query)"
+ [routerLink]="communitiesRouterLink"
  routerLinkActive="active"
  i18n
  >Communities</a>
+
  <a
  class="m-proChannelTopbar__navItem"
- [routerLink]="['/pro', channel.username, 'donate']"
+ [routerLink]="donateRouterLink"
  routerLinkActive="active"
  i18n
  >Donate</a>
@@ -77,7 +82,7 @@
  </span>
 
  <span class="m-proChannelTopbar__subscribe--counter">
- {{ subscribers_count | abbr:0 }} 
+ {{ subscribersCount | abbr:0 }}
  </span> 
  </button>
  </ng-container>
@@ -91,35 +96,35 @@
  class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="linkTo('videos', query)" routerLinkActive="active" i18n>Videos</a>
+ <a [routerLink]="videosRouterLink" routerLinkActive="active" i18n>Videos</a>
  </li>
  
  <li
  class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="linkTo('images', query)" routerLinkActive="active" i18n>Images</a>
+ <a [routerLink]="imagesRouterLink" routerLinkActive="active" i18n>Images</a>
  </li>
  
  <li
  class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="linkTo('articles', query)" routerLinkActive="active" i18n>Articles</a>
+ <a [routerLink]="articlesRouterLink" routerLinkActive="active" i18n>Articles</a>
  </li>
  
  <li
  class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="linkTo('groups', query)" routerLinkActive="active" i18n>Groups</a>
+ <a [routerLink]="communitiesRouterLink" routerLinkActive="active" i18n>Communities</a>
  </li>
  
  <li
  class="m-dropdownList__item m-proChannelTopbarMenuDropdown__item"
  (click)="closeMenu()"
  >
- <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
+ <a [routerLink]="donateRouterLink" routerLinkActive="active">Donate</a>
  </li>
  </ng-container>
  </ul>

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

@@ -36,6 +36,10 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
 
  username: string;
 
+ type: string;
+
+ query: string;
+
  channel: MindsUser;
 
  inProgress: boolean;
@@ -46,19 +50,11 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
 
  params$: Subscription;
 
- searchedText: string;
-
- router$: Subscription;
-
- currentURL: string;
-
- query: string;
-
  isMenuOpen: boolean = false;
 
  channel$: Subscription;
 
- subscribers_count: number;
+ subscribersCount: number;
 
  @ViewChild('overlayModal', { static: true }) protected overlayModal: OverlayModalComponent;
 
@@ -73,7 +69,7 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  protected router: Router,
  protected route: ActivatedRoute,
  protected cd: ChangeDetectorRef,
- public modal: SignupModalService,
+ protected modal: SignupModalService,
  protected modalService: OverlayModalService,
  protected injector: Injector,
  ) {
@@ -95,52 +91,61 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  }
 
  listen() {
- this.router$ = this.router.events.subscribe((navigationEvent) => {
- try {
- if (navigationEvent instanceof NavigationEnd) {
- if (!navigationEvent.urlAfterRedirects) {
- return;
- }
-
- this.currentURL = navigationEvent.urlAfterRedirects;
- this.setTitle();
- }
- } catch (e) {
- console.error('Minds: router hook(SearchBar)', e);
- }
- });
-
  this.params$ = this.route.params.subscribe(params => {
  if (params['username']) {
  this.username = params['username'];
  }
 
+ if (params['type']) {
+ this.type = params['type'];
+ this.setTitle();
+ }
+
  if (this.username && (!this.channel || this.channel.username != this.username)) {
  this.load();
  }
  });
 
- this.channel$ = this.channelService.subscriptionChange.subscribe((subscribers_count) => {
- this.subscribers_count = subscribers_count;
+ this.channel$ = this.channelService.subscriptionChange.subscribe(subscribersCount => {
+ this.subscribersCount = subscribersCount;
  this.load();
  })
  }
 
  setTitle() {
- let title = this.channel.pro_settings.title as string || this.channel.name;
-
- const childRoute = this.route.children.length > 0 ? this.route.children[0].snapshot : null;
+ if (!this.channel) {
+ this.title.setTitle(this.username || 'Minds Pro');
+ return;
+ }
 
- if (childRoute && childRoute.params['type']) {
- title += ` - ${childRoute.params['type']}`;
+ const title = [this.channel.pro_settings.title as string || this.channel.name || this.channel.username];
+
+ switch (this.type) {
+ case 'feed':
+ title.push('Feed');
+ break;
+ case 'videos':
+ title.push('Videos');
+ break;
+ case 'images':
+ title.push('Images');
+ break;
+ case 'articles':
+ title.push('Articles');
+ break;
+ case 'communities':
+ title.push('Communities');
+ break;
+ case 'donate':
+ title.push('Donate');
+ break;
  }
 
  if (this.channel.pro_settings.headline) {
- title += ` - ${this.channel.pro_settings.headline}`;
+ title.push(this.channel.pro_settings.headline);
  }
 
-
- this.title.setTitle(title);
+ this.title.setTitle(title.join(' - '));
  }
 
  ngOnDestroy() {
@@ -150,9 +155,6 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  if (this.channel$) {
  this.channel$.unsubscribe();
  }
- if (this.router$) {
- this.router$.unsubscribe();
- }
 
  this.isLoggedIn$.unsubscribe();
  }
@@ -168,7 +170,7 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  try {
  await this.channelService.auth();
  this.channel = await this.channelService.load(this.username);
- this.subscribers_count = this.channel.subscribers_count;
+ this.subscribersCount = this.channel.subscribers_count;
  this.bindCssVariables();
  this.setTitle();
  } catch (e) {
@@ -184,7 +186,7 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
 
  if (!this.channel.subscribed) {
  if (!this.session.isLoggedIn()) {
- this.router.navigate(['/login']);
+ this.router.navigate(this.channelService.getRouterLink('signup'));
  return false;
  }
 
@@ -219,11 +221,6 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  }
  }
 
- detectChanges() {
- this.cd.markForCheck();
- this.cd.detectChanges();
- }
-
  @HostBinding('style.backgroundImage') get backgroundImageCssValue() {
  if (!this.channel) {
  return 'none';
@@ -244,6 +241,30 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  this.collapseNavItems = window.innerWidth <= 992;
  }
 
+ toggleMenu() {
+ this.isMenuOpen = !this.isMenuOpen;
+ }
+
+ closeMenu() {
+ this.isMenuOpen = false;
+ }
+
+ search(): Promise<boolean> {
+ return this.router.navigate(this.channelService.getRouterLink('all', { query: this.query }));
+ }
+
+ clearSearch() {
+ this.query = '';
+ // TODO: Do this!
+ // const cleanUrl = this.router.url.split(';')[0];
+ // this.router.navigate([cleanUrl]);
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+
  get currentUser() {
  if (!this.session.isLoggedIn()) {
  return null;
@@ -252,36 +273,55 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  return this.session.getLoggedInUser();
  }
 
- toggleMenu() {
- this.isMenuOpen = !this.isMenuOpen;
+ get homeRouterLink() {
+ return this.channelService.getRouterLink('home');
  }
 
- closeMenu() {
- this.isMenuOpen = false;
- }
+ get feedRouterLink() {
+ let params;
+
+ if (this.query) {
+ params = { query: this.query };
+ }
 
- search() {
- this.router.navigate([this.getCurrentURL(), { query: this.searchedText, period: '24h' }]);
+ return this.channelService.getRouterLink('feed', params);
  }
 
- clearSearch() {
- this.searchedText = '';
- const cleanUrl = this.router.url.split(';')[0];
- this.router.navigate([cleanUrl]);
+ get videosRouterLink() {
+ let params;
+
+ if (this.query) {
+ params = { query: this.query };
+ }
+
+ return this.channelService.getRouterLink('videos', params);
  }
 
- get linkTo() {
- return this.channelService.linkTo.bind(this.channelService);
+ get imagesRouterLink() {
+ let params;
+
+ if (this.query) {
+ params = { query: this.query };
+ }
+
+ return this.channelService.getRouterLink('images', params);
  }
 
- getCurrentURL() {
- let currentURL = this.currentURL;
- if (!currentURL) {
- currentURL = `/pro/${this.channel.username}/articles`; //TODO ADD /TOP when algorithm is enabled
- } else if (currentURL.includes(';')) {
- currentURL = this.currentURL.split(';')[0];
+ get articlesRouterLink() {
+ let params;
+
+ if (this.query) {
+ params = { query: this.query };
  }
 
- return currentURL;
+ return this.channelService.getRouterLink('articles', params);
+ }
+
+ get communitiesRouterLink() {
+ return this.channelService.getRouterLink('communities');
+ }
+
+ get donateRouterLink() {
+ return this.channelService.getRouterLink('donate');
  }
 }

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

@@ -9,6 +9,8 @@ import { OverlayModalService } from '../../../services/ux/overlay-modal';
 import { BlogView } from "../../blogs/view/view";
 import { Session } from '../../../services/session';
 
+export type RouterLinkToType = 'home' | 'all' | 'feed' | 'videos' | 'images' | 'articles' | 'communities' | 'donate' | 'signup';
+
 @Injectable()
 export class ProChannelService {
 
@@ -32,7 +34,13 @@ export class ProChannelService {
  const response: MindsChannelResponse = await this.client.get(`api/v1/channel/${id}`) as MindsChannelResponse;
 
  this.currentChannel = response.channel;
+
+ if (!this.currentChannel.pro_settings.tag_list) {
+ this.currentChannel.pro_settings.tag_list = [];
+ }
+
  this.currentChannel.pro_settings.tag_list.unshift({ tag: 'all', label: 'All', selected: false });
+
  this.featuredContent = null;
 
  return this.currentChannel;
@@ -116,15 +124,38 @@ export class ProChannelService {
  });
  }
 
- linkTo(to, query, algorithm?) {
- let route = ['/pro', this.currentChannel.username, to];
+ getRouterLink(to: RouterLinkToType, params?: { [key: string]: any }): any[] {
+ const route: any[] = ['/'];
 
- if (algorithm) {
- route.push(algorithm);
+ if (!window.Minds.pro) {
+ route.push(this.currentChannel.username);
  }
 
- if (query) {
- route.push({ query });
+ switch (to) {
+ case 'home':
+ /* Root */
+ break;
+
+ case 'all':
+ case 'feed':
+ case 'videos':
+ case 'images':
+ case 'articles':
+ case 'communities':
+ route.push(to);
+
+ if (params) {
+ route.push(params);
+ }
+ break;
+
+ case 'donate':
+ route.push(to);
+ break;
+
+ case 'signup':
+ route.push('signup');
+ break;
  }
 
  return route;

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

@@ -19,7 +19,7 @@
 
  <ng-container *ngIf="session.getLoggedInUser()">
  <span style="position: relative">
- <minds-button-user-dropdown [(user)]="user" *ngIf="session.getLoggedInUser().guid != user.guid"></minds-button-user-dropdown>
+ <minds-button-user-dropdown [user]="user" *ngIf="session.getLoggedInUser().guid != user.guid"></minds-button-user-dropdown>
  </span>
  </ng-container>
 </div>

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

@@ -67,7 +67,7 @@ export class ProChannelHomeComponent implements OnInit {
  return [];
  }
 
- return ['/pro', this.channelService.currentChannel.username, 'all', { hashtag: tag }];
+ return this.channelService.getRouterLink('all', { hashtag: tag });
  }
 
  onContentClick(entity: any) {

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

 <m-pro--channel--categories
  [type]="paramsType"
  [selectedHashtag]="selectedHashtag"
- [style.visibility]="paramsType !== 'communities' ? 'visible' : 'hidden'"
+ (onSelectTag)="selectHashtag($event)"
+ [style.visibility]="shouldShowCategories ? 'visible' : 'hidden'"
 ></m-pro--channel--categories>
 
 <div class="m-proChannelList__tools" *ngIf="query !== ''">

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, OnDest
 import { ActivatedRoute, Router } from "@angular/router";
 import { Subscription } from "rxjs";
 import { FeedsService } from "../../../../common/services/feeds.service";
-import { ProChannelService } from '../channel.service';
+import { ProChannelService, RouterLinkToType } from '../channel.service';
 import { first } from "rxjs/operators";
 import { OverlayModalService } from "../../../../services/ux/overlay-modal";
 import { ProContentModalComponent } from "../content-modal/modal.component";
@@ -35,8 +35,6 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
  selectedHashtag: string = 'all';
 
- selectedHashtag$: Subscription;
-
  constructor(
  public feedsService: FeedsService,
  protected modalService: OverlayModalService,
@@ -110,9 +108,6 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  if (this.params$) {
  this.params$.unsubscribe();
  }
- if (this.selectedHashtag$) {
- this.selectedHashtag$.unsubscribe();
- }
  }
 
  async load(refresh: boolean = false) {
@@ -183,4 +178,18 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  onTileClicked(entity: any) {
  return this.channelService.open(entity, this.modalService);
  }
+
+ selectHashtag(tag: string) {
+ let params;
+
+ if (tag) {
+ params = { hashtag: tag };
+ }
+
+ return this.router.navigate(this.channelService.getRouterLink(this.type as RouterLinkToType, params))
+ }
+
+ get shouldShowCategories() {
+ return this.paramsType !== 'communities' && this.paramsType !== 'feed';
+ }
 }

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

@@ -54,13 +54,13 @@ export class ProChannelLoginComponent {
  }
 
  if (this.session.isLoggedIn()) {
- this.router.navigate(['/pro', this.username]);
+ this.router.navigate(this.service.getRouterLink('home'));
  }
 
  });
  }
 
  registered() {
- this.router.navigate(['pro', this.username]);
+ this.router.navigate(this.service.getRouterLink('home'));
  }
 }

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html

-<div class="m-pro-user-menu m-dropdown">
- <a class="m-pro-user-menu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
-
- <ul class="m-dropdown__list m-pro-user-menu__dropdown mdl-shadow--3dp" [hidden]="!isOpen">
- <li
- class="m-dropdownList__item m-pro-user-menuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
- </li>
-
- <li
- class="m-dropdownList__item m-pro-user-menuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="linkTo('videos', query)" routerLinkActive="active" i18n>Videos</a>
- </li>
-
- <li
- class="m-dropdownList__item m-pro-user-menuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="linkTo('images', query)" routerLinkActive="active" i18n>Images</a>
- </li>
-
- <li
- class="m-dropdownList__item m-pro-user-menuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="linkTo('articles', query)" routerLinkActive="active" i18n>Articles</a>
- </li>
-
- <li
- class="m-dropdownList__item m-pro-user-menuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="linkTo('communities', query)" routerLinkActive="active" i18n>Communities</a>
- </li>
-
- <li
- class="m-dropdownList__item m-pro-user-menuDropdown__item"
- (click)="closeMenu()"
- >
- <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
- </li>
- </ul>
-</div>
-
-<div class="minds-bg-overlay" (click)="closeMenu()" [hidden]="!isOpen"></div>

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.scss

-m-pro-user-menu {
- display: inline-block;
- position: relative;
- cursor: pointer;
-}
-
-.m-pro-user-menu__dropdown {
- top: -238px !important;
- list-style: none;
- margin: 34px 0 0;
- @include m-theme() {
- background-color: themed('m-white');
- color: themed('m-grey-700');
- }
-
- li.m-pro-user-menuDropdown__item {
- &:hover {
- @include m-theme() {
- background-color: rgba(themed('m-grey-50'), 0.5);
- }
- }
-
- a {
- color: #555 !important;
- }
-
- i {
- color: #555 !important;
- }
- }
-
-}

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.ts

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from "@angular/core";
-import { Session } from "../../../../services/session";
-import { ThemeService } from "../../../../common/services/theme.service";
-import { ProChannelService } from "../channel.service";
-
-@Component({
- selector: 'm-pro-user-menu',
- templateUrl: 'pro-user-menu.component.html',
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ProUserMenuComponent implements OnInit {
- isOpen: boolean = false;
-
- // added this again since removed by mistake
- @Input() channelName: string;
- @Input() showNavItems: boolean;
- @Input() query: string;
-
- get channel() {
- return this.channelService.currentChannel;
- }
-
- constructor(
- public channelService: ProChannelService,
- protected session: Session,
- protected cd: ChangeDetectorRef,
- private themeService: ThemeService,
- ) {
- }
-
- ngOnInit() {
- this.session.isLoggedIn(() => this.detectChanges());
- }
-
- toggleMenu() {
- this.isOpen = !this.isOpen;
- }
-
- closeMenu() {
- this.isOpen = false;
- }
-
- detectChanges() {
- this.cd.markForCheck();
- this.cd.detectChanges();
- this.themeService.applyThemePreference();
- }
-
- get linkTo() {
- return this.channelService.linkTo.bind(this.channelService);
- }
-
-}

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

@@ -14,7 +14,6 @@ import { ProChannelDonateComponent } from './channel/donate/donate.component';
 import { ProTileComponent } from "./channel/tiles/media/tile.component";
 import { NewsfeedModule } from "../newsfeed/newsfeed.module";
 import { ProSettingsComponent } from './settings/settings.component';
-import { ProUserMenuComponent } from "./channel/pro-user-menu/pro-user-menu.component";
 import { ProChannelFooterComponent } from './channel/footer/footer.component';
 import { LegacyModule } from "../legacy/legacy.module";
 import { WireModule } from "../wire/wire.module";
@@ -69,10 +68,6 @@ routes.push({
  path: 'settings',
  component: ProSettingsComponent,
  },
- {
- path: ':username',
- ...channelRoute
- },
  ]
 });
 
@@ -105,12 +100,13 @@ routes.push({
  ProChannelLoginComponent,
  ProChannelListComponent,
  ProChannelDonateComponent,
- ProUserMenuComponent,
  ProChannelFooterComponent,
  ProGroupTileComponent,
  ProUnsubscribeModalComponent
  ],
- exports: [],
+ exports: [
+ ProChannelComponent
+ ],
  entryComponents: [
  ProChannelListModal,
  ProUnsubscribeModalComponent,

src/app/modules/pro/settings/settings.component.ts

@@ -96,7 +96,7 @@ export class ProSettingsComponent implements OnInit {
  }
 
  get previewRoute() {
- return ['/pro', this.session.getLoggedInUser().username];
+ return ['/', this.session.getLoggedInUser().username];
  }
 
  onDragStart(event: DragEvent) {

src/app/router/app.ts

 import { Routes } from '@angular/router';
 import { APP_BASE_HREF } from '@angular/common';
 
-import {Capture} from '../controllers/capture/capture';
-import {Discovery} from '../controllers/discovery/discovery';
-import {Admin} from '../controllers/admin/admin';
-import {Pages} from '../controllers/pages/pages';
-
-import { ChannelComponent } from '../modules/channels/channel.component';
-/**
- * TODO: Load these automagically from gulp
- */
-
-import {CanDeactivateGuardService} from '../services/can-deactivate-guard';
+import { Capture } from '../controllers/capture/capture';
+import { Discovery } from '../controllers/discovery/discovery';
+import { Admin } from '../controllers/admin/admin';
+import { Pages } from '../controllers/pages/pages';
+import { CanDeactivateGuardService } from '../services/can-deactivate-guard';
 import { RewardsComponent } from '../controllers/rewards/rewards';
+import { ChannelContainerComponent } from '../modules/channel-container/channel-container.component';
 
 export const MindsAppRoutes: Routes = [
 
@@ -42,9 +37,9 @@ export const MindsAppRoutes: Routes = [
 
  { path: 'claim-rewards/:uuid', component: RewardsComponent },
 
- // TODO: Find a way to move Channel routes onto Channel Module. They take priority and groups/blogs cannot be accessed
- { path: ':username/:filter', component: ChannelComponent },
- { path: ':username', component: ChannelComponent, canDeactivate: [CanDeactivateGuardService]},
+ // TODO: Find a way to move channel routes onto its own Module. They take priority and groups/blogs cannot be accessed
+ { path: ':username', redirectTo: ':username/', pathMatch: 'full' },
+ { path: ':username/:filter', component: ChannelContainerComponent, canDeactivate: [CanDeactivateGuardService] },
 ];
 
 export const MindsAppRoutingProviders: any[] = [{ provide: APP_BASE_HREF, useValue: '/' }];