From c4bf151a303902c2301651202695f351f159abd8 Mon Sep 17 00:00:00 2001
From: Rick Carlino <rick.carlino@gmail.com>
Date: Tue, 12 Dec 2017 10:03:04 -0600
Subject: [PATCH] [UNSTABLE] Type errors gone. NEXT: test suite

---
 webpack/api/api.ts                                | 15 ---------------
 webpack/controls/axis_input_box_group.tsx         |  4 ++--
 webpack/controls/peripherals/index.tsx            |  4 ++--
 webpack/devices/components/pin_bindings.tsx       |  8 ++++----
 .../farm_designer/farm_events/add_farm_event.tsx  |  4 ++--
 webpack/farm_designer/map/garden_map.tsx          |  4 ++--
 webpack/farmware/farmware_panel.tsx               |  4 ++--
 .../__tests__/image_workspace_test.tsx            |  2 +-
 webpack/farmware/weed_detector/constants.ts       |  2 +-
 webpack/farmware/weed_detector/farmbot_picker.tsx |  4 ++--
 webpack/farmware/weed_detector/index.tsx          |  4 ++--
 webpack/front_page/front_page.tsx                 |  4 ++--
 webpack/password_reset/password_reset.tsx         |  4 ++--
 webpack/tos_update/index.tsx                      |  4 ++--
 webpack/ui/save_button.tsx                        |  8 ++++----
 15 files changed, 30 insertions(+), 45 deletions(-)

diff --git a/webpack/api/api.ts b/webpack/api/api.ts
index 50ef83d71..c7b06ad3e 100644
--- a/webpack/api/api.ts
+++ b/webpack/api/api.ts
@@ -72,27 +72,12 @@ export class API {
 
   /** "https:" or "http:". NO "//"! */
   private readonly protocol: ProtocolString;
-  /** "localhost", "yahoo.com" */
-  private readonly hostname: string;
-  /** "80", "443" or "" */
-  private readonly port: string;
-  /** "/pathname/x/whatever" or "/foo/" */
-  private readonly pathname: string;
-  /** "?foo=bar" */
-  private readonly search: string;
-  /** "#hashfragment" */
-  private readonly hash: string;
   /** "example.com:3000" */
   private readonly host: string;
 
   constructor(input: string) {
     const url = API.parseURL(input);
     this.protocol = url.protocol as ProtocolString;
-    this.hostname = url.hostname;
-    this.port = url.port;
-    this.pathname = url.pathname;
-    this.search = url.search;
-    this.hash = url.hash;
     this.host = url.host;
   }
 
diff --git a/webpack/controls/axis_input_box_group.tsx b/webpack/controls/axis_input_box_group.tsx
index 3e43a49bc..e07ce22c7 100644
--- a/webpack/controls/axis_input_box_group.tsx
+++ b/webpack/controls/axis_input_box_group.tsx
@@ -11,8 +11,8 @@ import * as _ from "lodash";
 
 export class AxisInputBoxGroup extends
   React.Component<AxisInputBoxGroupProps, Partial<AxisInputBoxGroupState>> {
-  constructor() {
-    super();
+  constructor(props: AxisInputBoxGroupProps) {
+    super(props);
     this.state = {};
   }
 
diff --git a/webpack/controls/peripherals/index.tsx b/webpack/controls/peripherals/index.tsx
index 14c512a84..04e1eb863 100644
--- a/webpack/controls/peripherals/index.tsx
+++ b/webpack/controls/peripherals/index.tsx
@@ -12,8 +12,8 @@ import { ToolTips } from "../../constants";
 import * as _ from "lodash";
 
 export class Peripherals extends React.Component<PeripheralsProps, PeripheralState> {
-  constructor() {
-    super();
+  constructor(props: PeripheralsProps) {
+    super(props);
     this.state = { isEditing: false };
   }
 
diff --git a/webpack/devices/components/pin_bindings.tsx b/webpack/devices/components/pin_bindings.tsx
index 1327fce36..913f4c591 100644
--- a/webpack/devices/components/pin_bindings.tsx
+++ b/webpack/devices/components/pin_bindings.tsx
@@ -34,8 +34,8 @@ enum ColumnWidth {
 
 export class PinBindings
   extends React.Component<PinBindingsProps, PinBindingsState> {
-  constructor() {
-    super();
+  constructor(props: PinBindingsProps) {
+    super(props);
     this.state = {
       isEditing: false,
       pinNumberInput: undefined,
@@ -97,8 +97,8 @@ export class PinBindings
                 {`Pi GPIO ${pin_number}`}
               </Col>
               <Col xs={ColumnWidth.sequence}>
-                {findSequenceById(
-                  resources, parseInt(sequence_id)).body.name}
+                {sequence_id ? findSequenceById(
+                  resources, parseInt(sequence_id)).body.name : ""}
               </Col>
               <Col xs={ColumnWidth.button}>
                 <button
diff --git a/webpack/farm_designer/farm_events/add_farm_event.tsx b/webpack/farm_designer/farm_events/add_farm_event.tsx
index f8cb92f5f..3670488b0 100644
--- a/webpack/farm_designer/farm_events/add_farm_event.tsx
+++ b/webpack/farm_designer/farm_events/add_farm_event.tsx
@@ -24,8 +24,8 @@ interface State {
 export class AddFarmEvent
   extends React.Component<AddEditFarmEventProps, Partial<State>> {
 
-  constructor() {
-    super();
+  constructor(props: AddEditFarmEventProps) {
+    super(props);
     this.state = {};
   }
 
diff --git a/webpack/farm_designer/map/garden_map.tsx b/webpack/farm_designer/map/garden_map.tsx
index f8d4f8814..db7af901e 100644
--- a/webpack/farm_designer/map/garden_map.tsx
+++ b/webpack/farm_designer/map/garden_map.tsx
@@ -34,8 +34,8 @@ const DRAG_ERROR = `ERROR - Couldn't get zoom level of garden map, check the
 
 export class GardenMap extends
   React.Component<GardenMapProps, Partial<GardenMapState>> {
-  constructor() {
-    super();
+  constructor(props: GardenMapProps) {
+    super(props);
     this.state = {};
   }
 
diff --git a/webpack/farmware/farmware_panel.tsx b/webpack/farmware/farmware_panel.tsx
index 2de97228f..9a4697986 100644
--- a/webpack/farmware/farmware_panel.tsx
+++ b/webpack/farmware/farmware_panel.tsx
@@ -47,8 +47,8 @@ export function FarmwareConfigMenu(props: FarmwareConfigMenuProps) {
 }
 
 export class FarmwarePanel extends React.Component<FWProps, Partial<FWState>> {
-  constructor() {
-    super();
+  constructor(props: FWProps) {
+    super(props);
     this.state = { showFirstParty: false };
   }
 
diff --git a/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx b/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx
index 080c5b2a2..423c7f463 100644
--- a/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx
+++ b/webpack/farmware/weed_detector/__tests__/image_workspace_test.tsx
@@ -23,7 +23,7 @@ describe("<Body/>", () => {
   it("triggers onChange() event", () => {
     jest.clearAllMocks();
     const props = fakeProps();
-    const iw = new ImageWorkspace();
+    const iw = new ImageWorkspace(props);
     iw.props = props;
     iw.onHslChange("H")([4, 5]);
     expect(props.onChange).toHaveBeenCalledTimes(2);
diff --git a/webpack/farmware/weed_detector/constants.ts b/webpack/farmware/weed_detector/constants.ts
index 633310527..f47b10fbe 100644
--- a/webpack/farmware/weed_detector/constants.ts
+++ b/webpack/farmware/weed_detector/constants.ts
@@ -2,7 +2,7 @@ import { DropDownItem } from "../../ui/index";
 import { SPECIAL_VALUES } from "./remote_env/constants";
 
 /** Mapping of SPECIAL_VALUE numeric codes into corresponding drop down items. */
-export const SPECIAL_VALUE_DDI = {
+export const SPECIAL_VALUE_DDI: { [index: number]: DropDownItem } = {
   [SPECIAL_VALUES.X]: {
     label: "X",
     value: SPECIAL_VALUES.X
diff --git a/webpack/farmware/weed_detector/farmbot_picker.tsx b/webpack/farmware/weed_detector/farmbot_picker.tsx
index fbaf763d3..c1836791c 100644
--- a/webpack/farmware/weed_detector/farmbot_picker.tsx
+++ b/webpack/farmware/weed_detector/farmbot_picker.tsx
@@ -47,8 +47,8 @@ export function getHueBoxes(
 }
 
 export class FarmbotColorPicker extends React.Component<FarmbotPickerProps, {}> {
-  constructor() {
-    super();
+  constructor(props: FarmbotPickerProps) {
+    super(props);
     this.state = {};
   }
 
diff --git a/webpack/farmware/weed_detector/index.tsx b/webpack/farmware/weed_detector/index.tsx
index 306d4a26f..02c052dc6 100644
--- a/webpack/farmware/weed_detector/index.tsx
+++ b/webpack/farmware/weed_detector/index.tsx
@@ -19,8 +19,8 @@ import { translateImageWorkspaceAndSave } from "./actions";
 @connect(mapStateToProps)
 export class WeedDetector
   extends React.Component<FarmwareProps, Partial<DetectorState>> {
-  constructor() {
-    super();
+  constructor(props: FarmwareProps) {
+    super(props);
     this.state = { remoteFarmwareSettings: {} };
   }
 
diff --git a/webpack/front_page/front_page.tsx b/webpack/front_page/front_page.tsx
index 8a34be6b1..71d815b7c 100644
--- a/webpack/front_page/front_page.tsx
+++ b/webpack/front_page/front_page.tsx
@@ -15,8 +15,8 @@ import { ResendVerification } from "./resend_verification";
 import { CreateAccount } from "./create_account";
 
 export class FrontPage extends React.Component<{}, Partial<FrontPageState>> {
-  constructor() {
-    super();
+  constructor(props: {}) {
+    super(props);
     this.state = {
       registrationSent: false,
       regEmail: "",
diff --git a/webpack/password_reset/password_reset.tsx b/webpack/password_reset/password_reset.tsx
index f67692289..1e4767096 100644
--- a/webpack/password_reset/password_reset.tsx
+++ b/webpack/password_reset/password_reset.tsx
@@ -17,8 +17,8 @@ export interface State {
 export interface Props { }
 
 export class PasswordReset extends React.Component<Props, State> {
-  constructor() {
-    super();
+  constructor(props: Props) {
+    super(props);
     this.state = {
       password: "",
       passwordConfirmation: "",
diff --git a/webpack/tos_update/index.tsx b/webpack/tos_update/index.tsx
index bb187775c..473928749 100644
--- a/webpack/tos_update/index.tsx
+++ b/webpack/tos_update/index.tsx
@@ -21,8 +21,8 @@ interface State {
 }
 
 export class TosUpdate extends React.Component<Props, Partial<State>> {
-  constructor() {
-    super();
+  constructor(props: Props) {
+    super(props);
     this.submit = this.submit.bind(this);
     this.toggleServerOpts = this.toggleServerOpts.bind(this);
     this.state = {
diff --git a/webpack/ui/save_button.tsx b/webpack/ui/save_button.tsx
index f5dd0f3ad..9ef283c5f 100644
--- a/webpack/ui/save_button.tsx
+++ b/webpack/ui/save_button.tsx
@@ -21,23 +21,23 @@ interface SaveBtnProps {
 const spinner = <span className="btn-spinner" />;
 
 export function SaveBtn(props: SaveBtnProps) {
-  const STATUS_TRANSLATION = {
+  const STATUS_TRANSLATION: Partial<Record<SpecialStatus, string>> = {
     [SpecialStatus.DIRTY]: "is-dirty",
     [SpecialStatus.SAVING]: "is-saving"
   };
 
-  const CAPTIONS = {
+  const CAPTIONS: Partial<Record<SpecialStatus, string>> = {
     [SpecialStatus.DIRTY]: t((props.dirtyText || "Save ") + " *"),
     [SpecialStatus.SAVING]: t(props.savingText || "Saving")
   };
 
-  const { onClick, hidden } = props;
+  const { savedText, onClick, hidden } = props;
   const statusClass = STATUS_TRANSLATION[props.status || ""] || "is-saved";
   const klass = `${props.color || "green"} ${statusClass} save-btn fb-button`;
   const spinnerEl = (props.status === SpecialStatus.SAVING) ?
     spinner : "";
 
   return <button onClick={onClick} hidden={!!hidden} className={klass} >
-    {CAPTIONS["" + props.status] || (t(savedText || "Saved ") + " ✔")} {spinnerEl}
+    {CAPTIONS[props.status] || (t(savedText || "Saved ") + " ✔")} {spinnerEl}
   </button>;
 }