First Stab at a React-Based Frontend

Projects Personal Projects
1

Well, first stab at building any frontend, really. I’m still wrapping my mind around JS/React, but I think I’m starting to get the basics enough to try and work on something useful. I’m working on building a Raspberry Pi based race dash for my hot rod.

I’ve got a Python based backend that takes serial data from the car’s engine control module and puts it up on a websocket server. That’s all working fine and good, save for some tweaks and added features down the line. It puts out a packet like so at about 20Hz:

{"data": {
   "data": {
      bat: 12.8,
      gear: 3,
      rpm: 2893,
      vss: 52,
      bksw: "false",
      ...
   }
}

The plan is to grab these packets and place the data into props that I can then pass off to my components. First stumbling block for me is that I can’t pass the packet straight into props, I get a React error for trying to pass an object into props.

So right now, this is what I’ve arrived at:

import React from 'react';
import './App.css';
//import './data.js';
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      endpoint: "ws://" + (window.location.hostname || "127.0.0.1") + ":5678/", 
      bat: 'Bat',
      gear: 'Gear',
      rpm: 'RPM',
      vss: 'VSS',
      bksw: 'BKSW',
     }
  }

  componentDidMount() {
    const ws = new WebSocket(this.state.endpoint)
    ws.onmessage = evt => {
      const data = JSON.parse(evt.data);
      console.log(data.data);
      this.setState({
        bat: data.data.bat,
        rpm: data.data.rpm,
        vss: data.data.vss,
        gear: data.data.gear,
        bksw: data.data.bksw        
      })
    }
  }

  render() {
    let bksw
    if (this.state.bksw) {
      bksw = 'true';
    } else {
      bksw = 'false';
    }

    return (
      <div>
        <h1 text='bold'>Data!</h1>
        <h2 text='bold'>Analogs</h2>
        <p>Battery: {this.state.bat}</p>
        <p>RPM: {this.state.rpm}</p>
        <p>Speed: {this.state.vss}</p>
        <p>Gear: {this.state.gear}</p>
        <h2 text='bold'>Inputs</h2>
        <p>BKSW: {bksw}</p>
      </div>
    );
  }
}

export default App;

It’s rudimentary right now, just trying to get working, and it does as expected so far. I’ll eventually build component classes for the different data types (gauges, indicators, etc) but right now my focus is handling passing the data into props neatly and that’s where I’m stuck.

In my componentDidMount(), is there a cleaner way to handle passing these items into props? Right now I’m looking at ~100 data channels in the packet with more to come, so my this.setState is going to get really ugly really fast. Is there an easy way to convert data from an object into an array? Is what I’m doing even going to work as I scale it up? I feel like I’m missing something fundamental here, but searches of the web for a similar project have led me down rabbit holes and not to solutions.

Appreciate the help. Looking forward to understanding this :slight_smile: