diff --git a/ui/src/hooks/useWebsocket.tsx b/ui/src/hooks/useWebsocket.tsx index 699f580..1a95236 100644 --- a/ui/src/hooks/useWebsocket.tsx +++ b/ui/src/hooks/useWebsocket.tsx @@ -1,11 +1,14 @@ import type { WebsocketStatus } from "@/components/ConnectionStatus"; import type { StatusMessage } from "@/services/types"; +import { getLastMessage, setLastMessage } from "@/services/store"; import { initializeConnection } from "@/services/websocket"; import { useEffect, useState } from "react"; export function useWebsocket(url: string) { const [status, setStatus] = useState(); - const [message, setMessage] = useState(); + const [message, setMessage] = useState( + getLastMessage(), + ); useEffect(() => { initializeConnection(url, { @@ -14,6 +17,7 @@ export function useWebsocket(url: string) { setStatus("connected"); setMessage(parsed); + setLastMessage(parsed); }, onOpen: () => setStatus("connecting"), onClose: () => setStatus("disconnected"), diff --git a/ui/src/services/store.ts b/ui/src/services/store.ts index 966d9c3..37116c8 100644 --- a/ui/src/services/store.ts +++ b/ui/src/services/store.ts @@ -2,15 +2,14 @@ import type { StatusMessage } from "@/services/types"; export type TimePeriod = "realtime" | "hour" | "day" | "week" | "month" | "all"; -let data: StatusMessage[] = []; -const maxRealtimePoints = 50; +const realtimeData: StatusMessage[] = []; -export function addDataPoint(value: StatusMessage) { - data.push(value); +export function getLastMessage(): StatusMessage | null { + return JSON.parse(localStorage.getItem("last_message")!) as StatusMessage; +} - if (data.length > maxRealtimePoints) { - data.shift(); - } +export function setLastMessage(message: StatusMessage) { + localStorage.setItem("last_message", JSON.stringify(message)); } export function addDataPoint(value: StatusMessage) {