fix: add custom unique id to each console message

nuprl · Apr 24, 2021 · d07b2da · d07b2da
1 parent 5bb6ba2
commit d07b2da
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -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);
             }