racecar_analytics dashboard data retrieval

App.tsx

import React from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import axios from "axios";

function App() {
  const [ecuSocketUrl] = React.useState("ws://localhost:9000/ecu/stream");
  const { lastMessage: lastEcuMessage, readyState } = useWebSocket(ecuSocketUrl);
  const [ecuData, setEcuData] = React.useState([{}]);
  
  React.useEffect(() => {
    if (lastEcuMessage !== null) {
      setEcuData((prev) => [
        ...prev.slice(-50),
        JSON.parse(lastEcuMessage.data),
      ]);
    }
  }, [lastEcuMessage]);

  React.useEffect(() => {
    getAllECUData();
  }, []);

  const getAllECUData = () => {
    axios.get('http://localhost:9000/ecu')
      .then(response => {
        setEcuData(response.data.slice(-40));
      })
      .catch(error => {
        console.error('Error fetching ECU data:', error);
    });
  };

// rest of component

}