Fix stats anchor link

client/src/app/+about/about-instance/about-instance.component.html

@@ -210,6 +210,7 @@
 
   <div class="col" myPluginSelector pluginSelectorId="about-instance-statistics">
     <div class="anchor" id="statistics"></div>
+
     <a
       class="anchor-link"
       routerLink="/about/instance"
@@ -218,7 +219,8 @@
       (click)="onClickCopyLink(anchorLink)">
       <h2 i18n class="middle-title">STATISTICS</h2>
     </a>
-    <my-instance-statistics></my-instance-statistics>
+
+    <my-instance-statistics [serverStats]="serverStats"></my-instance-statistics>
   </div>
 </div>
 

client/src/app/+about/about-instance/about-instance.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute } from '@angular/router'
 import { Notifier, ServerService } from '@app/core'
 import { AboutHTML } from '@app/shared/shared-instance'
 import { copyToClipboard } from '@root-helpers/utils'
-import { HTMLServerConfig } from '@shared/models/server'
+import { HTMLServerConfig, ServerStats } from '@shared/models/server'
 import { ResolverData } from './about-instance.resolver'
 import { ContactAdminModalComponent } from './contact-admin-modal.component'
 
@@ -26,6 +26,8 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
 
   initialized = false
 
+  serverStats: ServerStats
+
   private serverConfig: HTMLServerConfig
 
   private lastScrollHash: string
@@ -50,7 +52,9 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   }
 
   ngOnInit () {
-    const { about, languages, categories, aboutHTML, descriptionElement }: ResolverData = this.route.snapshot.data.instanceData
+    const { about, languages, categories, aboutHTML, descriptionElement, serverStats }: ResolverData = this.route.snapshot.data.instanceData
+
+    this.serverStats = serverStats
 
     this.aboutHTML = aboutHTML
     this.descriptionElement = descriptionElement

client/src/app/+about/about-instance/about-instance.resolver.ts

@@ -1,12 +1,14 @@
-import { forkJoin } from 'rxjs'
+import { forkJoin, Observable } from 'rxjs'
 import { map, switchMap } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
 import { Resolve } from '@angular/router'
+import { ServerService } from '@app/core'
 import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { AboutHTML, InstanceService } from '@app/shared/shared-instance'
-import { About } from '@shared/models/server'
+import { About, ServerStats } from '@shared/models/server'
 
 export type ResolverData = {
+  serverStats: ServerStats
   about: About
   languages: string[]
   categories: string[]
@@ -19,25 +21,47 @@ export class AboutInstanceResolver implements Resolve<any> {
 
   constructor (
     private instanceService: InstanceService,
-    private customMarkupService: CustomMarkupService
-
+    private customMarkupService: CustomMarkupService,
+    private serverService: ServerService
   ) {}
 
-  resolve () {
+  resolve (): Observable<ResolverData> {
+    return forkJoin([
+      this.buildInstanceAboutObservable(),
+      this.buildInstanceStatsObservable()
+    ]).pipe(
+      map(([
+        [ about, languages, categories, aboutHTML, { rootElement } ],
+        serverStats
+      ]) => {
+        return {
+          serverStats,
+          about,
+          languages,
+          categories,
+          aboutHTML,
+          descriptionElement: rootElement
+        }
+      })
+    )
+  }
+
+  private buildInstanceAboutObservable () {
     return this.instanceService.getAbout()
-               .pipe(
-                 switchMap(about => {
-                   return forkJoin([
-                     Promise.resolve(about),
-                     this.instanceService.buildTranslatedLanguages(about),
-                     this.instanceService.buildTranslatedCategories(about),
-                     this.instanceService.buildHtml(about),
-                     this.customMarkupService.buildElement(about.instance.description)
-                   ])
-                 }),
-                 map(([ about, languages, categories, aboutHTML, { rootElement } ]) => {
-                   return { about, languages, categories, aboutHTML, descriptionElement: rootElement } as ResolverData
-                 })
-               )
+      .pipe(
+        switchMap(about => {
+          return forkJoin([
+            Promise.resolve(about),
+            this.instanceService.buildTranslatedLanguages(about),
+            this.instanceService.buildTranslatedCategories(about),
+            this.instanceService.buildHtml(about),
+            this.customMarkupService.buildElement(about.instance.description)
+          ])
+        })
+      )
+  }
+
+  private buildInstanceStatsObservable () {
+    return this.serverService.getServerStats()
   }
 }

client/src/app/+about/about-instance/instance-statistics.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { ServerStats } from '@shared/models/server'
+
+@Component({
+  selector: 'my-instance-statistics',
+  templateUrl: './instance-statistics.component.html',
+  styleUrls: [ './instance-statistics.component.scss' ]
+})
+export class InstanceStatisticsComponent {
+  @Input() serverStats: ServerStats
+}

client/src/app/+about/about.module.ts

@@ -3,6 +3,7 @@ import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.c
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
+import { InstanceStatisticsComponent } from '@app/+about/about-instance/instance-statistics.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { SharedCustomMarkupModule } from '@app/shared/shared-custom-markup'
 import { SharedFormModule } from '@app/shared/shared-forms'
@@ -25,10 +26,13 @@ import { AboutComponent } from './about.component'
 
   declarations: [
     AboutComponent,
+
     AboutInstanceComponent,
+    ContactAdminModalComponent,
+    InstanceStatisticsComponent,
+
     AboutPeertubeComponent,
-    AboutFollowsComponent,
-    ContactAdminModalComponent
+    AboutFollowsComponent
   ],
 
   exports: [

client/src/app/shared/shared-instance/index.ts

@@ -2,6 +2,5 @@ export * from './feature-boolean.component'
 export * from './instance-about-accordion.component'
 export * from './instance-features-table.component'
 export * from './instance-follow.service'
-export * from './instance-statistics.component'
 export * from './instance.service'
 export * from './shared-instance.module'

client/src/app/shared/shared-instance/instance-statistics.component.ts

@@ -1,24 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-import { ServerStats } from '@shared/models/server'
-import { ServerService } from '@app/core'
-
-@Component({
-  selector: 'my-instance-statistics',
-  templateUrl: './instance-statistics.component.html',
-  styleUrls: [ './instance-statistics.component.scss' ]
-})
-export class InstanceStatisticsComponent implements OnInit {
-  serverStats: ServerStats = null
-
-  constructor (
-    private serverService: ServerService
-  ) {
-  }
-
-  ngOnInit () {
-    this.serverService.getServerStats()
-        .subscribe(res => {
-          this.serverStats = res
-        })
-  }
-}

client/src/app/shared/shared-instance/shared-instance.module.ts

@@ -1,4 +1,3 @@
-
 import { NgModule } from '@angular/core'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { SharedGlobalIconModule } from '../shared-icons'
@@ -7,7 +6,6 @@ import { FeatureBooleanComponent } from './feature-boolean.component'
 import { InstanceAboutAccordionComponent } from './instance-about-accordion.component'
 import { InstanceFeaturesTableComponent } from './instance-features-table.component'
 import { InstanceFollowService } from './instance-follow.service'
-import { InstanceStatisticsComponent } from './instance-statistics.component'
 import { InstanceService } from './instance.service'
 
 @NgModule({
@@ -20,15 +18,13 @@ import { InstanceService } from './instance.service'
   declarations: [
     FeatureBooleanComponent,
     InstanceAboutAccordionComponent,
-    InstanceFeaturesTableComponent,
-    InstanceStatisticsComponent
+    InstanceFeaturesTableComponent
   ],
 
   exports: [
     FeatureBooleanComponent,
     InstanceAboutAccordionComponent,
-    InstanceFeaturesTableComponent,
-    InstanceStatisticsComponent
+    InstanceFeaturesTableComponent
   ],
 
   providers: [