Manage the state for sensors on UI

src/view/components/cpx/Cpx.tsx

@@ -4,20 +4,56 @@
 import * as React from "react";
 import { CPX_TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils";
 import ToolBar from "../../components/toolbar/ToolBar";
+import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants";
 import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
 import Simulator from "./CpxSimulator";
 
 // Component grouping the functionality for circuit playground express
+const DEFAULT_STATE = {
+    sensors: {
+        [SENSOR_LIST.TEMPERATURE]: 0,
+        [SENSOR_LIST.LIGHT]: 0,
+        [SENSOR_LIST.MOTION_X]: 0,
+        [SENSOR_LIST.MOTION_Y]: 0,
+        [SENSOR_LIST.MOTION_Z]: 0,
+    },
+};
 
 export class Cpx extends React.Component {
+    state = DEFAULT_STATE;
+    componentDidMount() {
+        window.addEventListener("message", this.handleMessage);
+    }
+
+    componentWillUnmount() {
+        // Make sure to remove the DOM listener when the component is unmounted.
+        window.removeEventListener("message", this.handleMessage);
+    }
+    handleMessage = (event: any): void => {
+        const message = event.data;
+
+        switch (message.command) {
+            case VSCODE_MESSAGES_TO_WEBVIEW.RESET:
+                this.setState({ ...DEFAULT_STATE });
+                break;
+        }
+    };
+
     render() {
         return (
             <React.Fragment>
                 <Simulator />
-                <ToolBar buttonList={CPX_TOOLBAR_BUTTONS} />
+                <ToolBar
+                    buttonList={CPX_TOOLBAR_BUTTONS}
+                    onUpdateSensor={this.updateSensor}
+                    sensorValues={this.state.sensors}
+                />
             </React.Fragment>
         );
     }
+    updateSensor = (sensor: SENSOR_LIST, value: number) => {
+        this.setState({ sensors: { ...this.state.sensors, [sensor]: value } });
+    };
 }
 
 const CPX_TOOLBAR_BUTTONS: Array<{ label: any; image: any }> = [

src/view/components/microbit/Microbit.tsx

@@ -3,22 +3,61 @@
 
 import * as React from "react";
 import { MICROBIT_TOOLBAR_ID } from "../../components/toolbar/SensorModalUtils";
+import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants";
 import "../../styles/Simulator.css";
 import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
 import ToolBar from "../toolbar/ToolBar";
 import { MicrobitSimulator } from "./MicrobitSimulator";
 
 // Component grouping the functionality for micro:bit functionalities
+interface IState {
+    sensors: { [key: string]: number };
+}
+const DEFAULT_STATE = {
+    sensors: {
+        [SENSOR_LIST.TEMPERATURE]: 0,
+        [SENSOR_LIST.LIGHT]: 0,
+        [SENSOR_LIST.MOTION_X]: 0,
+        [SENSOR_LIST.MOTION_Y]: 0,
+        [SENSOR_LIST.MOTION_Z]: 0,
+    },
+};
+
+export class Microbit extends React.Component<{}, IState> {
+    state = DEFAULT_STATE;
+
+    componentDidMount() {
+        window.addEventListener("message", this.handleMessage);
+    }
+
+    componentWillUnmount() {
+        // Make sure to remove the DOM listener when the component is unmounted.
+        window.removeEventListener("message", this.handleMessage);
+    }
+    handleMessage = (event: any): void => {
+        const message = event.data;
 
-export class Microbit extends React.Component {
+        switch (message.command) {
+            case VSCODE_MESSAGES_TO_WEBVIEW.RESET:
+                this.setState({ ...DEFAULT_STATE });
+                break;
+        }
+    };
     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) => {
+        this.setState({ sensors: { ...this.state.sensors, [sensor]: value } });
+    };
 }
 
 const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [

src/view/components/toolbar/InputSlider.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
-import { VIEW_STATE, WEBVIEW_MESSAGES } from "../../constants";
+import { SENSOR_LIST, VIEW_STATE, WEBVIEW_MESSAGES } from "../../constants";
 import { ViewStateContext } from "../../context";
 import "../../styles/InputSlider.css";
 import { sendMessage } from "../../utils/MessageUtils";
@@ -12,30 +12,13 @@ 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);
         this.validateRange = this.validateRange.bind(this);
     }
 
-    handleMessage = (event: any): void => {
-        const message = event.data; // The JSON data our extension sent
-        switch (message.command) {
-            case "reset-state":
-                this.setState({ value: 0 });
-                break;
-        }
-    };
-
-    componentDidMount() {
-        window.addEventListener("message", this.handleMessage);
-    }
-
-    componentWillUnmount() {
-        // Make sure to remove the DOM listener when the component is unmounted.
-        window.removeEventListener("message", this.handleMessage);
-    }
     render() {
         const isInputDisabled = this.context === VIEW_STATE.PAUSE;
         return (
@@ -44,7 +27,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 +50,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 +87,9 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
         const newValue = event.target.validity.valid
             ? event.target.value
             : this.state.value;
-        this.setState({ value: newValue });
+        if (this.props.onUpdateValue) {
+            this.props.onUpdateValue(this.props.type as SENSOR_LIST, newValue);
+        }
         return newValue;
     };
 

src/view/components/toolbar/LightSensorBar.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
+import { SENSOR_LIST } from "../../constants";
 import "../../styles/LightSensorBar.css";
 import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils";
 import InputSlider from "./InputSlider";
@@ -20,8 +21,12 @@ const LIGHT_SENSOR_PROPERTIES: ISensorProps = {
     sliderProps: [LIGHT_SLIDER_PROPS],
     unitLabel: "Lux",
 };
+interface IProps {
+    onUpdateValue: (sensor: SENSOR_LIST, value: number) => void;
+    value: number;
+}
 
-class LightSensorBar extends React.Component {
+class LightSensorBar extends React.Component<IProps> {
     constructor(props: any) {
         super(props);
     }
@@ -53,6 +58,8 @@ class LightSensorBar extends React.Component {
                         LIGHT_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX]
                             .axisLabel
                     }
+                    onUpdateValue={this.props.onUpdateValue}
+                    value={this.props.value}
                 />
             </div>
         );