From d71ca584142e2994306c240ed369f95c800d6ecb Mon Sep 17 00:00:00 2001
From: Alex Mikhalev <alexmikhalevalex@gmail.com>
Date: Sun, 10 Sep 2017 17:06:11 -0600
Subject: [PATCH] Good changes

---
 app/components/DeviceView.tsx  | 33 ++++++++++++++++++++++++++++-----
 app/components/DevicesView.tsx |  8 +++-----
 app/state/index.ts             | 13 ++++++++-----
 app/state/inject.tsx           |  2 +-
 4 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/app/components/DeviceView.tsx b/app/components/DeviceView.tsx
index d7d19c3..c2fae5f 100644
--- a/app/components/DeviceView.tsx
+++ b/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));
diff --git a/app/components/DevicesView.tsx b/app/components/DevicesView.tsx
index 5e37918..0b4538d 100644
--- a/app/components/DevicesView.tsx
+++ b/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);
diff --git a/app/state/index.ts b/app/state/index.ts
index 7ce8922..a4708d2 100644
--- a/app/state/index.ts
+++ b/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();
     }
 }
 
diff --git a/app/state/inject.tsx b/app/state/inject.tsx
index 0196872..a424066 100644
--- a/app/state/inject.tsx
+++ b/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;