fix(client/AbuseDetails): infinite update loop (#5109)

* fix(client/AbuseDetails): infinite update loop

* Abuse may not have predefined reasons

Co-authored-by: Chocobozzz <me@florianbigard.com>

2 files changed, 15 insertions, 15 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index fdf700f7c..089be501d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -60,10 +60,9 @@
       <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
     </div>
 
-    <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex">
-      <span class="></span>
-      <span class=">
-        <a *ngFor="let reason of getPredefinedReasons()"  [routerLink]="[ '.' ]"
+    <div *ngIf="predefinedReasons" class="mt-2 d-flex">
+      <span>
+        <a *ngFor="let reason of predefinedReasons"  [routerLink]="[ '.' ]"
           [queryParams]="{ 'search': 'tag:' + reason.id  }" class="chip rectangular bg-secondary text-light"
         >
           <div>{{ reason.label }}</div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
index 14674c5f0..e15edf8c2 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, Input, OnInit } from '@angular/core'
 import { durationToString } from '@app/helpers'
 import { AbusePredefinedReasonsString } from '@shared/models'
 import { ProcessedAbuse } from './processed-abuse.model'
@@ -8,10 +8,11 @@ import { ProcessedAbuse } from './processed-abuse.model'
   templateUrl: './abuse-details.component.html',
   styleUrls: [ '../shared-moderation/moderation.scss', './abuse-details.component.scss' ]
 })
-export class AbuseDetailsComponent {
+export class AbuseDetailsComponent implements OnInit {
   @Input() abuse: ProcessedAbuse
   @Input() isAdminView: boolean
 
+  predefinedReasons: { id: string, label: string }[]
   private predefinedReasonsTranslations: { [key in AbusePredefinedReasonsString]: string }
 
   constructor () {
@@ -27,6 +28,15 @@ export class AbuseDetailsComponent {
     }
   }
 
+  ngOnInit (): void {
+    if (!this.abuse.predefinedReasons) return
+
+    this.predefinedReasons = this.abuse.predefinedReasons.map(r => ({
+      id: r,
+      label: this.predefinedReasonsTranslations[r]
+    }))
+  }
+
   get startAt () {
     return durationToString(this.abuse.video.startAt)
   }
@@ -34,13 +44,4 @@ export class AbuseDetailsComponent {
   get endAt () {
     return durationToString(this.abuse.video.endAt)
   }
-
-  getPredefinedReasons () {
-    if (!this.abuse.predefinedReasons) return []
-
-    return this.abuse.predefinedReasons.map(r => ({
-      id: r,
-      label: this.predefinedReasonsTranslations[r]
-    }))
-  }
 }