fix next line

src/Components/LogCard/index.js

@@ -119,6 +119,56 @@ export default function LogCard({
     }
   }, [type, selectedDate]);
 
+  // {t: "D", m: []}
+  // if type of next log is equal to the type of the last log, then add it to the last log otherwise create a new log
+  const testLogs = () => {
+    const result = [];
+
+    let lastLogType = "";
+
+    logs.forEach((log) => {
+      const logType = log.charAt(0);
+
+      if (
+        logType === "I" ||
+        logType === "D" ||
+        logType === "W" ||
+        logType === "E"
+      ) {
+        lastLogType = logType;
+      } else if (log.match(/(\d{2}:\d{2}:\d{2})/)) {
+        // check if log starts with time
+        lastLogType = "404";
+        log = "[TYPE NOT PROVIDED] " + log;
+      }
+
+      if (result.length === 0) {
+        result.push({ t: lastLogType, m: [log] });
+      } else {
+        if (lastLogType === result[result.length - 1].t) {
+          result[result.length - 1].m.push(log);
+        } else {
+          result.push({ t: lastLogType, m: [log] });
+        }
+      }
+    });
+
+    // condition check for filtering
+
+    const filteredResult = result.filter((log) => {
+      return (
+        (checkboxInfoChecked && log.t === "I") ||
+        (checkboxDebugChecked && log.t === "D") ||
+        (checkboxWarningChecked && log.t === "W") ||
+        (checkboxErrorChecked && log.t === "E") ||
+        log.t === "404"
+      );
+    });
+
+    return filteredResult;
+  };
+
+  /*
   const filteredLogs = logs.filter((log) => {
     const logType = log.charAt(0);
 
@@ -138,7 +188,9 @@ export default function LogCard({
       (checkboxWarningChecked && logType === "W") ||
       (checkboxErrorChecked && logType === "E")
     );
-  });
+  }); */
+
+  let lastLogType = "";
 
   return (
     <Card
@@ -214,19 +266,96 @@ export default function LogCard({
               <Virtuoso
                 ref={virtuosoRef}
                 initialTopMostItemIndex={logs.length - 1}
-                data={filteredLogs}
+                data={testLogs()}
-                itemContent={(_, log) => {
+                itemContent={(_, logData) => {
+                  let items = [];
+
+                  for (let i = 0; i < logData.m.length; i++) {
+                    const logType = logData.t;
+
+                    let style = {};
+                    let color = "";
+
+                    if (
+                      logType === "I" ||
+                      logType === "D" ||
+                      logType === "W" ||
+                      logType === "E"
+                    ) {
+                      lastLogType = logType;
+                    }
+
+                    if (
+                      checkboxInfoChecked &&
+                      lastLogType === "I" &&
+                      logType === "I"
+                    ) {
+                      color = "#44bd32";
+                    }
+
+                    if (
+                      checkboxDebugChecked &&
+                      lastLogType === "D" &&
+                      logType === "D"
+                    ) {
+                      color = "#9b59b6";
+                    }
+
+                    if (
+                      checkboxWarningChecked &&
+                      lastLogType === "W" &&
+                      logType === "W"
+                    ) {
+                      color = "#e67e22";
+                    }
+
+                    if (
+                      (checkboxErrorChecked &&
+                        lastLogType === "E" &&
+                        logType === "E") ||
+                      logType === "404"
+                    ) {
+                      color = "#e74c3c";
+                    }
+
+                    if (color === "") {
+                      color = "#2980b9"; // no match
+                    }
+
+                    style = { padding: "1px", color, whiteSpace: "pre-line" };
+
+                    items.push(
+                      <div key={i}>
+                        <span style={style}>{logData.m[i]}</span>
+                        <br />
+                      </div>
+                    );
+                  }
+
+                  return items;
+                }}
+                // data={filteredLogs}
+                /*itemContent={(_, log) => {
                   const logType = log.charAt(0);
                   let style = {};
                   let color = "";
 
-                  if (checkboxInfoChecked && logType === "I") {
+                  if (
+                    logType === "I" ||
+                    logType === "D" ||
+                    logType === "W" ||
+                    logType === "E"
+                  ) {
+                    lastLogType = logType;
+                  }
+
+                  if (checkboxInfoChecked && lastLogType === "I") {
                     color = "#44bd32";
-                  } else if (checkboxDebugChecked && logType === "D") {
+                  } else if (checkboxDebugChecked && lastLogType === "D") {
                     color = "#9b59b6";
-                  } else if (checkboxWarningChecked && logType === "W") {
+                  } else if (checkboxWarningChecked && lastLogType === "W") {
                     color = "#e67e22";
-                  } else if (checkboxErrorChecked && logType === "E") {
+                  } else if (checkboxErrorChecked && lastLogType === "E") {
                     color = "#e74c3c";
                   } else {
                     color = "#2980b9"; // no match
@@ -235,7 +364,7 @@ export default function LogCard({
                   style = { padding: "1px", color, whiteSpace: "pre-line" };
 
                   return <span style={style}>{log}</span>;
-                }}
+                }}*/
                 followOutput={true}
               />
             </div>