From 00f483261a5fad07a4192bd52080cedd86d2c624 Mon Sep 17 00:00:00 2001
From: Dung Tuan Nguyen <ntddebugger@gmail.com>
Date: Sat, 24 Apr 2021 06:10:41 +0700
Subject: [PATCH] fix: add custom unique id to each console message

---
 frontend/package-lock.json   | 13 +++++++++++++
 frontend/package.json        |  1 +
 frontend/src/OutputPanel.tsx |  8 +++++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4f21de9..833187b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -4081,6 +4081,11 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "nanoid": {
+      "version": "3.1.22",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
+      "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -5503,6 +5508,14 @@
       "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "string-width": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c4dfb19..0a32956 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
     "get-own-enumerable-property-symbols": "^3.0.0",
     "lodash": "^4.17.19",
     "monaco-editor": "^0.13.1",
+    "nanoid": "^3.1.22",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-google-login": "^3.2.1",
diff --git a/frontend/src/OutputPanel.tsx b/frontend/src/OutputPanel.tsx
index 23a61af..bae134a 100644
--- a/frontend/src/OutputPanel.tsx
+++ b/frontend/src/OutputPanel.tsx
@@ -8,6 +8,7 @@ import * as monacoEditor from 'monaco-editor';
 import RightArrowIcon from '@material-ui/icons/KeyboardArrowRight';
 
 import { Console } from 'console-feed';
+import { nanoid } from 'nanoid';
 import { inspectorTheme } from './static/styles/consoleStyle';
 import 'static/styles/Scrollbar.css';
 import { Sandbox } from './sandbox';
@@ -153,7 +154,12 @@ class OutputPanel extends React.Component<Props, State> {
     /** Appends a message to the log. Bounds scrollback to 100 items. */
     appendLogMessage(message: Message | { method: 'command' | 'result' | 'error', data: any }) {
         this.setState((prevState) => {
-            let newLog = [...prevState.logs, message as Message];
+            const messageView = message as Message;
+            /** Get a unique ID for each message. Solve React rendering issue */
+            /** Ignore is needed due to the fact that the maintainer of console-feed ignore id in Message defintion */
+            // @ts-ignore
+            messageView.id = nanoid(7);
+            let newLog = [...prevState.logs, messageView];
             if (newLog.length > 100) {
                 newLog = newLog.slice(newLog.length - 100);
             }