From 75a780a033b638e055c8de3f2f4f7a7a6a9f640e Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Wed, 1 Aug 2018 18:27:19 -0700
Subject: [PATCH] misc refactoring

---
 .../components/hardware_settings/motors.tsx   | 113 +++++++--------
 webpack/farm_designer/map/drag_helpers.tsx    |  69 +++++----
 .../plants/__tests__/create_points_test.tsx   |  12 +-
 .../farm_designer/plants/create_points.tsx    | 134 ++++++++++--------
 4 files changed, 168 insertions(+), 160 deletions(-)

diff --git a/webpack/devices/components/hardware_settings/motors.tsx b/webpack/devices/components/hardware_settings/motors.tsx
index 10778ec07..c912ac5da 100644
--- a/webpack/devices/components/hardware_settings/motors.tsx
+++ b/webpack/devices/components/hardware_settings/motors.tsx
@@ -14,6 +14,23 @@ import { McuInputBox } from "../mcu_input_box";
 import { minFwVersionCheck } from "../../../util";
 import { StepsPerMmSettings } from "./steps_per_mm_settings";
 
+const SingleSettingRow =
+  ({ label, tooltip, settingType, children }: {
+    label: string,
+    tooltip: string,
+    children: React.ReactChild,
+    settingType: "button" | "input",
+  }) =>
+    <Row>
+      <Col xs={6}>
+        <label>{label}</label>
+        <SpacePanelToolTip tooltip={tooltip} />
+      </Col>
+      {settingType === "button"
+        ? <Col xs={2} className={"centered-button-div"}>{children}</Col>
+        : <Col xs={6}>{children}</Col>}
+    </Row>;
+
 export function Motors(props: MotorsProps) {
   const {
     dispatch, firmwareVersion, sourceFbosConfig, controlPanelState,
@@ -30,35 +47,23 @@ export function Motors(props: MotorsProps) {
       name={"motors"}
       dispatch={dispatch} />
     <Collapse isOpen={!!controlPanelState.motors}>
-      <Row>
-        <Col xs={6}>
-          <label>
-            {t("Max Retries")}
-          </label>
-          <SpacePanelToolTip tooltip={ToolTips.MAX_MOVEMENT_RETRIES} />
-        </Col>
-        <Col xs={6}>
-          <McuInputBox
-            setting="param_mov_nr_retry"
-            sourceFwConfig={sourceFwConfig}
-            dispatch={dispatch} />
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={6}>
-          <label>
-            {t("E-Stop on Movement Error")}
-          </label>
-          <SpacePanelToolTip tooltip={ToolTips.E_STOP_ON_MOV_ERR} />
-        </Col>
-        <Col xs={2} className={"centered-button-div"}>
-          <ToggleButton
-            toggleValue={eStopOnMoveError.value}
-            dim={!eStopOnMoveError.consistent}
-            toggleAction={() => dispatch(
-              settingToggle("param_e_stop_on_mov_err", sourceFwConfig))} />
-        </Col>
-      </Row>
+      <SingleSettingRow settingType="input"
+        label={t("Max Retries")}
+        tooltip={ToolTips.MAX_MOVEMENT_RETRIES}>
+        <McuInputBox
+          setting="param_mov_nr_retry"
+          sourceFwConfig={sourceFwConfig}
+          dispatch={dispatch} />
+      </SingleSettingRow>
+      <SingleSettingRow settingType="button"
+        label={t("E-Stop on Movement Error")}
+        tooltip={ToolTips.E_STOP_ON_MOV_ERR}>
+        <ToggleButton
+          toggleValue={eStopOnMoveError.value}
+          dim={!eStopOnMoveError.consistent}
+          toggleAction={() => dispatch(
+            settingToggle("param_e_stop_on_mov_err", sourceFwConfig))} />
+      </SingleSettingRow>
       <NumericMCUInputGroup
         name={t("Max Speed (steps/s)")}
         tooltip={ToolTips.MAX_SPEED}
@@ -115,37 +120,25 @@ export function Motors(props: MotorsProps) {
         z={"movement_invert_motor_z"}
         dispatch={dispatch}
         sourceFwConfig={sourceFwConfig} />
-      <Row>
-        <Col xs={6}>
-          <label>
-            {t("Enable 2nd X Motor")}
-          </label>
-          <SpacePanelToolTip tooltip={ToolTips.ENABLE_X2_MOTOR} />
-        </Col>
-        <Col xs={2} className={"centered-button-div"}>
-          <ToggleButton
-            toggleValue={enable2ndXMotor.value}
-            dim={!enable2ndXMotor.consistent}
-            toggleAction={() => dispatch(
-              settingToggle("movement_secondary_motor_x", sourceFwConfig))} />
-        </Col>
-      </Row>
-      <Row>
-        <Col xs={6}>
-          <label>
-            {t("Invert 2nd X Motor")}
-          </label>
-          <SpacePanelToolTip tooltip={ToolTips.INVERT_MOTORS} />
-        </Col>
-        <Col xs={2} className={"centered-button-div"}>
-          <ToggleButton
-            grayscale={!enable2ndXMotor.value}
-            toggleValue={invert2ndXMotor.value}
-            dim={!invert2ndXMotor.consistent}
-            toggleAction={() => dispatch(
-              settingToggle("movement_secondary_motor_invert_x", sourceFwConfig))} />
-        </Col>
-      </Row>
+      <SingleSettingRow settingType="button"
+        label={t("Enable 2nd X Motor")}
+        tooltip={ToolTips.ENABLE_X2_MOTOR}>
+        <ToggleButton
+          toggleValue={enable2ndXMotor.value}
+          dim={!enable2ndXMotor.consistent}
+          toggleAction={() => dispatch(
+            settingToggle("movement_secondary_motor_x", sourceFwConfig))} />
+      </SingleSettingRow>
+      <SingleSettingRow settingType="button"
+        label={t("Invert 2nd X Motor")}
+        tooltip={ToolTips.INVERT_MOTORS}>
+        <ToggleButton
+          grayscale={!enable2ndXMotor.value}
+          toggleValue={invert2ndXMotor.value}
+          dim={!invert2ndXMotor.consistent}
+          toggleAction={() => dispatch(
+            settingToggle("movement_secondary_motor_invert_x", sourceFwConfig))} />
+      </SingleSettingRow>
     </Collapse>
   </section>;
 }
diff --git a/webpack/farm_designer/map/drag_helpers.tsx b/webpack/farm_designer/map/drag_helpers.tsx
index ce8296cb9..7a9124386 100644
--- a/webpack/farm_designer/map/drag_helpers.tsx
+++ b/webpack/farm_designer/map/drag_helpers.tsx
@@ -19,42 +19,41 @@ enum Line {
   Down = 270,
 }
 
+function getAlignment(
+  activeXYZ: BotPosition | undefined,
+  plantXYZ: BotPosition,
+  swappedXY: Boolean
+): Alignment {
+  if (activeXYZ && !isUndefined(activeXYZ.x) && !isUndefined(activeXYZ.y)) {
+    // Plant editing (dragging) is occuring
+    const activeXY = { x: round(activeXYZ.x), y: round(activeXYZ.y) };
+    if (activeXY.x == plantXYZ.x && activeXY.y == plantXYZ.y) {
+      return Alignment.BOTH;
+    }
+    if (activeXY.x == plantXYZ.x) {
+      return swappedXY ? Alignment.HORIZONTAL : Alignment.VERTICAL;
+    }
+    if (activeXY.y == plantXYZ.y) {
+      return swappedXY ? Alignment.VERTICAL : Alignment.HORIZONTAL;
+    }
+  }
+  return Alignment.NONE;
+}
+
+function rotationArray(alignment: Alignment): number[] {
+  switch (alignment) {
+    case (Alignment.HORIZONTAL):
+      return [Line.Left, Line.Right];
+    case (Alignment.VERTICAL):
+      return [Line.Up, Line.Down];
+    case (Alignment.BOTH):
+      return [Line.Left, Line.Right, Line.Up, Line.Down];
+    default:
+      return [];
+  }
+}
+
 export function DragHelpers(props: DragHelpersProps) {
-
-  function getAlignment(
-    activeXYZ: BotPosition | undefined,
-    plantXYZ: BotPosition,
-    swappedXY: Boolean
-  ): Alignment {
-    if (activeXYZ && !isUndefined(activeXYZ.x) && !isUndefined(activeXYZ.y)) {
-      // Plant editing (dragging) is occuring
-      const activeXY = { x: round(activeXYZ.x), y: round(activeXYZ.y) };
-      if (activeXY.x == plantXYZ.x && activeXY.y == plantXYZ.y) {
-        return Alignment.BOTH;
-      }
-      if (activeXY.x == plantXYZ.x) {
-        return swappedXY ? Alignment.HORIZONTAL : Alignment.VERTICAL;
-      }
-      if (activeXY.y == plantXYZ.y) {
-        return swappedXY ? Alignment.VERTICAL : Alignment.HORIZONTAL;
-      }
-    }
-    return Alignment.NONE;
-  }
-
-  function rotationArray(alignment: Alignment): number[] {
-    switch (alignment) {
-      case (Alignment.HORIZONTAL):
-        return [Line.Left, Line.Right];
-      case (Alignment.VERTICAL):
-        return [Line.Up, Line.Down];
-      case (Alignment.BOTH):
-        return [Line.Left, Line.Right, Line.Up, Line.Down];
-      default:
-        return [];
-    }
-  }
-
   const {
     dragging, plant, zoomLvl, activeDragXY, mapTransformProps, plantAreaOffset
   } = props;
diff --git a/webpack/farm_designer/plants/__tests__/create_points_test.tsx b/webpack/farm_designer/plants/__tests__/create_points_test.tsx
index 45737ab6d..700cbffdf 100644
--- a/webpack/farm_designer/plants/__tests__/create_points_test.tsx
+++ b/webpack/farm_designer/plants/__tests__/create_points_test.tsx
@@ -67,8 +67,11 @@ describe("<CreatePoints />", () => {
   it("changes color", () => {
     const p = fakeProps();
     p.currentPoint = { cx: 0, cy: 0, r: 0 };
-    const wrapper = shallow(<CreatePoints {...p} />);
-    wrapper.find("ColorPicker").simulate("change", "red");
+    const wrapper = mount(<CreatePoints {...p} />);
+    // tslint:disable-next-line:no-any
+    const instance = wrapper.instance() as any;
+    const component = shallow(<instance.PointProperties />);
+    component.find("ColorPicker").simulate("change", "red");
     expect(p.dispatch).toHaveBeenCalledWith({
       payload: { color: "red", cx: 0, cy: 0, r: 0 },
       type: Actions.SET_CURRENT_POINT_DATA
@@ -79,7 +82,10 @@ describe("<CreatePoints />", () => {
     const p = fakeProps();
     p.currentPoint = { cx: 0, cy: 0, r: 0 };
     const wrapper = shallow(<CreatePoints {...p} />);
-    wrapper.find("BlurableInput").first().simulate("commit", {
+    // tslint:disable-next-line:no-any
+    const instance = wrapper.instance() as any;
+    const component = shallow(<instance.PointProperties />);
+    component.find("BlurableInput").first().simulate("commit", {
       currentTarget: { value: "10" }
     });
     expect(p.dispatch).toHaveBeenCalledWith({
diff --git a/webpack/farm_designer/plants/create_points.tsx b/webpack/farm_designer/plants/create_points.tsx
index 9a69f81f6..251c7b16b 100644
--- a/webpack/farm_designer/plants/create_points.tsx
+++ b/webpack/farm_designer/plants/create_points.tsx
@@ -119,8 +119,76 @@ export class CreatePoints
     this.cancel();
   }
 
-  render() {
+  PointProperties = () => {
     const { cx, cy, r, color } = this.state;
+    return <Row>
+      <Col xs={3}>
+        <label>{t("X")}</label>
+        <BlurableInput
+          name="cx"
+          type="number"
+          onCommit={this.update("cx")}
+          value={cx || 0} />
+      </Col>
+      <Col xs={3}>
+        <label>{t("Y")}</label>
+        <BlurableInput
+          name="cy"
+          type="number"
+          onCommit={this.update("cy")}
+          value={cy || 0} />
+      </Col>
+      <Col xs={3}>
+        <label>{t("radius")}</label>
+        <BlurableInput
+          name="r"
+          type="number"
+          onCommit={this.update("r")}
+          value={r || 0} />
+      </Col>
+      <Col xs={3}>
+        <label>{t("color")}</label>
+        <ColorPicker
+          current={color as Color || "green"}
+          onChange={this.changeColor} />
+      </Col>
+    </Row>;
+  }
+
+  PointActions = () =>
+    <Row>
+      <button className="fb-button green"
+        onClick={this.createPoint}>
+        {t("Create point")}
+      </button>
+      <button className="fb-button yellow"
+        onClick={this.updateCurrentPoint}>
+        {t("Update")}
+      </button>
+      <button className="fb-button gray"
+        onClick={this.cancel}>
+        {t("Cancel")}
+      </button>
+    </Row>
+
+  DeleteAllPoints = () =>
+    <Row>
+      <div className="delete-row">
+        <label>{t("delete")}</label>
+        <p>{t("Delete all of the points created through this panel.")}</p>
+        <button className="fb-button red delete"
+          onClick={() => {
+            if (confirm(t("Delete all the points you have created?"))) {
+              this.props.dispatch(deletePoints("points", "farm-designer"));
+              this.cancel();
+            }
+          }}>
+          {t("Delete all created points")}
+        </button>
+      </div>
+    </Row>
+
+  render() {
     return <div
       className="panel-container brown-panel point-creation-panel">
       <div className="panel-header brown-panel">
@@ -134,67 +202,9 @@ export class CreatePoints
       </div>
 
       <div className="panel-content">
-        <Row>
-          <Col xs={3}>
-            <label>{t("X")}</label>
-            <BlurableInput
-              name="cx"
-              type="number"
-              onCommit={this.update("cx")}
-              value={cx || 0} />
-          </Col>
-          <Col xs={3}>
-            <label>{t("Y")}</label>
-            <BlurableInput
-              name="cy"
-              type="number"
-              onCommit={this.update("cy")}
-              value={cy || 0} />
-          </Col>
-          <Col xs={3}>
-            <label>{t("radius")}</label>
-            <BlurableInput
-              name="r"
-              type="number"
-              onCommit={this.update("r")}
-              value={r || 0} />
-          </Col>
-          <Col xs={3}>
-            <label>{t("color")}</label>
-            <ColorPicker
-              current={color as Color || "green"}
-              onChange={this.changeColor} />
-          </Col>
-        </Row>
-        <Row>
-          <button className="fb-button green"
-            onClick={this.createPoint}>
-            {t("Create point")}
-          </button>
-          <button className="fb-button yellow"
-            onClick={this.updateCurrentPoint}>
-            {t("Update")}
-          </button>
-          <button className="fb-button gray"
-            onClick={this.cancel}>
-            {t("Cancel")}
-          </button>
-        </Row>
-        <Row>
-          <div className="delete-row">
-            <label>{t("delete")}</label>
-            <p>{t("Delete all of the points created through this panel.")}</p>
-            <button className="fb-button red delete"
-              onClick={() => {
-                if (confirm("Delete all the points you have created?")) {
-                  this.props.dispatch(deletePoints("points", "farm-designer"));
-                  this.cancel();
-                }
-              }}>
-              {t("Delete all created points")}
-            </button>
-          </div>
-        </Row>
+        <this.PointProperties />
+        <this.PointActions />
+        <this.DeleteAllPoints />
       </div>
     </div>;
   }