Use console-feed duplicate message capabilities and remove custom solution

Author: catarak

client/modules/IDE/components/Console.jsx

@@ -8,7 +8,6 @@ import { useSelector, useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import { Console as ConsoleFeed } from 'console-feed';
 import {
-  CONSOLE_FEED_WITHOUT_ICONS,
   CONSOLE_FEED_LIGHT_STYLES,
   CONSOLE_FEED_DARK_STYLES,
   CONSOLE_FEED_CONTRAST_STYLES
@@ -43,7 +42,7 @@ import { useDidUpdate } from '../hooks/custom-hooks';
 import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
 import { listen } from '../../../utils/dispatcher';
 
-const getConsoleFeedStyle = (theme, times, fontSize) => {
+const getConsoleFeedStyle = (theme, fontSize) => {
   const style = {
     BASE_FONT_FAMILY: 'Inconsolata, monospace'
   };
@@ -73,15 +72,12 @@ const getConsoleFeedStyle = (theme, times, fontSize) => {
   };
   const CONSOLE_FEED_SIZES = {
     TREENODE_LINE_HEIGHT: 1.2,
-    BASE_FONT_SIZE: fontSize,
-    ARROW_FONT_SIZE: fontSize,
-    LOG_ICON_WIDTH: fontSize,
-    LOG_ICON_HEIGHT: 1.45 * fontSize
+    BASE_FONT_SIZE: `${fontSize}px`,
+    ARROW_FONT_SIZE: `${fontSize}px`,
+    LOG_ICON_WIDTH: `${fontSize}px`,
+    LOG_ICON_HEIGHT: `${1.45 * fontSize}px`
   };
 
-  if (times > 1) {
-    Object.assign(style, CONSOLE_FEED_WITHOUT_ICONS);
-  }
   switch (theme) {
     case 'light':
       return Object.assign(
@@ -114,24 +110,6 @@ const Console = ({ t }) => {
   const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
   const isPlaying = useSelector((state) => state.ide.isPlaying);
   const { theme, fontSize } = useSelector((state) => state.preferences);
-  const dataCompare = (data1, data2) => {
-    if (data1.length !== data2.length) {
-      return false;
-    }
-    for (let i = 0; i < data1.length; i += 1) {
-      if (data1[i] !== data2[i]) {
-        return false;
-      }
-    }
-    return true;
-  };
-  for (let i = 1; i < consoleEvents.length; i += 1) {
-    if (dataCompare(consoleEvents[i].data, consoleEvents[i - 1].data)) {
-      consoleEvents[i - 1].times += consoleEvents[i].times;
-      consoleEvents.splice(i, 1);
-      i -= 1;
-    }
-  }
   const {
     collapseConsole,
     expandConsole,
@@ -187,30 +165,16 @@ const Console = ({ t }) => {
         </div>
       </header>
       <div className="preview-console__body">
-        <div ref={cm} className="preview-console__messages">
-          {consoleEvents.map((consoleEvent) => {
-            const { method, times } = consoleEvent;
-            return (
-              <div
-                key={consoleEvent.id}
-                className={`preview-console__message preview-console__message--${method}`}
-              >
-                {times > 1 && (
-                  <div
-                    className="preview-console__logged-times"
-                    style={{ fontSize, borderRadius: fontSize / 2 }}
-                  >
-                    {times}
-                  </div>
-                )}
-                <ConsoleFeed
-                  styles={getConsoleFeedStyle(theme, times, fontSize)}
-                  logs={[consoleEvent]}
-                  key={`${consoleEvent.id}-${theme}-${fontSize}`}
-                />
-              </div>
-            );
-          })}
+        <div
+          ref={cm}
+          className="preview-console__messages"
+          style={{ fontSize }}
+        >
+          <ConsoleFeed
+            styles={getConsoleFeedStyle(theme, fontSize)}
+            logs={consoleEvents}
+            key={`${theme}-${fontSize}`}
+          />
         </div>
         {isExpanded && isPlaying && (
           <ConsoleInput

client/modules/IDE/hooks/useHandleMessageEvent.js

@@ -1,6 +1,5 @@
 import { useDispatch } from 'react-redux';
 import { Decode } from 'console-feed';
-import { isEqual } from 'lodash';
 import { dispatchConsoleEvent } from '../actions/console';
 import { stopSketch, expandConsole } from '../actions/ide';
 
@@ -27,23 +26,6 @@ export default function useHandleMessageEvent() {
         if (hasInfiniteLoop) {
           return false;
         }
-        if (index === arr.length - 1) {
-          Object.assign(message, { times: 1 });
-          return false;
-        }
-        // this should be done in the reducer probs
-        const cur = Object.assign(message, { times: 1 });
-        const nextIndex = index + 1;
-        while (
-          isEqual(cur.data, arr[nextIndex].data) &&
-          cur.method === arr[nextIndex].method
-        ) {
-          cur.times += 1;
-          arr.splice(nextIndex, 1);
-          if (nextIndex === arr.length) {
-            return false;
-          }
-        }
         return true;
       });
       dispatch(dispatchConsoleEvent(decodedMessages));

client/modules/IDE/reducers/console.js

@@ -1,6 +1,6 @@
 import * as ActionTypes from '../../../constants';
 
-const consoleMax = 500;
+const consoleMax = 5000;
 const initialState = [];
 
 const console = (state = initialState, action) => {

client/styles/components/_console-feed.scss

@@ -27,6 +27,11 @@ $CONSOLE_FEED_LIGHT_STYLES: (
   OBJECT_VALUE_NUMBER_COLOR: '#333',
   OBJECT_VALUE_BOOLEAN_COLOR: '#D52889',
   OBJECT_VALUE_FUNCTION_KEYWORD_COLOR: '#0B7CA9',
+  LOG_AMOUNT_BACKGROUND: '#5276B7',
+  LOG_AMOUNT_COLOR: '#FFF',
+  LOG_WARN_AMOUNT_BACKGROUND: '#996B00',
+  LOG_ERROR_AMOUNT_BACKGROUND: '#D11518',
+  LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD'
 );
 
 $CONSOLE_FEED_DARK_STYLES: (
@@ -57,7 +62,12 @@ $CONSOLE_FEED_DARK_STYLES: (
   TABLE_SORT_ICON_COLOR: 'grey',
   TABLE_DATA_BACKGROUND_IMAGE: 'grey',
   TABLE_DATA_BACKGROUND_SIZE: 'grey',
-  ARROW_COLOR: '#D9D9D9'
+  ARROW_COLOR: '#D9D9D9',
+  LOG_AMOUNT_BACKGROUND: '#5276B7',
+  LOG_AMOUNT_COLOR: '#333',
+  LOG_WARN_AMOUNT_BACKGROUND: '#996B00',
+  LOG_ERROR_AMOUNT_BACKGROUND: '#D11518',
+  LOG_DEBUG_AMOUNT_BACKGROUND: '#0071AD'
 );
 
 $CONSOLE_FEED_CONTRAST_STYLES: (
@@ -88,5 +98,10 @@ $CONSOLE_FEED_CONTRAST_STYLES: (
   TABLE_SORT_ICON_COLOR: 'grey',
   TABLE_DATA_BACKGROUND_IMAGE: 'grey',
   TABLE_DATA_BACKGROUND_SIZE: 'grey',
-  ARROW_COLOR: '#D9D9D9'
+  ARROW_COLOR: '#D9D9D9',
+  LOG_AMOUNT_BACKGROUND: '#5276B7',
+  LOG_AMOUNT_COLOR: '#333',
+  LOG_WARN_AMOUNT_BACKGROUND: '#966C08',
+  LOG_ERROR_AMOUNT_BACKGROUND: '#DD3134',
+  LOG_DEBUG_AMOUNT_BACKGROUND: '#097BB3'
 );

client/styles/components/_console.scss

@@ -43,6 +43,11 @@
 	flex: 1;
 	flex-direction: column;
 	overflow-y: auto;
+	& div div div:first-child {
+		height: unset;
+    line-height: unset;
+		font-size: unset;
+	}
 }
 
 .preview-console__collapse {
@@ -97,47 +102,8 @@
 	}
 }
 
-.preview-console__logged-times {
-
-	font-weight: bold;
-	margin: #{2 / $base-font-size}rem 0 0 #{8 / $base-font-size}rem;
-	border-radius: #{10 / $base-font-size}rem;
-	padding: #{1 / $base-font-size}rem #{4 / $base-font-size}rem;
-	z-index: 100;
-	left: 0;
-	position: absolute;
-
-	.preview-console__message--info &, .preview-console__message--log & {
-		@include themify() {
-			background-color: getThemifyVariable('console-info-background-color');
-		}
-	}
-	.preview-console__message--warn & {
-		@include themify() {
-			background-color: getThemifyVariable('console-warn-background-color');
-		}
-	}
-	.preview-console__message--debug & {
-		@include themify() {
-			background-color: getThemifyVariable('console-debug-background-color');
-		}
-	}
-	.preview-console__message--error & {
-		@include themify() {
-			background-color: getThemifyVariable('console-error-background-color');
-		}
-	}
-}
-
 .preview-console__body {
 	display: flex;
 	flex-direction: column;
 	height: calc(100% - #{30 / $base-font-size}rem);
-
-	.preview-console__message {
-		position: relative;
-		@include themify() {
-			color: getThemifyVariable('console-logged-times-color');
-		}
-	}
 }