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>

1 files changed, 12 insertions, 11 deletions

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]
-    }))
-  }
 }