diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts index 87beb13da..c8c156105 100644 --- a/client/src/app/+about/about-instance/about-instance.component.ts +++ b/client/src/app/+about/about-instance/about-instance.component.ts @@ -1,12 +1,10 @@ import { Component, OnInit, ViewChild } from '@angular/core' import { Notifier, ServerService } from '@app/core' -import { I18n } from '@ngx-translate/i18n-polyfill' import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' import { InstanceService } from '@app/shared/instance/instance.service' -import { MarkdownService } from '@app/shared/renderer' -import { forkJoin } from 'rxjs' -import { map, switchMap } from 'rxjs/operators' import { ServerConfig } from '@shared/models' +import { ActivatedRoute } from '@angular/router' +import { ResolverData } from './about-instance.resolver' @Component({ selector: 'my-about-instance', @@ -37,11 +35,10 @@ export class AboutInstanceComponent implements OnInit { serverConfig: ServerConfig constructor ( + private route: ActivatedRoute, private notifier: Notifier, private serverService: ServerService, - private instanceService: InstanceService, - private markdownService: MarkdownService, - private i18n: I18n + private instanceService: InstanceService ) {} get instanceName () { @@ -56,35 +53,23 @@ export class AboutInstanceComponent implements OnInit { return this.serverConfig.instance.isNSFW } - ngOnInit () { + async ngOnInit () { this.serverConfig = this.serverService.getTmpConfig() this.serverService.getConfig() .subscribe(config => this.serverConfig = config) - this.instanceService.getAbout() - .pipe( - switchMap(about => { - return forkJoin([ - this.instanceService.buildTranslatedLanguages(about), - this.instanceService.buildTranslatedCategories(about) - ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories }))) - }) - ).subscribe( - async ({ about, languages, categories }) => { - this.languages = languages - this.categories = categories + const { about, languages, categories }: ResolverData = this.route.snapshot.data.instanceData - this.shortDescription = about.instance.shortDescription + this.languages = languages + this.categories = categories - this.creationReason = about.instance.creationReason - this.maintenanceLifetime = about.instance.maintenanceLifetime - this.businessModel = about.instance.businessModel + this.shortDescription = about.instance.shortDescription - this.html = await this.instanceService.buildHtml(about) - }, + this.creationReason = about.instance.creationReason + this.maintenanceLifetime = about.instance.maintenanceLifetime + this.businessModel = about.instance.businessModel - () => this.notifier.error(this.i18n('Cannot get about information from server')) - ) + this.html = await this.instanceService.buildHtml(about) } openContactModal () { diff --git a/client/src/app/+about/about-instance/about-instance.resolver.ts b/client/src/app/+about/about-instance/about-instance.resolver.ts new file mode 100644 index 000000000..94c6abe5a --- /dev/null +++ b/client/src/app/+about/about-instance/about-instance.resolver.ts @@ -0,0 +1,27 @@ +import { Injectable } from '@angular/core' +import { ActivatedRouteSnapshot, Resolve } from '@angular/router' +import { map, switchMap } from 'rxjs/operators' +import { forkJoin } from 'rxjs' +import { InstanceService } from '@app/shared/instance/instance.service' +import { About } from '@shared/models/server' + +export type ResolverData = { about: About, languages: string[], categories: string[] } + +@Injectable() +export class AboutInstanceResolver implements Resolve { + constructor ( + private instanceService: InstanceService + ) {} + + resolve (route: ActivatedRouteSnapshot) { + return this.instanceService.getAbout() + .pipe( + switchMap(about => { + return forkJoin([ + this.instanceService.buildTranslatedLanguages(about), + this.instanceService.buildTranslatedCategories(about) + ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories }))) + }) + ) + } +} diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts index 33e5070cb..91ccb846f 100644 --- a/client/src/app/+about/about-routing.module.ts +++ b/client/src/app/+about/about-routing.module.ts @@ -5,6 +5,7 @@ import { AboutComponent } from './about.component' import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component' import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component' import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component' +import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver' const aboutRoutes: Routes = [ { @@ -24,6 +25,9 @@ const aboutRoutes: Routes = [ meta: { title: 'About this instance' } + }, + resolve: { + instanceData: AboutInstanceResolver } }, { diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts index 14bf76e55..84d697540 100644 --- a/client/src/app/+about/about.module.ts +++ b/client/src/app/+about/about.module.ts @@ -7,6 +7,7 @@ import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertub import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component' import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component' +import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver' @NgModule({ imports: [ @@ -28,6 +29,7 @@ import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/a ], providers: [ + AboutInstanceResolver ] }) export class AboutModule { }