import React from "react";
import axios from "axios";

export default class Device extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      voltage: 0,
      current: 0,
      resistance: 0,
    };
  }

  async componentDidMount() {
    const voltage = await axios.get("http://localhost:8000/get_voltage");
    const current = await axios.get("http://localhost:8000/get_current");
    const resistance = await axios.get("http://localhost:8000/calculate_resistance");
    this.setState({
        voltage: voltage.data,
        current: current.data,
        resistance: resistance.data
    })
  }

  render() {
    return (
      <div>
        <div>
          <h3>{this.props.name}</h3>
        </div>
        <div>
          <div>
            <label>Voltage</label>
            <input value={this.state.voltage}></input>
          </div>
          <div>
            <label>Current</label>
            <input value={this.state.current}></input>
          </div>
          <div>
            <label>Resistance</label>
            <input value={this.state.resistance}></input>
          </div>
        </div>
      </div>
    );
  }
}