Optimize emoji markup list

client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html

@@ -88,8 +88,8 @@
   </div>
   <div class="modal-body">
     <div class="emoji-flex">
-      <div class="emoji-flex-item" *ngFor="let emojiMarkup of emojiMarkupList">
+      <div class="emoji-flex-item" *ngFor="let emojiMarkup of getEmojiMarkupList()">
-        {{ emojiMarkup[0] }} <code>:{{ emojiMarkup[1] }}:</code>
+        {{ emojiMarkup.emoji }} <code>:{{ emojiMarkup.name }}:</code>
       </div>
     </div>
   </div>

client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.ts

@@ -45,6 +45,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
   addingComment = false
   addingCommentButtonValue: string
 
+  private emojiMarkupList: { emoji: string, name: string }[]
+
   constructor (
     protected formValidatorService: FormValidatorService,
     private notifier: Notifier,
@@ -56,22 +58,6 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     super()
   }
 
-  get emojiMarkupList () {
-    console.log('hi')
-    const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
-
-    // Populate emoji-markup-list from object to array to avoid keys alphabetical order
-    const emojiMarkupArrayList = []
-    for (const emojiMarkupName in emojiMarkupObjectList) {
-      if (emojiMarkupName) {
-        const emoji = emojiMarkupObjectList[emojiMarkupName]
-        emojiMarkupArrayList.push([ emoji, emojiMarkupName ])
-      }
-    }
-
-    return emojiMarkupArrayList
-  }
-
   ngOnInit () {
     this.buildForm({
       text: VIDEO_COMMENT_TEXT_VALIDATOR
@@ -97,6 +83,20 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     }
   }
 
+  getEmojiMarkupList () {
+    if (this.emojiMarkupList) return this.emojiMarkupList
+
+    const emojiMarkupObjectList = require('markdown-it-emoji/lib/data/light.json')
+
+    this.emojiMarkupList = []
+    for (const name of Object.keys(emojiMarkupObjectList)) {
+      const emoji = emojiMarkupObjectList[name]
+      this.emojiMarkupList.push({ emoji, name })
+    }
+
+    return this.emojiMarkupList
+  }
+
   onValidKey () {
     this.forceCheck()
     if (!this.form.valid) return