replace userId with username and give each data a color

src/Components/LogCard/index.js

@@ -4,15 +4,17 @@ import {
   ReloadOutlined,
 } from "@ant-design/icons";
 import { Card, Checkbox, Space, Spin, Tooltip } from "antd";
-import { useEffect, useState } from "react";
+import { createElement, useContext, useEffect, useState } from "react";
 import {
   Constants,
   FormatDatetime,
+  WebSocketContext,
   getUserSessionFromLocalStorage,
   handleUnauthorizedStatus,
 } from "../../utils";
 
 export default function LogCard({ type }) {
+  const webSocketContext = useContext(WebSocketContext);
   const [checkboxInfoChecked, setCheckboxInfoChecked] = useState(true);
   const [checkboxErrorChecked, setCheckboxErrorChecked] = useState(true);
 
@@ -30,6 +32,12 @@ export default function LogCard({ type }) {
     loadLogs(selectedDate);
   }, [selectedDate]);
 
+  const getColorCode = (index) => {
+    const colorCodes = ["#3498db", "#9b59b6", "#1abc9c"];
+    const colorIndex = index % colorCodes.length;
+    return colorCodes[colorIndex];
+  };
+
   const loadLogs = (date) => {
     setLoadingSpinner(true);
 
@@ -54,6 +62,63 @@ export default function LogCard({ type }) {
 
         if (data.Logs === null) {
           data.Logs = [];
+        } else {
+          for (let i = 0; i < data.Logs.length; i++) {
+            let items = [];
+            let splittedMessage = data.Logs[i].Message.split(" ");
+
+            for (let s = 0; s < splittedMessage.length; s++) {
+              if (splittedMessage[s].includes("%")) {
+                if (splittedMessage[s] === "%userId%") {
+                  const foundData = data.Logs[i].LogData.find(
+                    (data) => data.Type === "userId"
+                  );
+
+                  if (foundData !== undefined) {
+                    const foundUser = webSocketContext.AllUsers.find(
+                      (user) => user.Id === foundData.Value
+                    );
+
+                    if (foundUser !== undefined) {
+                      items.push(
+                        <span
+                          key={s}
+                          style={{ color: Constants.COLORS.PRIMARY }}
+                        >
+                          {foundUser.Username}{" "}
+                        </span>
+                      );
+                    } else {
+                      items.push(<span key={s}>{splittedMessage[s]} </span>);
+                    }
+                  } else {
+                    items.push(<span key={s}>{splittedMessage[s]} </span>);
+                  }
+                } else {
+                  const logDataIndex = data.Logs[i].LogData.findIndex(
+                    (data) =>
+                      data.Type ===
+                      splittedMessage[s].replace(new RegExp("%", "g"), "")
+                  );
+
+                  if (logDataIndex !== -1) {
+                    items.push(
+                      <span
+                        key={s}
+                        style={{ color: getColorCode(logDataIndex) }}
+                      >
+                        {data.Logs[i].LogData[logDataIndex].Value}{" "}
+                      </span>
+                    );
+                  }
+                }
+              } else {
+                items.push(<span key={s}>{splittedMessage[s]} </span>);
+              }
+            }
+
+            data.Logs[i].Message = items;
+          }
         }
 
         setLogData(data);