Style tweaks

webpack/404.tsx

@@ -9,14 +9,12 @@ const STYLES = {
 
 export class FourOhFour extends React.Component<{}, {}> {
   render() {
-    return (
-      <div className="404">
-        <div className="all-content-wrapper">
-          <h1 style={STYLES}>
-            {t("Page Not Found.")}
-          </h1>
-        </div>
+    return <div className="404">
+      <div className="all-content-wrapper">
+        <h1 style={STYLES}>
+          {t("Page Not Found.")}
+        </h1>
       </div>
-    );
+    </div>;
   }
 }

webpack/account/index.tsx

@@ -12,16 +12,16 @@ import { success } from "farmbot-toastr/dist";
 
 type State = Partial<User>;
 
-let KEYS: (keyof User)[] = ["id", "name", "email", "created_at", "updated_at"];
+const KEYS: (keyof User)[] = ["id", "name", "email", "created_at", "updated_at"];
 
-let isKey = (x: string): x is keyof User => KEYS.includes(x as keyof User);
+const isKey = (x: string): x is keyof User => KEYS.includes(x as keyof User);
 
 @connect(mapStateToProps)
 export class Account extends React.Component<Props, State> {
   state: State = {};
 
   onChange = (e: React.FormEvent<HTMLInputElement>) => {
-    let { name, value } = e.currentTarget;
+    const { name, value } = e.currentTarget;
     if (isKey(name)) {
       this.setState({ [name]: value });
       this.props.dispatch(edit(this.props.user, this.state));
@@ -36,26 +36,24 @@ export class Account extends React.Component<Props, State> {
     .then(() => success("saved"), updateNO);
 
   render() {
-    return (
-      <Page className="account">
-        <Col xs={12} sm={6} smOffset={3}>
-          <Row>
-            <Settings
-              user={this.props.user}
-              onChange={this.onChange}
-              onSave={this.onSave} />
-          </Row>
-          <Row>
-            <ChangePassword />
-          </Row>
-          <Row>
-            <DeleteAccount
-              onClick={(password) => this
-                .props
-                .dispatch(deleteUser({ password }))} />
-          </Row>
-        </Col>
-      </Page>
-    );
+    return <Page className="account">
+      <Col xs={12} sm={6} smOffset={3}>
+        <Row>
+          <Settings
+            user={this.props.user}
+            onChange={this.onChange}
+            onSave={this.onSave} />
+        </Row>
+        <Row>
+          <ChangePassword />
+        </Row>
+        <Row>
+          <DeleteAccount
+            onClick={(password) => this
+              .props
+              .dispatch(deleteUser({ password }))} />
+        </Row>
+      </Col>
+    </Page>;
   }
 }

webpack/controls/axis_display_group.tsx

@@ -5,29 +5,27 @@ import { AxisDisplayGroupProps } from "./interfaces";
 import { isUndefined } from "lodash";
 
 export let AxisDisplayGroup = ({ position, label }: AxisDisplayGroupProps) => {
-  let { x, y, z } = position;
-  return (
-    <Row>
-      <Col xs={3}>
-        <input
-          disabled
-          value={isUndefined(x) ? "" : x} />
-      </Col>
-      <Col xs={3}>
-        <input
-          disabled
-          value={isUndefined(y) ? "" : y} />
-      </Col>
-      <Col xs={3}>
-        <input
-          disabled
-          value={isUndefined(z) ? "" : z} />
-      </Col>
-      <Col xs={3}>
-        <label>
-          {t(label)}
-        </label>
-      </Col>
-    </Row>
-  );
+  const { x, y, z } = position;
+  return <Row>
+    <Col xs={3}>
+      <input
+        disabled
+        value={isUndefined(x) ? "" : x} />
+    </Col>
+    <Col xs={3}>
+      <input
+        disabled
+        value={isUndefined(y) ? "" : y} />
+    </Col>
+    <Col xs={3}>
+      <input
+        disabled
+        value={isUndefined(z) ? "" : z} />
+    </Col>
+    <Col xs={3}>
+      <label>
+        {t(label)}
+      </label>
+    </Col>
+  </Row>;
 };

webpack/controls/axis_input_box.tsx

@@ -4,12 +4,10 @@ import { Col, BlurableInput } from "../ui/index";
 import { isUndefined } from "lodash";
 
 export let AxisInputBox = ({ onChange, value, axis }: AxisInputBoxProps) => {
-  return (
-    <Col xs={3}>
-      <BlurableInput
-        value={(isUndefined(value) ? "" : value)}
-        type="number"
-        onCommit={e => onChange(axis, parseInt(e.currentTarget.value))} />
-    </Col>
-  );
+  return <Col xs={3}>
+    <BlurableInput
+      value={(isUndefined(value) ? "" : value)}
+      type="number"
+      onCommit={e => onChange(axis, parseInt(e.currentTarget.value))} />
+  </Col>;
 };

webpack/controls/axis_input_box_group.tsx

@@ -21,9 +21,9 @@ export class AxisInputBoxGroup extends
   }
 
   get vector() {
-    let { x, y, z } = this.state;
-    let p = this.props.position;
-    let x2 = p.x,
+    const { x, y, z } = this.state;
+    const p = this.props.position;
+    const x2 = p.x,
       y2 = p.y,
       z2 = p.z;
 
@@ -40,31 +40,29 @@ export class AxisInputBoxGroup extends
   }
 
   render() {
-    let { x, y, z } = this.state;
+    const { x, y, z } = this.state;
 
-    return (
-      <Row>
-        <AxisInputBox
-          onChange={this.change}
-          axis={"x"}
-          value={x} />
-        <AxisInputBox
-          onChange={this.change}
-          axis={"y"}
-          value={y} />
-        <AxisInputBox
-          onChange={this.change}
-          axis={"z"}
-          value={z} />
-        <Col xs={3}>
-          <button
-            onClick={this.clicked}
-            disabled={this.props.disabled || false}
-            className="full-width green go fb-button" >
-            {t("GO")}
-          </button>
-        </Col>
-      </Row>
-    );
+    return <Row>
+      <AxisInputBox
+        onChange={this.change}
+        axis={"x"}
+        value={x} />
+      <AxisInputBox
+        onChange={this.change}
+        axis={"y"}
+        value={y} />
+      <AxisInputBox
+        onChange={this.change}
+        axis={"z"}
+        value={z} />
+      <Col xs={3}>
+        <button
+          onClick={this.clicked}
+          disabled={this.props.disabled || false}
+          className="full-width green go fb-button" >
+          {t("GO")}
+        </button>
+      </Col>
+    </Row>;
   }
 }

webpack/controls/controls.tsx

@@ -10,34 +10,32 @@ import { Move } from "./move";
 @connect(mapStateToProps)
 export class Controls extends React.Component<Props, {}> {
   render() {
-    let arduinoBusy = !!this
+    const arduinoBusy = !!this
       .props
       .bot
       .hardware
       .informational_settings
       .busy;
-    return (
-      <Page className="controls">
-        <Row>
-          <Col xs={12} sm={6} md={5} mdOffset={1}>
-            <Move bot={this.props.bot}
-              user={this.props.user}
-              dispatch={this.props.dispatch}
-              disabled={arduinoBusy} />
-            <Peripherals
-              bot={this.props.bot}
-              peripherals={this.props.peripherals}
-              dispatch={this.props.dispatch}
-              resources={this.props.resources}
-              disabled={arduinoBusy} />
-          </Col>
-          <Col xs={12} sm={6}>
-            <WebcamPanel bot={this.props.bot}
-              feed={this.props.feed}
-              dispatch={this.props.dispatch} />
-          </Col>
-        </Row>
-      </Page>
-    );
+    return <Page className="controls">
+      <Row>
+        <Col xs={12} sm={6} md={5} mdOffset={1}>
+          <Move bot={this.props.bot}
+            user={this.props.user}
+            dispatch={this.props.dispatch}
+            disabled={arduinoBusy} />
+          <Peripherals
+            bot={this.props.bot}
+            peripherals={this.props.peripherals}
+            dispatch={this.props.dispatch}
+            resources={this.props.resources}
+            disabled={arduinoBusy} />
+        </Col>
+        <Col xs={12} sm={6}>
+          <WebcamPanel bot={this.props.bot}
+            feed={this.props.feed}
+            dispatch={this.props.dispatch} />
+        </Col>
+      </Row>
+    </Page>;
   }
 }

webpack/controls/direction_button.tsx

@@ -5,26 +5,24 @@ import { DirectionButtonProps, Payl } from "./interfaces";
 
 export class DirectionButton extends React.Component<DirectionButtonProps, {}> {
   sendCommand = () => {
-    let { direction, isInverted } = this.props;
-    let isNegative = (direction === "up") || (direction === "right");
-    let inverter = isInverted ? -1 : 1;
-    let multiplier = isNegative ? -1 : 1;
-    let distance = (this.props.steps || 250) * multiplier * inverter;
-    let payload: Payl = { speed: Farmbot.defaults.speed, x: 0, y: 0, z: 0 };
+    const { direction, isInverted } = this.props;
+    const isNegative = (direction === "up") || (direction === "right");
+    const inverter = isInverted ? -1 : 1;
+    const multiplier = isNegative ? -1 : 1;
+    const distance = (this.props.steps || 250) * multiplier * inverter;
+    const payload: Payl = { speed: Farmbot.defaults.speed, x: 0, y: 0, z: 0 };
     payload[this.props.axis] = distance;
     moveRelative(payload);
   }
 
   render() {
-    let { direction, axis, disabled } = this.props;
-    let klass = `fb-button fa fa-2x arrow-button radius fa-arrow-${direction}`;
-    let title = `move ${axis} axis`;
-    return (
-      <button
-        onClick={this.sendCommand}
-        className={klass}
-        title={title}
-        disabled={disabled || false} />
-    );
+    const { direction, axis, disabled } = this.props;
+    const klass = `fb-button fa fa-2x arrow-button radius fa-arrow-${direction}`;
+    const title = `move ${axis} axis`;
+    return <button
+      onClick={this.sendCommand}
+      className={klass}
+      title={title}
+      disabled={disabled || false} />;
   }
 }

webpack/controls_popup.tsx

@@ -22,41 +22,39 @@ export class ControlsPopup extends React.Component<Props, Partial<State>> {
     this.setState({ [property]: !this.state[property] });
 
   public render() {
-    let isOpen = this.state.isOpen ? "open" : "";
-    return (
-      <div
-        className={"controls-popup " + isOpen}
-        onClick={this.toggle("isOpen")}>
-        <i className="fa fa-plus" />
-        <div className="controls-popup-menu-outer">
-          <div className="controls-popup-menu-inner">
-            <DirectionButton
-              axis="z"
-              direction="up"
-              isInverted={false}
-              steps={this.state.stepSize}
-              disabled={false} />
-            <DirectionButton
-              axis="x"
-              direction="left"
-              isInverted={false}
-              steps={this.state.stepSize}
-              disabled={false} />
-            <DirectionButton
-              axis="y"
-              direction="down"
-              isInverted={false}
-              steps={this.state.stepSize}
-              disabled={false} />
-            <DirectionButton
-              axis="z"
-              direction="right"
-              isInverted={false}
-              steps={this.state.stepSize}
-              disabled={false} />
-          </div>
+    const isOpen = this.state.isOpen ? "open" : "";
+    return <div
+      className={"controls-popup " + isOpen}
+      onClick={this.toggle("isOpen")}>
+      <i className="fa fa-plus" />
+      <div className="controls-popup-menu-outer">
+        <div className="controls-popup-menu-inner">
+          <DirectionButton
+            axis="z"
+            direction="up"
+            isInverted={false}
+            steps={this.state.stepSize}
+            disabled={false} />
+          <DirectionButton
+            axis="x"
+            direction="left"
+            isInverted={false}
+            steps={this.state.stepSize}
+            disabled={false} />
+          <DirectionButton
+            axis="y"
+            direction="down"
+            isInverted={false}
+            steps={this.state.stepSize}
+            disabled={false} />
+          <DirectionButton
+            axis="z"
+            direction="right"
+            isInverted={false}
+            steps={this.state.stepSize}
+            disabled={false} />
         </div>
       </div>
-    );
+    </div>;
   }
 }

webpack/sequences/step_tiles/tile_move_relative.tsx

@@ -8,7 +8,7 @@ import { ToolTips } from "../../constants";
 import { StepIconGroup } from "../step_icon_group";
 
 export function TileMoveRelative({ dispatch, currentStep, index, currentSequence }: StepParams) {
-  return (<div>
+  return <div>
     <div className="step-wrapper">
       <div className="row">
         <div className="col-sm-12">
@@ -69,5 +69,5 @@ export function TileMoveRelative({ dispatch, currentStep, index, currentSequence
         </div>
       </div>
     </div>
-  </div>);
+  </div>;
 }

webpack/sequences/step_tiles/tile_read_pin.tsx

@@ -10,8 +10,8 @@ import { FBSelect } from "../../ui/new_fb_select";
 import { setPinMode, currentSelection, PIN_MODES } from "./tile_pin_support";
 
 export function TileReadPin(props: StepParams) {
-  let { dispatch, currentStep, index, currentSequence } = props;
-  return (<div>
+  const { dispatch, currentStep, index, currentSequence } = props;
+  return <div>
     <div className="step-wrapper">
       <div className="row">
         <div className="col-sm-12">
@@ -63,5 +63,5 @@ export function TileReadPin(props: StepParams) {
         </div>
       </div>
     </div>
-  </div>);
+  </div>;
 }

webpack/tools/components/tool_list.tsx

@@ -7,41 +7,37 @@ import { ToolTips } from "../../constants";
 
 export class ToolList extends React.Component<ToolListProps, {}> {
   render() {
-    let toggle = () => this.props.toggle();
-    let { tools } = this.props;
+    const toggle = () => this.props.toggle();
+    const { tools } = this.props;
 
-    return (
-      <Widget>
-        <WidgetHeader helpText={ToolTips.TOOL_LIST} title="Tools">
-          <button
-            className="fb-button gray"
-            onClick={toggle}>
-            {t("Edit")}
-          </button>
-        </WidgetHeader>
-        <WidgetBody>
-          <Row>
+    return <Widget>
+      <WidgetHeader helpText={ToolTips.TOOL_LIST} title="Tools">
+        <button
+          className="fb-button gray"
+          onClick={toggle}>
+          {t("Edit")}
+        </button>
+      </WidgetHeader>
+      <WidgetBody>
+        <Row>
+          <Col xs={8}>
+            <label>{t("Tool Name")}</label>
+          </Col>
+          <Col xs={4}>
+            <label>{t("Status")}</label>
+          </Col>
+        </Row>
+        {tools.map((tool: TaggedTool) => {
+          return <Row key={tool.body.id}>
             <Col xs={8}>
-              <label>{t("Tool Name")}</label>
+              {tool.body.name || "Name not found"}
             </Col>
             <Col xs={4}>
-              <label>{t("Status")}</label>
+              {this.props.isActive(tool) ? "active" : "inactive"}
             </Col>
-          </Row>
-          {tools.map((tool: TaggedTool) => {
-            return (
-              <Row key={tool.body.id}>
-                <Col xs={8}>
-                  {tool.body.name || "Name not found"}
-                </Col>
-                <Col xs={4}>
-                  {this.props.isActive(tool) ? "active" : "inactive"}
-                </Col>
-              </Row>
-            );
-          })}
-        </WidgetBody>
-      </Widget>
-    );
+          </Row>;
+        })}
+      </WidgetBody>
+    </Widget>;
   }
 }

webpack/ui/back_arrow.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
 
 export function BackArrow() {
-  return (
-    <a href="javascript:history.back()" className="back-arrow">
-      <i className="fa fa-arrow-left"></i>
-    </a>
-  );
+  return <a href="javascript:history.back()" className="back-arrow">
+    <i className="fa fa-arrow-left"></i>
+  </a>;
 }

webpack/ui/blurable_input.tsx

@@ -35,33 +35,41 @@ export class BlurableInput extends React.Component<BIProps, Partial<BIState>> {
 
   /** Called on blur. */
   maybeCommit = (e: React.SyntheticEvent<HTMLInputElement>) => {
-    let shouldPassToParent = (this.state.buffer || (this.props.allowEmpty));
+    const shouldPassToParent = (this.state.buffer || (this.props.allowEmpty));
     if (shouldPassToParent) { this.props.onCommit(e); }
     this.setState({ isEditing: false, buffer: "" });
   }
 
   focus = () => {
-    let { value } = this.props;
+    const { value } = this.props;
     this.setState({ isEditing: true, buffer: "" + (value || "") });
   }
 
   updateBuffer = (e: React.SyntheticEvent<HTMLInputElement>) => {
-    let buffer = e.currentTarget.value;
+    const buffer = e.currentTarget.value;
     this.setState({ buffer });
   }
 
+  defaultProps = () => {
+    const value = this.state.isEditing ?
+      this.state.buffer : this.props.value;
+    return {
+      value: value,
+      hidden: !!this.props.hidden,
+      onFocus: this.focus,
+      onChange: this.updateBuffer,
+      onSubmit: this.maybeCommit,
+      onBlur: this.maybeCommit,
+      name: this.props.name,
+      id: this.props.id,
+      type: this.props.type || "text",
+      disabled: this.props.disabled,
+      className: this.props.className,
+      placeholder: this.props.placeholder,
+    };
+  }
+
   render() {
-    let value = this.state.isEditing ? this.state.buffer : this.props.value;
-    return <input value={value}
-      hidden={!!this.props.hidden}
-      onFocus={this.focus}
-      onChange={this.updateBuffer}
-      onBlur={this.maybeCommit}
-      name={this.props.name}
-      id={this.props.id}
-      type={this.props.type || "text"}
-      disabled={this.props.disabled}
-      className={this.props.className}
-      placeholder={this.props.placeholder} />;
+    return <input {...this.defaultProps() } />;
   }
 }

webpack/ui/color_picker.tsx

@@ -12,25 +12,21 @@ interface PickerProps {
 export class ColorPicker extends React.Component<PickerProps, {}> {
 
   private renderColors(color: Color, key: number) {
-    let isActive = color === this.props.current;
-    let cb = this.props.onChange || function () { };
-    return (
-      <div key={key} onClick={() => cb(color)} >
-        <Saucer color={color} active={isActive} />
-      </div>
-    );
+    const isActive = color === this.props.current;
+    const cb = this.props.onChange || function () { };
+    return <div key={key} onClick={() => cb(color)} >
+      <Saucer color={color} active={isActive} />
+    </div>;
   }
 
   public render() {
-    return (
-      <Popover
-        position={Position.BOTTOM}
-        popoverClassName="colorpicker-menu gray">
-        <Saucer color={this.props.current} />
-        <div>
-          {colors.map((color, inx) => this.renderColors(color, inx))}
-        </div>
-      </Popover>
-    );
+    return <Popover
+      position={Position.BOTTOM}
+      popoverClassName="colorpicker-menu gray">
+      <Saucer color={this.props.current} />
+      <div>
+        {colors.map((color, inx) => this.renderColors(color, inx))}
+      </div>
+    </Popover>;
   }
 }

webpack/ui/help.tsx

@@ -6,13 +6,11 @@ interface HelpProps {
 }
 
 export function Help(props: HelpProps) {
-  return (
-    <Popover
-      position={Position.LEFT_TOP}
-      interactionKind={PopoverInteractionKind.HOVER}
-      popoverClassName={"help"} >
-      <i className="fa fa-question-circle help-icon"></i>
-      <div>{props.text}</div>
-    </Popover>
-  );
+  return <Popover
+    position={Position.LEFT_TOP}
+    interactionKind={PopoverInteractionKind.HOVER}
+    popoverClassName={"help"} >
+    <i className="fa fa-question-circle help-icon"></i>
+    <div>{props.text}</div>
+  </Popover>;
 }

webpack/ui/markdown.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { JSXChildren } from "../util";
-let emoji = require("markdown-it-emoji");
-let md = require("markdown-it")({
+const emoji = require("markdown-it-emoji");
+const md = require("markdown-it")({
   /** Enable HTML tags in source */
   html: true,
   /** Convert '\n' in paragraphs into <br> */
@@ -19,11 +19,9 @@ interface MarkdownProps {
 }
 
 export function Markdown(props: MarkdownProps) {
-  let result = md.render(props.children);
-  return (
-    <span
-      className="markdown"
-      dangerouslySetInnerHTML={{ __html: result }}>
-    </span>
-  );
+  const result = md.render(props.children);
+  return <span
+    className="markdown"
+    dangerouslySetInnerHTML={{ __html: result }}>
+  </span>;
 }

webpack/ui/new_fb_select.tsx

@@ -33,13 +33,11 @@ export class FBSelect extends React.Component<FBSelectProps, {}> {
   }
 
   render() {
-    return (
-      <div className="filter-search">
-        <FilterSearch
-          selectedItem={this.item}
-          items={this.list}
-          onChange={this.props.onChange} />
-      </div>
-    );
+    return <div className="filter-search">
+      <FilterSearch
+        selectedItem={this.item}
+        items={this.list}
+        onChange={this.props.onChange} />
+    </div>;
   }
 }

webpack/ui/page.tsx

@@ -9,9 +9,7 @@ interface PageProps {
 export function Page(props: PageProps) {
   let finalClassName = "all-content-wrapper";
   if (props.className) { finalClassName += ` ${props.className}`; }
-  return (
-    <div className={finalClassName}>
-      {props.children}
-    </div>
-  );
+  return <div className={finalClassName}>
+    {props.children}
+  </div>;
 }

webpack/ui/widget.tsx

@@ -9,9 +9,7 @@ interface WidgetProps {
 export function Widget(props: WidgetProps) {
   let className = `widget-wrapper `;
   if (props.className) { className += props.className; }
-  return (
-    <div className={className}>
-      {props.children}
-    </div>
-  );
+  return <div className={className}>
+    {props.children}
+  </div>;
 }

webpack/ui/widget_footer.tsx

@@ -6,9 +6,7 @@ interface WidgetFooterProps {
 }
 
 export function WidgetFooter(props: WidgetFooterProps) {
-  return (
-    <div className="widget-footer">
-      {props.children}
-    </div>
-  );
+  return <div className="widget-footer">
+    {props.children}
+  </div>;
 }