Keep the state for temperature sensor

Author: xnkevinnguyen

src/view/components/cpx/Cpx.tsx

@@ -6,6 +6,7 @@ import { CPX_TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils";
 import ToolBar from "../../components/toolbar/ToolBar";
 import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
 import Simulator from "./CpxSimulator";
+import { SENSOR_LIST } from "../../constants";
 
 // Component grouping the functionality for circuit playground express
 
@@ -14,10 +15,17 @@ export class Cpx extends React.Component {
         return (
             <React.Fragment>
                 <Simulator />
-                <ToolBar buttonList={CPX_TOOLBAR_BUTTONS} />
+                <ToolBar
+                    buttonList={CPX_TOOLBAR_BUTTONS}
+                    onUpdateSensor={this.updateSensor}
+                    sensorValues={{}}
+                />
             </React.Fragment>
         );
     }
+    updateSensor = (sensor: SENSOR_LIST, value: number) => {
+        this.setState({ [sensor]: value });
+    };
 }
 
 const CPX_TOOLBAR_BUTTONS: Array<{ label: any; image: any }> = [

src/view/components/microbit/Microbit.tsx

@@ -7,18 +7,38 @@ import "../../styles/Simulator.css";
 import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
 import ToolBar from "../toolbar/ToolBar";
 import { MicrobitSimulator } from "./MicrobitSimulator";
+import { SENSOR_LIST } from "../../constants";
 
 // Component grouping the functionality for micro:bit functionalities
+interface IState {
+    sensors: { [key: string]: number };
+}
 
-export class Microbit extends React.Component {
+export class Microbit extends React.Component<{}, IState> {
+    state = {
+        sensors: {
+            [SENSOR_LIST.TEMPERATURE]: 0,
+            [SENSOR_LIST.LIGHT]: 0,
+            [SENSOR_LIST.ACCELEROMETER]: 0,
+        },
+    };
     render() {
         return (
             <React.Fragment>
                 <MicrobitSimulator />
-                <ToolBar buttonList={MICROBIT_TOOLBAR_BUTTONS} />
+                <ToolBar
+                    buttonList={MICROBIT_TOOLBAR_BUTTONS}
+                    onUpdateSensor={this.updateSensor}
+                    sensorValues={this.state.sensors}
+                />
             </React.Fragment>
         );
     }
+    updateSensor = (sensor: SENSOR_LIST, value: number) => {
+        console.log(value);
+        this.setState({ sensors: { ...this.state.sensors, [sensor]: value } });
+        console.log(JSON.stringify(this.state.sensors));
+    };
 }
 
 const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [

src/view/components/toolbar/InputSlider.tsx

@@ -12,7 +12,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
     constructor(props: ISliderProps) {
         super(props);
         this.state = {
-            value: 0,
+            value: this.props.value,
         };
 
         this.handleOnChange = this.handleOnChange.bind(this);
@@ -44,7 +44,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
                 <input
                     type="text"
                     className="sliderValue"
-                    value={this.state.value}
+                    value={this.props.value}
                     onInput={this.handleOnChange}
                     defaultValue={this.props.minValue.toLocaleString()}
                     pattern="^-?[0-9]{0,4}$"
@@ -67,7 +67,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
                         onKeyUp={this.sendTelemetry}
                         onMouseUp={this.sendTelemetry}
                         aria-valuenow={this.state.value}
-                        value={this.state.value}
+                        value={this.props.value}
                         aria-label={`${this.props.type} sensor slider`}
                         defaultValue={this.props.minValue.toLocaleString()}
                         disabled={isInputDisabled}
@@ -104,7 +104,11 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
         const newValue = event.target.validity.valid
             ? event.target.value
             : this.state.value;
-        this.setState({ value: newValue });
+        // this.setState({ value: newValue });
+        if (this.props.onUpdateValue) {
+            console.log(this.props.type, newValue);
+            this.props.onUpdateValue(this.props.type as SENSOR_LIST, newValue);
+        }
         return newValue;
     };