[STABLE] Type errors and test fixes. NEXT: Reconvert times to UTC on commit?

webpack/farm_designer/farm_events/__tests__/event_time_picker_test.tsx

@@ -0,0 +1,20 @@
+import { utcToBotTime } from "../event_time_picker";
+
+describe("utcToBotTime", () => {
+  it("adjusts local time to bot time", () => {
+    const testCases = [
+      { before: "01:51", offset: -12, after: "13:51" },
+      { before: "05:16", offset: -8, after: "21:16" },
+      { before: "14:12", offset: 8, after: "22:12" },
+      { before: "15:34", offset: 4, after: "19:34" },
+      { before: "12:51", offset: -3, after: "09:51" },
+      { before: "20:11", offset: 3, after: "23:11" },
+      { before: "17:09", offset: 9, after: "02:09" },
+      { before: "14:46", offset: 10, after: "00:46" },
+      { before: "12:43", offset: 10, after: "22:43" },
+      { before: "07:55", offset: -5, after: "02:55" }
+    ];
+    testCases
+      .map(tc => expect(utcToBotTime(tc.before, tc.offset)).toBe(tc.after));
+  });
+});

webpack/farm_designer/farm_events/__tests__/farm_event_repeat_form.tsx

@@ -11,13 +11,14 @@ const DEFAULTS: RepeatFormProps = {
   timeUnit: "daily",
   repeat: "1",
   endDate: "2017-07-26",
-  endTime: "08:57"
+  endTime: "08:57",
+  tzOffset: 0
 };
 
 enum Selectors {
   REPEAT = "BlurableInput[name=\"repeat\"]",
   END_DATE = "BlurableInput[name=\"endDate\"]",
-  END_TIME = "BlurableInput[name=\"endTime\"]",
+  END_TIME = "EventTimePicker[name=\"endTime\"]",
   TIME_UNIT = "FBSelect"
 }
 

webpack/farm_designer/farm_events/__tests__/map_state_to_props_test.ts

@@ -56,11 +56,11 @@ describe("mapStateToProps()", () => {
     const testTime = moment().startOf("hour").valueOf();
     const { calendarRows, push } = mapStateToProps(testState(testTime));
 
-    const day1Time = moment(testTime).add(1, "day");
-    const day1ItemTime = day1Time.add(2, "minutes");
-    const day2Time = moment(testTime).add(2, "days");
-    const regimenStartTime = day2Time.clone().add(1, "minutes");
-    const regimenItemTime = day2Time.clone().add(10, "minutes");
+    const day1Time = moment(testTime).utcOffset(0).add(1, "day");
+    const day1ItemTime = day1Time.utcOffset(0).add(2, "minutes");
+    const day2Time = moment(testTime).utcOffset(0).add(2, "days");
+    const regimenStartTime = day2Time.clone().utcOffset(0).add(1, "minutes");
+    const regimenItemTime = day2Time.clone().utcOffset(0).add(10, "minutes");
     expect(calendarRows).toEqual([
       {
         day: day1Time.date(),

webpack/farm_designer/farm_events/edit_fe_form.tsx

@@ -36,6 +36,7 @@ import { scheduleForFarmEvent } from "./calendar/scheduler";
 import { executableType } from "../util";
 import { Content } from "../../constants";
 import { destroyOK } from "../../resources/actions";
+import { EventTimePicker } from "./event_time_picker";
 
 type FormEvent = React.SyntheticEvent<HTMLInputElement>;
 export const NEVER: TimeUnit = "never";
@@ -254,10 +255,10 @@ export class EditFEForm extends React.Component<EditFEProps, State> {
                 onCommit={this.fieldSet("startDate")} />
             </Col>
             <Col xs={6}>
-              <BlurableInput
-                type="time"
+              <EventTimePicker
                 className="add-event-start-time"
                 name="start_time"
+                tzOffset={this.props.timeOffset}
                 value={this.fieldGet("startTime")}
                 onCommit={this.fieldSet("startTime")} />
             </Col>
@@ -270,6 +271,7 @@ export class EditFEForm extends React.Component<EditFEProps, State> {
             &nbsp;{t("Repeats?")}
           </label>
           <FarmEventRepeatForm
+            tzOffset={this.props.timeOffset}
             disabled={!allowRepeat}
             hidden={!allowRepeat}
             onChange={this.mergeState}

webpack/farm_designer/farm_events/event_time_picker.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { BlurableInput } from "../../ui/blurable_input";
+import * as moment from "moment";
+
+interface Props {
+  /** String, formatted as hh:mm (UTC 24hr time).
+   * Ex: 23:45, 06:12 */
+  value: string;
+  tzOffset: number;
+  onCommit(ev: React.SyntheticEvent<HTMLInputElement>): void;
+  disabled?: boolean;
+  name: string;
+  className: string;
+}
+
+const FORMAT = "HH:mm";
+
+/** TODO: Write good tests. */
+export function utcToBotTime(value: string, tzOffset: number) {
+  return moment(value, FORMAT).add(tzOffset, "hours").format(FORMAT);
+}
+
+export function EventTimePicker(props: Props) {
+  const { value, onCommit, tzOffset, disabled, name } = props;
+  return <BlurableInput
+    disabled={!!disabled}
+    name={name}
+    type="time"
+    className="add-event-start-time"
+    value={utcToBotTime(value, tzOffset)}
+    onCommit={onCommit} />;
+}

webpack/farm_designer/farm_events/farm_event_repeat_form.tsx

@@ -6,6 +6,7 @@ import { repeatOptions } from "./map_state_to_props_add_edit";
 import { keyBy } from "lodash";
 import { TimeUnit } from "../interfaces";
 import { FarmEventViewModel } from "./edit_fe_form";
+import { EventTimePicker } from "./event_time_picker";
 
 type Ev = React.SyntheticEvent<HTMLInputElement>;
 type Key = keyof FarmEventViewModel;
@@ -20,6 +21,7 @@ export interface RepeatFormProps {
   repeat: string;
   endDate: string;
   endTime: string;
+  tzOffset: number;
 }
 
 const indexKey: keyof DropDownItem = "value";
@@ -68,11 +70,11 @@ export function FarmEventRepeatForm(props: RepeatFormProps) {
             onCommit={changeHandler("endDate")} />
         </Col>
         <Col xs={6}>
-          <BlurableInput
+          <EventTimePicker
             disabled={disabled}
-            type="time"
             className="add-event-end-time"
             name="endTime"
+            tzOffset={props.tzOffset}
             value={endTime}
             onCommit={changeHandler("endTime")} />
         </Col>

webpack/farm_designer/farm_events/map_state_to_props.ts

@@ -4,7 +4,10 @@ import { FarmEventProps } from "../interfaces";
 import { joinFarmEventsToExecutable } from "./calendar/selectors";
 import { Calendar } from "./calendar/index";
 import { occurrence } from "./calendar/occurrence";
-import { findSequenceById, getDeviceAccountSettings } from "../../resources/selectors";
+import {
+  findSequenceById,
+  maybeGetTimeOffset
+} from "../../resources/selectors";
 import { ResourceIndex } from "../../resources/interfaces";
 import { FarmEventWithRegimen, FarmEventWithSequence } from "./calendar/interfaces";
 import { scheduleForFarmEvent } from "./calendar/scheduler";
@@ -24,7 +27,7 @@ export function mapResourcesToCalendar(
   const x = joinFarmEventsToExecutable(ri);
   const calendar = new Calendar();
   const addRegimenToCalendar = regimenCalendarAdder(ri);
-  const { tz_offset_hrs } = getDeviceAccountSettings(ri).body;
+  const tz_offset_hrs = maybeGetTimeOffset(ri);
 
   x.map(function (fe) {
     switch (fe.executable_type) {
@@ -42,7 +45,7 @@ export function mapResourcesToCalendar(
 }
 export let regimenCalendarAdder = (index: ResourceIndex) =>
   (f: FarmEventWithRegimen, c: Calendar, now = moment()) => {
-    const { tz_offset_hrs } = getDeviceAccountSettings(index).body;
+    const tz_offset_hrs = maybeGetTimeOffset(index);
     const { regimen_items } = f.executable;
     const fromEpoch = (ms: number) => moment(f.start_time)
       .startOf("day")