last20Messages von Redux bekommen, so wird Übergabparameter und props nicht brauchen

components/main/uebersicht/Last20MessagesTable.tsx

@@ -1,13 +1,35 @@
 "use client";
 import React from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
 
-interface Last20MessagesTableProps {
-  last20Messages: string[][];
-}
+const Last20MessagesTable: React.FC = () => {
+  const rawLast20Messages = useSelector(
+    (state: RootState) => state.variables.last20Messages
+  );
+
+  // Hilfsfunktion zum Parsen der Nachrichten
+  const parseMessages = (messages: string | null) => {
+    if (typeof messages === "string") {
+      messages = messages
+        .replace(/<tr>/g, "\n")
+        .replace(/<\/?td>/g, "")
+        .replace(/<\/tr>/g, "")
+        .trim();
+      const rows = messages.split("\n");
+      return rows.map((row) => [
+        row.substring(0, 5),
+        row.substring(5, 10),
+        row.substring(10, 29),
+        row.substring(33, row.length - 1),
+        row.substring(row.length - 1),
+      ]);
+    }
+    return [];
+  };
+
+  const last20Messages = parseMessages(rawLast20Messages);
 
-const Last20MessagesTable: React.FC<Last20MessagesTableProps> = ({
-  last20Messages,
-}) => {
   return (
     <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex ">
       <table className="min-w-full border border-gray-200 text-left table-fixed ">