Good changes

app/components/DeviceView.tsx

@@ -3,9 +3,10 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import FontAwesome = require("react-fontawesome");
 import { Header, Item } from "semantic-ui-react";
-import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
 
+import { injectState, State } from "@app/state";
 import { SprinklersDevice } from "@common/sprinklers";
+import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
 
 const ConnectionState = ({ connected }: { connected: boolean }) => {
     const classes = classNames({
@@ -21,12 +22,27 @@ const ConnectionState = ({ connected }: { connected: boolean }) => {
     );
 };
 
-class DeviceView extends React.Component<{ device: SprinklersDevice }> {
+interface DeviceViewProps {
+    deviceId: string;
+    state: State;
+}
+
+class DeviceView extends React.Component<DeviceViewProps> {
+    device: SprinklersDevice;
+
+    componentWillMount() {
+        this.updateDevice();
+    }
+
+    componentWillUpdate() {
+        this.updateDevice();
+    }
+
     render() {
-        const { id, connected, sections, programs, sectionRunner } = this.props.device;
+        const { id, connected, sections, programs, sectionRunner } = this.device;
         return (
             <Item>
-                <Item.Image src={require<string>("@app/images/raspberry_pi.png")} />
+                <Item.Image src={require("@app/images/raspberry_pi.png")} />
                 <Item.Content>
                     <Header as="h1">
                         <span>Device </span><kbd>{id}</kbd>
@@ -43,6 +59,13 @@ class DeviceView extends React.Component<{ device: SprinklersDevice }> {
             </Item>
         );
     }
+
+    private updateDevice() {
+        const { state, deviceId } = this.props;
+        if (!this.device || this.device.id !== deviceId) {
+            this.device = state.sprinklersApi.getDevice(deviceId);
+        }
+    }
 }
 
-export default observer(DeviceView);
+export default injectState(observer(DeviceView));

app/components/DevicesView.tsx

@@ -2,13 +2,11 @@ import { observer } from "mobx-react";
 import * as React from "react";
 
 import DeviceView from "@app/components/DeviceView";
-import { injectState, State } from "@app/state";
 
-class DevicesView extends React.Component<{ state: State }> {
+class DevicesView extends React.Component {
     render() {
-        const { device } = this.props.state;
-        return <DeviceView device={device} />;
+        return <DeviceView deviceId="grinklers" />;
     }
 }
 
-export default injectState(observer(DevicesView));
+export default observer(DevicesView);

app/state/index.ts

@@ -5,18 +5,21 @@ import { UiMessage, UiStore } from "./ui";
 export { UiMessage, UiStore };
 export * from "./inject";
 
-export class State {
-    client: ISprinklersApi = new MqttApiClient();
-    device: SprinklersDevice;
+export interface IState {
+    sprinklersApi: ISprinklersApi;
+    uiStore: UiStore;
+}
+
+export class State implements IState {
+    sprinklersApi: ISprinklersApi = new MqttApiClient();
     uiStore = new UiStore();
 
     constructor() {
-        this.device = this.client.getDevice("grinklers");
         this.uiStore.addMessage({ header: "asdf", content: "boo!", error: true });
     }
 
     start() {
-        this.client.start();
+        this.sprinklersApi.start();
     }
 }
 

app/state/inject.tsx

@@ -30,7 +30,7 @@ export class ProvideState extends React.Component<{
 type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T];
 type Omit<T, K extends keyof T> = {[P in Diff<keyof T, K>]: T[P]};
 
-export function injectState<P extends { "state": State }, T extends React.ComponentClass<P>>(Component: T) {
+export function injectState<P extends { "state": State }>(Component: React.ComponentType<P>) {
     return class extends React.Component<Omit<P, "state">> {
         static contextTypes = providedStateContextTypes;
         context: IProvidedStateContext;