Fixed lots of lint issues

app/components/DeviceView.tsx

@@ -13,7 +13,7 @@ import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".
 import "@app/styles/DeviceView";
 
 const ConnectionState = observer(({ connectionState, className }:
-                                      { connectionState: ConState, className?: string }) => {
+    { connectionState: ConState, className?: string }) => {
     const connected = connectionState.isDeviceConnected;
     let connectionText: string;
     let iconName: SemanticICONS = "unlinkify";
@@ -37,7 +37,7 @@ const ConnectionState = observer(({ connectionState, className }:
     const classes = classNames("connectionState", clazzName, className);
     return (
         <div className={classes}>
-            <Icon name={iconName}/>&nbsp;
+            <Icon name={iconName} />&nbsp;
             {connectionText}
         </div>
     );
@@ -57,26 +57,26 @@ class DeviceView extends React.Component<DeviceViewProps & RouteComponentProps<a
             <React.Fragment>
                 <Grid>
                     <Grid.Column mobile="16" tablet="16" computer="16" largeScreen="6">
-                        <SectionRunnerView sectionRunner={sectionRunner} sections={sections}/>
+                        <SectionRunnerView sectionRunner={sectionRunner} sections={sections} />
                     </Grid.Column>
                     <Grid.Column mobile="16" tablet="9" computer="9" largeScreen="6">
-                        <SectionTable sections={sections}/>
+                        <SectionTable sections={sections} />
                     </Grid.Column>
                     <Grid.Column mobile="16" tablet="7" computer="7" largeScreen="4">
-                        <RunSectionForm device={device} uiStore={uiStore}/>
+                        <RunSectionForm device={device} uiStore={uiStore} />
                     </Grid.Column>
                 </Grid>
-                <ProgramTable device={device} routerStore={routerStore}/>
-                <Route path={rp.program(":deviceId", ":programId")} component={p.ProgramPage}/>
+                <ProgramTable device={device} routerStore={routerStore} />
+                <Route path={rp.program(":deviceId", ":programId")} component={p.ProgramPage} />
             </React.Fragment>
         );
         return (
             <Item>
-                <Item.Image src={require("@app/images/raspberry_pi.png")}/>
+                <Item.Image src={require("@app/images/raspberry_pi.png")} />
                 <Item.Content className="device">
                     <Header as="h1">
                         <div>Device <kbd>{id}</kbd></div>
-                        <ConnectionState connectionState={connectionState}/>
+                        <ConnectionState connectionState={connectionState} />
                     </Header>
                     <Item.Meta>
                         Raspberry Pi Grinklers Device

app/components/ProgramTable.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { RouterStore } from "mobx-react-router";
 import * as React from "react";
 import { Link } from "react-router-dom";
-import { Button, ButtonProps, Icon, Table } from "semantic-ui-react";
+import { Button, ButtonProps, Form, Icon, Table } from "semantic-ui-react";
 
 import { ProgramSequenceView, ScheduleView } from "@app/components";
 import * as rp from "@app/routePaths";
@@ -41,11 +41,11 @@ class ProgramRows extends React.Component<{
                 <Table.Cell>
                     {stopStartButton}
                     <Button as={Link} to={detailUrl} {...buttonStyle} primary>
-                        <Icon name="edit"/>
+                        <Icon name="edit" />
                         Open
                     </Button>
                     <Button onClick={this.toggleExpanded} {...buttonStyle}>
-                        <Icon name="list"/>
+                        <Icon name="list" />
                         {expanded ? "Hide Details" : "Show Details"}
                     </Button>
                 </Table.Cell>
@@ -54,8 +54,10 @@ class ProgramRows extends React.Component<{
         const detailRow = expanded && (
             <Table.Row>
                 <Table.Cell className="program--sequence" colSpan="5">
-                    <h4>Sequence: </h4> <ProgramSequenceView sequence={sequence} sections={sections}/>
-                    <h4>Schedule: </h4> <ScheduleView schedule={schedule}/>
+                    <Form>
+                        <h4>Sequence: </h4> <ProgramSequenceView sequence={sequence} sections={sections} />
+                        <ScheduleView schedule={schedule} label={<h4>Schedule: </h4>} />
+                    </Form>
                 </Table.Cell>
             </Table.Row>
         );

app/components/ScheduleView/ScheduleDate.tsx

@@ -42,7 +42,7 @@ export default class ScheduleDate extends React.Component<ScheduleDateProps, Sch
             if (date) {
                 clearIcon = <Icon name="ban" link onClick={this.onClear} />;
             }
-            dayNode = <Input type="date" icon={clearIcon} value={this.state.rawValue} onChange={this.onChange}/>;
+            dayNode = <Input type="date" icon={clearIcon} value={this.state.rawValue} onChange={this.onChange} />;
         } else {
             let dayString: string;
             if (date) {
@@ -56,7 +56,7 @@ export default class ScheduleDate extends React.Component<ScheduleDateProps, Sch
 
         let labelNode: React.ReactNode = null;
         if (typeof label === "string") {
-            labelNode = <label>{label}</label>
+            labelNode = <label>{label}</label>;
         } else if (label != null) {
             labelNode = label;
         }

app/components/ScheduleView/ScheduleTimes.tsx

@@ -27,10 +27,11 @@ export default class ScheduleTimes extends React.Component<{
                 </span>
             );
         }
-        return (<Form.Field inline className="scheduleTimes">
-            <label>At</label>
-            {timesNode}
-        </Form.Field>);
+        return (
+            <Form.Field inline className="scheduleTimes">
+                <label>At</label> {timesNode}
+            </Form.Field>
+        );
     }
     private onTimeChange = (newTime: TimeOfDay, index: number) => {
         const { times, onChange } = this.props;

app/components/ScheduleView/TimeInput.tsx

@@ -28,18 +28,22 @@ export default class TimeInput extends React.Component<TimeInputProps, TimeInput
         }
         return {};
     }
+
     constructor(p: any) {
         super(p);
         this.state = { rawValue: "", lastTime: null };
     }
+
     render() {
         return <Input type="time" value={this.state.rawValue} onChange={this.onChange} onBlur={this.onBlur} />;
     }
+
     private onChange = (e: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
         this.setState({
             rawValue: data.value,
         });
-    };
+    }
+
     private onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
         const m = moment(this.state.rawValue, HTML_TIME_INPUT_FORMAT);
         if (m.isValid()) {
@@ -47,5 +51,5 @@ export default class TimeInput extends React.Component<TimeInputProps, TimeInput
         } else {
             this.setState({ rawValue: timeOfDayToHtmlDateInput(this.props.value) });
         }
-    };
+    }
 }

app/components/ScheduleView/WeekdaysView.tsx

@@ -31,9 +31,11 @@ export default class WeekdaysView extends React.Component<WeekdaysViewProps> {
         } else {
             node = weekdays.map((weekday) => Weekday[weekday]).join(", ");
         }
-        return (<Form.Group inline>
-            <label>On</label> {node}
-        </Form.Group>);
+        return (
+            <Form.Group inline>
+                <label>On</label> {node}
+            </Form.Group>
+        );
     }
     private toggleWeekday = (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => {
         const { weekdays, onChange } = this.props;

app/components/ScheduleView/index.tsx

@@ -23,7 +23,7 @@ export default class ScheduleView extends React.Component<ScheduleViewProps> {
 
         let labelNode: React.ReactNode;
         if (typeof label === "string") {
-            labelNode = <label>{label}</label>
+            labelNode = <label>{label}</label>;
         } else if (label != null) {
             labelNode = label;
         }
@@ -31,10 +31,10 @@ export default class ScheduleView extends React.Component<ScheduleViewProps> {
         return (
             <Form.Field className="scheduleView">
                 {labelNode}
-                <ScheduleTimes times={schedule.times} editing={editing} onChange={this.updateTimes}/>
-                <WeekdaysView weekdays={schedule.weekdays} editing={editing} onChange={this.updateWeekdays}/>
-                <ScheduleDate label="From" date={schedule.from} editing={editing} onChange={this.updateFromDate}/>
-                <ScheduleDate label="To" date={schedule.to} editing={editing} onChange={this.updateToDate}/>
+                <ScheduleTimes times={schedule.times} editing={editing} onChange={this.updateTimes} />
+                <WeekdaysView weekdays={schedule.weekdays} editing={editing} onChange={this.updateWeekdays} />
+                <ScheduleDate label="From" date={schedule.from} editing={editing} onChange={this.updateFromDate} />
+                <ScheduleDate label="To" date={schedule.to} editing={editing} onChange={this.updateToDate} />
             </Form.Field>
         );
     }

app/pages/ProgramPage.tsx

@@ -71,7 +71,7 @@ class ProgramPage extends React.Component<ProgramPageProps> {
         } else {
             editButtons = (
                 <Button primary onClick={this.startEditing}>
-                    <Icon name="edit"/>
+                    <Icon name="edit" />
                     Edit
                 </Button>
             );
@@ -141,11 +141,15 @@ class ProgramPage extends React.Component<ProgramPageProps> {
                                 readOnly={!editing}
                                 onChange={this.onEnabledChange}
                             />
-                            <Form.Checkbox toggle label="Running" checked={running} readOnly={!editing}/>
+                            <Form.Checkbox toggle label="Running" checked={running} readOnly={!editing} />
                         </Form.Group>
                         <Form.Field>
                             <label><h4>Sequence</h4></label>
-                            <ProgramSequenceView sequence={sequence} sections={this.device.sections} editing={editing}/>
+                            <ProgramSequenceView
+                                sequence={sequence}
+                                sections={this.device.sections}
+                                editing={editing}
+                            />
                         </Form.Field>
                         <ScheduleView schedule={schedule} editing={editing} label={<h4>Schedule</h4>} />
                     </Form>