connect device frontend object to backend (readonly)

frontend/package-lock.json

@@ -1327,6 +1327,14 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -2923,6 +2931,11 @@
         }
       }
     },
+    "follow-redirects": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

frontend/package.json

@@ -10,6 +10,7 @@
   "author": "Matt Grau",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.21.1",
     "parcel-bundler": "^1.12.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

frontend/src/device.jsx

-import  React from 'react'
+import React from "react";
+import axios from "axios";
 
 export default class Device extends React.Component {
-    render() {
-        return (
-            <div>
-                <div>
-                    <h3>Device Name</h3>
-                </div>
-                <div>
-                    <div>
-                        <label>Voltage</label>
-                        <input></input>
-                    </div>
-                    <div>
-                        <label>Current</label>
-                        <input></input>
-                    </div>
-                    <div>
-                        <label>Resistance</label>
-                        <input></input>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
\ No newline at end of file
+  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>
+    );
+  }
+}

frontend/src/index.js

+import 'regenerator-runtime/runtime'
 import React from "react";
 import ReactDOM from "react-dom";
 
 import Device from './device'
 
-ReactDOM.render(<Device />, document.getElementById("root"));
+ReactDOM.render(<Device name="My Device" />, document.getElementById("root"));

server.py

 import flask
+import flask_cors
 from device import Device
 
 device = Device()
 app = flask.Flask(__name__)
+flask_cors.CORS(app)
 
 
 @app.route('/')