dashboard bekommt last20Messages und Baugruppenträger Daten von Redux Store

components/Header.jsx

@@ -3,10 +3,10 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import SettingsModal from "./modales/SettingsModal";
-import { getFromIndexedDB, initializeDatabase } from "../utils/indexedDB"; // Importiere initializeDatabase
+import { useSelector } from "react-redux";
 
 function Header() {
-  const [stationsname, setStationsname] = useState("Lädt...");
+  const deviceName = useSelector((state) => state.variables.deviceName);
   const [cplStatus, setCplStatus] = useState("Lädt...");
   const [showSettingsModal, setShowSettingsModal] = useState(false);
 
@@ -14,32 +14,6 @@ function Header() {
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
   const handleLogout = () => (window.location.href = "/offline.html");
 
-  //------------------------------------------------------------------
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        // Versuche die Daten zu laden
-        const deviceName = await getFromIndexedDB("deviceName");
-        const hardwareVersion = await getFromIndexedDB("kueVersion");
-
-        setStationsname(deviceName || "Unbekannt");
-        setCplStatus(hardwareVersion || "Unbekannt");
-      } catch (error) {
-        console.error("Fehler beim Laden der Daten aus IndexedDB:", error);
-
-        // Initialisiere die Datenbankstruktur, falls sie fehlt
-        await initializeDatabase();
-      }
-    };
-
-    loadData();
-    const interval = setInterval(() => {
-      loadData();
-    }, 5000);
-
-    return () => clearInterval(interval);
-  }, []);
-
   //------------------------------------------------------------------
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
@@ -58,7 +32,7 @@ function Header() {
       <div className="flex items-start space-x-4 w-full">
         <div className="flex flex-col text-left pl-8">
           <h2 className="text-base">Stationsname</h2>
-          <p className="text-base text-gray-600">{stationsname}</p>
+          <p className="text-base text-gray-600">{deviceName}</p>
         </div>
       </div>
       <div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">