Merge pull request #170 from microsoft/users/t-xunguy/cpx-components-…

…refactor

Refactor toolbar and actionbar

src/constants.ts

@@ -1,9 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import * as nls from "vscode-nls";
 import * as path from "path";
 import { MessageItem } from "vscode";
+import * as nls from "vscode-nls";
 
 // Debugger Server
 export const SERVER_INFO = {
@@ -288,7 +288,7 @@ export enum TelemetryEventName {
   SIMULATOR_BUTTON_AB = "SIMULATOR.BUTTON.AB",
   SIMULATOR_SWITCH = "SIMULATOR.SWITCH",
 
-  //Sensors
+  // Sensors
   SIMULATOR_TEMPERATURE_SENSOR = "SIMULATOR.TEMPERATURE",
   SIMULATOR_LIGHT_SENSOR = " SIMULATOR.LIGHT",
   SIMULATOR_MOTION_SENSOR = "SIMULATOR.MOTION",

src/deviceContext.ts

@@ -5,10 +5,10 @@
 
 import * as fs from "fs";
 import * as path from "path";
-import * as utils from "./extension_utils/utils";
 import * as vscode from "vscode";
-import { CPXWorkspace } from "./cpxWorkspace";
 import CONSTANTS, { CPX_CONFIG_FILE } from "./constants";
+import { CPXWorkspace } from "./cpxWorkspace";
+import * as utils from "./extension_utils/utils";
 
 export class DeviceContext implements vscode.Disposable {
     public static getInstance(): DeviceContext {

src/extension.ts

@@ -5,23 +5,23 @@ import * as cp from "child_process";
 import * as fs from "fs";
 import * as open from "open";
 import * as path from "path";
-import * as utils from "./extension_utils/utils";
 import * as vscode from "vscode";
 import {
   CONFIG,
   CONSTANTS,
   CPX_CONFIG_FILE,
   DialogResponses,
+  SERVER_INFO,
   TelemetryEventName,
-  WebviewMessages,
-  SERVER_INFO
+  WebviewMessages
 } from "./constants";
 import { CPXWorkspace } from "./cpxWorkspace";
-import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurationProvider";
+import { DebuggerCommunicationServer } from "./debuggerCommunicationServer";
+import * as utils from "./extension_utils/utils";
 import { SerialMonitor } from "./serialMonitor";
+import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurationProvider";
 import TelemetryAI from "./telemetry/telemetryAI";
 import { UsbDetector } from "./usbDetector";
-import { DebuggerCommunicationServer } from "./debuggerCommunicationServer";
 
 let currentFileAbsPath: string = "";
 let currentTextDocument: vscode.TextDocument;
@@ -830,13 +830,13 @@ const updateCurrentFileIfPython = async (
 };
 
 const handleButtonPressTelemetry = (buttonState: any) => {
-  if (buttonState["button_a"] && buttonState["button_b"]) {
+  if (buttonState.button_a && buttonState.button_b) {
     telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_AB);
-  } else if (buttonState["button_a"]) {
+  } else if (buttonState.button_a) {
     telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_A);
-  } else if (buttonState["button_b"]) {
+  } else if (buttonState.button_b) {
     telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_BUTTON_B);
-  } else if (buttonState["switch"]) {
+  } else if (buttonState.switch) {
     telemetryAI.trackFeatureUsage(TelemetryEventName.SIMULATOR_SWITCH);
   }
 };
@@ -872,9 +872,9 @@ const handleSensorTelemetry = (sensor: string) => {
 };
 
 const checkForTelemetry = (sensorState: any) => {
-  if (sensorState["shake"]) {
+  if (sensorState.shake) {
     handleSensorTelemetry("shake");
-  } else if (sensorState["touch"]) {
+  } else if (sensorState.touch) {
     handleSensorTelemetry("touch");
   }
 };

src/extension_utils/dependencyChecker.ts

@@ -1,8 +1,8 @@
-import { CONSTANTS } from "../constants";
 import * as cp from "child_process";
-import * as os from "os";
 import * as compareVersions from 'compare-versions';
+import * as os from "os";
 import * as util from "util";
+import { CONSTANTS } from "../constants";
 const exec = util.promisify(cp.exec);
 
 interface IPayloadResponse {

src/extension_utils/utils.ts

@@ -1,24 +1,25 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import * as cp from "child_process";
 import * as fs from "fs";
-import * as path from "path";
+import * as open from "open";
 import * as os from "os";
-import { DependencyChecker } from "./dependencyChecker";
-import { DeviceContext } from "../deviceContext";
+import * as path from "path";
+import * as util from "util";
 import * as vscode from "vscode";
 import {
   CONFIG,
   CONSTANTS,
   CPX_CONFIG_FILE,
   DialogResponses,
-  USER_CODE_NAMES,
-  SERVER_INFO
+  SERVER_INFO,
+  USER_CODE_NAMES
 } from "../constants";
 import { CPXWorkspace } from "../cpxWorkspace";
-import * as cp from "child_process";
-import * as util from "util";
-import * as open from "open";
+import { DeviceContext } from "../deviceContext";
+import { DependencyChecker } from "./dependencyChecker";
+
 const exec = util.promisify(cp.exec);
 
 // tslint:disable-next-line: export-name
@@ -76,7 +77,7 @@ export function tryParseJSON(jsonString: string): any | boolean {
     if (jsonObj && typeof jsonObj === "object") {
       return jsonObj;
     }
-  } catch (exception) {}
+  } catch (exception) { }
 
   return false;
 }
@@ -305,14 +306,14 @@ export const installPythonDependencies = async (context: vscode.ExtensionContext
   let installed: boolean = false;
   try {
     vscode.window.showInformationMessage(CONSTANTS.INFO.INSTALLING_PYTHON_DEPENDENCIES);
-    
+
     const requirementsPath: string = getPathToScript(context, CONSTANTS.FILESYSTEM.OUTPUT_DIRECTORY, "requirements.txt");
 
     // run command to download dependencies to out/python_libs
     const { stdout } = await exec(`${pythonExecutable} -m pip install -r ${requirementsPath} -t ${pathToLibs}`);
     console.info(stdout);
     installed = true;
-    
+
     vscode.window.showInformationMessage(CONSTANTS.INFO.SUCCESSFUL_INSTALL);
   } catch (err) {
 

src/serialMonitor.ts

@@ -4,10 +4,10 @@
 // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes.
 
 import * as vscode from "vscode";
+import CONSTANTS, { DialogResponses, STATUS_BAR_PRIORITY } from "./constants";
+import { DeviceContext } from "./deviceContext";
 import { outChannel } from "./extension";
 import { logToOutputChannel } from "./extension_utils/utils";
-import { DeviceContext } from "./deviceContext";
-import CONSTANTS, { STATUS_BAR_PRIORITY, DialogResponses } from "./constants";
 import { SerialPortControl } from "./serialPortControl";
 
 export interface ISerialPortDetail {

src/serialPortControl.ts

@@ -3,9 +3,9 @@
 
 // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes.
 
-import { CONSTANTS } from "./constants";
 import * as os from "os";
 import { OutputChannel } from "vscode";
+import { CONSTANTS } from "./constants";
 import { logToOutputChannel } from "./extension_utils/utils";
 
 interface ISerialPortDetail {

src/simulatorDebugConfigurationProvider.ts

@@ -2,11 +2,11 @@
 // Licensed under the MIT license.
 
 import * as vscode from "vscode";
+import { CONSTANTS, DialogResponses } from "./constants";
 import {
-  validCodeFileName,
-  getServerPortConfig
+  getServerPortConfig,
+  validCodeFileName
 } from "./extension_utils/utils";
-import { CONSTANTS, DialogResponses } from "./constants";
 
 let shouldShowInvalidFileNamePopup: boolean = true;
 

src/telemetry/getPackageInfo.ts

@@ -1,6 +1,6 @@
-import * as vscode from 'vscode';
 import * as fs from 'fs'
 import * as path from 'path';
+import * as vscode from 'vscode';
 
 export interface IPackageJson {
     name?: string;

src/test/suite/index.ts

@@ -10,9 +10,9 @@
 // to report the results back to the caller. When the tests are finished, return
 // a possible error to the callback or null if none.
 
-import * as path from 'path';
-import * as Mocha from 'mocha';
 import * as glob from 'glob';
+import * as Mocha from 'mocha';
+import * as path from 'path';
 
 // tslint:disable-next-line: export-name
 export function run(): Promise<void> {

src/usbDetector.ts

@@ -3,13 +3,13 @@
 
 // Credit: A majority of this code was taken from the Visual Studio Code Arduino extension with some modifications to suit our purposes.
 
-import * as os from "os";
 import * as fs from "fs";
+import * as os from "os";
 import * as path from "path";
-import * as utils from "./extension_utils/utils";
 import * as vscode from "vscode";
-import { SerialMonitor } from "./serialMonitor";
 import { CONFIG_KEYS } from "./constants";
+import * as utils from "./extension_utils/utils";
+import { SerialMonitor } from "./serialMonitor";
 
 export class UsbDetector {
     public static getInstance(): UsbDetector {

src/view/App.tsx

@@ -3,17 +3,15 @@
 
 "use strict";
 import * as React from "react";
-import Simulator from "./components/Simulator";
-import ToolBar from "./components/toolbar/ToolBar";
 import "./App.css";
+import Device from "./container/device/Device"
 
 class App extends React.Component {
   render() {
     return (
       <div className="App">
         <main className="App-main">
-          <Simulator />
-          <ToolBar />
+          <Device/>
         </main>
       </div>
     );

src/view/components/Dropdown.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
+
 import { CONSTANTS } from "../constants";
 import "../styles/Dropdown.css";
 

src/view/components/Simulator.tsx

@@ -2,16 +2,14 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
-import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style";
-import Cpx, { updateSwitch, updatePinTouch } from "./cpx/Cpx";
-import Button from "./Button";
-import Dropdown from "./Dropdown";
 import { CONSTANTS } from "../constants";
+import "../styles/Simulator.css";
 import PlayLogo from "../svgs/play_svg";
 import StopLogo from "../svgs/stop_svg";
-import RefreshLogo from "../svgs/refresh_svg";
-
-import "../styles/Simulator.css";
+import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style";
+import CpxImage, { updatePinTouch, updateSwitch } from "./cpx/CpxImage";
+import Dropdown from "./Dropdown";
+import ActionBar from "./simulator/ActionBar"
 
 interface ICpxState {
   pixels: number[][];
@@ -141,7 +139,7 @@ class Simulator extends React.Component<any, IState> {
   }
 
   render() {
-    const image = this.state.play_button ? StopLogo : PlayLogo;
+    const playStopImage = this.state.play_button ? StopLogo : PlayLogo;
     return (
       <div className="simulator">
         <div className="file-selector">
@@ -155,7 +153,7 @@ class Simulator extends React.Component<any, IState> {
           />
         </div>
         <div className="cpx-container">
-          <Cpx
+          <CpxImage
             pixels={this.state.cpx.pixels}
             brightness={this.state.cpx.brightness}
             red_led={this.state.cpx.red_led}
@@ -167,24 +165,10 @@ class Simulator extends React.Component<any, IState> {
             onMouseLeave={this.onMouseLeave}
           />
         </div>
-        <div className="buttons">
-          <Button
-            onClick={this.togglePlayClick}
-            focusable={true}
-            image={image}
-            styleLabel="play"
-            label="play"
-            width={CONSTANTS.SIMULATOR_BUTTON_WIDTH}
-          />
-          <Button
-            onClick={this.refreshSimulatorClick}
-            focusable={true}
-            image={RefreshLogo}
-            styleLabel="refresh"
-            label="refresh"
-            width={CONSTANTS.SIMULATOR_BUTTON_WIDTH}
-          />
-        </div>
+       <ActionBar 
+          onTogglePlay={this.togglePlayClick} 
+          onToggleRefresh={this.refreshSimulatorClick} 
+          playStopImage={playStopImage}/>
       </div>
     );
   }
@@ -368,7 +352,7 @@ class Simulator extends React.Component<any, IState> {
   private handleTouchPinClick(pin: HTMLElement, active: boolean): any {
     let cpxState = this.state.cpx;
     const pinIndex = parseInt(pin.id.charAt(pin.id.length - 1)) - 1;
-    let pinState = cpxState.touch;
+    const pinState = cpxState.touch;
     pinState[pinIndex] = active;
     cpxState = { ...cpxState, touch: pinState };
     this.setState({ ...this.state, ...cpxState });

src/view/components/cpx/Cpx.tsx → src/view/components/cpx/CpxImage.tsx

@@ -2,11 +2,11 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
+import CONSTANTS from "../../constants";
+import accessibility from "./Accessibility_utils";
 import CPX_SVG from "./Cpx_svg";
 import * as SvgStyle from "./Cpx_svg_style";
-import CONSTANTS from "../../constants";
 import svg from "./Svg_utils";
-import accessibility from "./Accessibility_utils";
 
 interface IProps {
   pixels: number[][];
@@ -23,7 +23,7 @@ interface IProps {
 let firstTime = true;
 
 // Functional Component render
-const Cpx: React.FC<IProps> = props => {
+const CpxImage: React.FC<IProps> = props => {
   const svgElement = window.document.getElementById("cpx_svg");
 
   if (svgElement) {
@@ -79,7 +79,7 @@ const makeButton = (
 };
 
 const initSvgStyle = (svgElement: HTMLElement, brightness: number): void => {
-  let style: SVGStyleElement = svg.child(
+  const style: SVGStyleElement = svg.child(
     svgElement,
     "style",
     {}
@@ -386,4 +386,4 @@ export const updatePinTouch = (pinState: boolean, id: string): void => {
   }
 };
 
-export default Cpx;
+export default CpxImage;