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

@@ -206,8 +206,8 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
 
     const title = [
       (this.channel.pro_settings.title as string) ||
-      this.channel.name ||
-      this.channel.username,
+        this.channel.name ||
+        this.channel.username,
     ];
 
     switch (this.type) {
@@ -251,8 +251,7 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
     this.detectChanges();
 
     try {
-      await this.channelService.auth();
-      this.channel = await this.channelService.load(this.username);
+      this.channel = await this.channelService.loadAndAuth(this.username);
       this.bindCssVariables();
       this.setTitle();
     } catch (e) {

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

@@ -29,7 +29,7 @@ export interface NavItems {
   isActive: () => boolean;
 }
 
-type PaginationParams = { limit?: number, offset?: any };
+type PaginationParams = { limit?: number; offset?: any };
 type FeedsResponse = {
   content: Array<any>;
   offset: any;
@@ -55,7 +55,7 @@ export class ProChannelService implements OnDestroy {
     protected modalService: OverlayModalService,
     protected sessionStorage: SessionsStorageService,
     protected router: Router,
-    protected site: SiteService,
+    protected site: SiteService
   ) {
     this.listen();
   }
@@ -72,38 +72,57 @@ export class ProChannelService implements OnDestroy {
     this.isLoggedIn$.unsubscribe();
   }
 
-  async load(id: string) {
+  async loadAndAuth(id: string) {
     try {
       this.currentChannel = void 0;
 
-      await this.reload(id);
+      const response = (await this.client.get(`api/v2/pro/channel/${id}`)) as {
+        channel;
+        me?;
+      };
+
+      this.currentChannel = response.channel;
+
+      if (this.site.isProDomain && response.me) {
+        this.session.login(response.me);
+      }
 
       if (!this.currentChannel.pro_settings.tag_list) {
         this.currentChannel.pro_settings.tag_list = [];
       }
 
+      this.onChannelChange.next(this.currentChannel);
+
       this.featuredContent = null;
 
       return this.currentChannel;
     } catch (e) {
       if (e.status === 0) {
-        throw new Error('Sorry, there was a timeout error.');
+        throw new Error('Network error');
       } else {
-        console.log("couldn't load channel", e);
-        throw new Error("Sorry, the channel couldn't be found");
+        throw new Error('Error loading channel');
       }
     }
   }
 
   async reload(id: string) {
-    const response: MindsChannelResponse = (await this.client.get(
-      `api/v1/channel/${id}`
-    )) as MindsChannelResponse;
+    try {
+      const response = (await this.client.get(`api/v2/pro/channel/${id}`)) as {
+        channel;
+        me?;
+      };
 
-    this.currentChannel = response.channel;
-    this.onChannelChange.next(this.currentChannel);
+      this.currentChannel = response.channel;
+      this.onChannelChange.next(this.currentChannel);
 
-    return this.currentChannel;
+      return this.currentChannel;
+    } catch (e) {
+      if (e.status === 0) {
+        throw new Error('Network error');
+      } else {
+        throw new Error('Error loading channel');
+      }
+    }
   }
 
   async getFeaturedContent(): Promise<Array<any>> {
@@ -291,25 +310,6 @@ export class ProChannelService implements OnDestroy {
     }
   }
 
-  async auth() {
-    if (!this.site.isProDomain) {
-      // Not in Pro domain mode, user already injected
-      return;
-    }
-
-    try {
-      const response = (await this.client.get('api/v1/channel/me')) as any;
-
-      if (response && response.channel) {
-        this.session.login(response.channel);
-      }
-    } catch (e) {
-      if (!e || e.message !== 'The user could not be found') {
-        console.error(e);
-      }
-    }
-  }
-
   wire() {
     // save into sessionStorage before doing the logged in check so the modal opens after logging in
     this.sessionStorage.set('pro::wire-modal::open', '1');

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

+<section class="m-ProChannelLogin--hero">
+  <div class="m-ProChannelLogin--hero--inner">
+    <div class="m-ProChannelLogin--hero--slogans">
+      <h2>{{ settings?.headline }}</h2>
+    </div>
+
+    <div class="m-ProChannelLogin--login">
+      <ng-container *ngIf="currentSection === 'login'">
+        <span class="m-proChannelLogin--subtext">
+          Not on {{ settings?.title }}?
+          <a (click)="currentSection = 'register'">Start a Minds channel</a>
+        </span>
+
+        <minds-form-login (done)="registered()"></minds-form-login>
+      </ng-container>
+
+      <ng-container *ngIf="currentSection === 'register'">
+        <span class="m-proChannelLogin--subtext">
+          <a (click)="currentSection = 'login'">
+            I already have a Minds account
+          </a>
+        </span>
+
+        <minds-form-register (done)="registered()"></minds-form-register>
+      </ng-container>
+    </div>
+  </div>
+</section>

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

@@ -7,36 +7,7 @@ import { Storage } from '../../../../services/storage';
 
 @Component({
   selector: 'm-pro--channel-login',
-  template: `
-    <section class="m-ProChannelLogin--hero">
-      <div class="m-ProChannelLogin--hero--inner">
-        <div class="m-ProChannelLogin--hero--slogans">
-          <h2>{{ settings?.headline }}</h2>
-        </div>
-
-        <div class="m-ProChannelLogin--login">
-          <ng-container *ngIf="currentSection === 'login'">
-            <span class="m-proChannelLogin--subtext">
-              Not on {{ settings?.title }}?
-              <a (click)="currentSection = 'register'">Start a Minds channel</a>
-            </span>
-
-            <minds-form-login (done)="registered()"></minds-form-login>
-          </ng-container>
-
-          <ng-container *ngIf="currentSection === 'register'">
-            <span class="m-proChannelLogin--subtext">
-              <a (click)="currentSection = 'login'">
-                I already have a Minds account
-              </a>
-            </span>
-
-            <minds-form-register (done)="registered()"></minds-form-register>
-          </ng-container>
-        </div>
-      </div>
-    </section>
-  `,
+  templateUrl: 'login.component.html',
 })
 export class ProChannelLoginComponent {
   username: string;

src/app/modules/pro/channel/tiles/group/group-tile.component.html

+<div class="banner">
+  <img [src]="getBanner()" />
+</div>
+<div class="m-proChannelGroupTile__content">
+  <div class="avatar">
+    <img [src]="getAvatar()" />
+  </div>
+  <div class="body">
+    <h2>{{ this.entity.name }}</h2>
+    <p i18n>
+      Subscribers: <span>{{ this.entity['members:count'] }}</span>
+    </p>
+  </div>
+</div>

src/app/modules/pro/channel/tiles/group/group-tile.component.ts

@@ -8,22 +8,7 @@ import {
 
 @Component({
   selector: 'm-pro--channel--group-tile',
-  template: `
-    <div class="banner">
-      <img [src]="getBanner()" />
-    </div>
-    <div class="m-proChannelGroupTile__content">
-      <div class="avatar">
-        <img [src]="getAvatar()" />
-      </div>
-      <div class="body">
-        <h2>{{ this.entity.name }}</h2>
-        <p i18n>
-          Subscribers: <span>{{ this.entity['members:count'] }}</span>
-        </p>
-      </div>
-    </div>
-  `,
+  templateUrl: 'group-tile.component.html',
 })
 export class ProGroupTileComponent {
   @Input() entity: any;