Started more work on good stuff

app/components/MessagesView.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Message, TransitionGroup } from "semantic-ui-react";
+import { Message, MessageProps, TransitionGroup } from "semantic-ui-react";
 
 import { Message as UiMessage, UiStore } from "@app/ui";
 
@@ -11,23 +11,21 @@ class MessageView extends React.Component<{
 }> {
 
     render() {
-        const { header, content, type } = this.props.message;
+        const { id, ...messageProps } = this.props.message;
         return (
             <Message
-                header={header}
+                {...messageProps}
-                content={content}
-                success={type === UiMessage.Type.Success}
-                info={type === UiMessage.Type.Info}
-                warning={type === UiMessage.Type.Warning}
-                error={type === UiMessage.Type.Error}
                 onDismiss={this.dismiss}
             />
         );
     }
 
-    private dismiss = () => {
+    private dismiss = (event: React.MouseEvent<HTMLElement>, data: MessageProps) => {
         const { uiStore, index } = this.props;
         uiStore.messages.splice(index, 1);
+        if (this.props.message.onDismiss) {
+            this.props.message.onDismiss(event, data);
+        }
     }
 }
 

app/di.ts

@@ -0,0 +1,16 @@
+import * as PropTypes from "prop-types";
+import * as React from "react";
+
+export class Provider<T extends {}> extends React.Component<T> {
+    static childContextTypes = {
+        injected: any,
+    };
+}
+
+export function inject<P, T extends React.ComponentType<P>>(...names: string[]): (base: T) => React.ComponentClass<T> {
+    return (Component) => {
+        return class extends React.Component<T> {
+
+        };
+    };
+}

app/index.tsx

@@ -3,14 +3,6 @@ import * as ReactDOM from "react-dom";
 import { AppContainer } from "react-hot-loader";
 
 import App from "@app/components/App";
-import { MqttApiClient } from "@app/mqtt";
-import { Message, UiStore } from "@app/ui";
-
-const client = new MqttApiClient();
-client.start();
-const device = client.getDevice("grinklers");
-const uiStore = new UiStore();
-uiStore.addMessage(new Message("asdf", "boo!", Message.Type.Error));
 
 const rootElem = document.getElementById("app");
 

app/state/index.ts

@@ -0,0 +1,22 @@
+import { MqttApiClient } from "@app/mqtt";
+import { Message, UiStore } from "@app/ui";
+import { ISprinklersApi, SprinklersDevice } from "@common/sprinklers";
+
+export class State {
+    client: ISprinklersApi = new MqttApiClient();
+    device: SprinklersDevice;
+    uiStore = new UiStore();
+
+    constructor() {
+        const device = this.client.getDevice("grinklers");
+        this.uiStore.addMessage({ header: "asdf", content: "boo!", error: true });
+    }
+
+    start() {
+        this.client.start();
+    }
+}
+
+const state = new State();
+
+export default state;

app/ui.ts

@@ -1,32 +1,20 @@
-import {observable} from "mobx";
+import { IObservableArray, observable } from "mobx";
+import { MessageProps } from "semantic-ui-react";
 
 import { getRandomId } from "@common/utils";
 
-export class Message {
+export interface Message extends MessageProps {
-    id: string;
+    id: number;
-    header: string = "";
-    content: string = "";
-    type: Message.Type = Message.Type.Default;
-
-    constructor(header: string, content: string = "", type: Message.Type = Message.Type.Default) {
-        this.id = "" + getRandomId();
-        this.header = header;
-        this.content = content;
-        this.type = type;
-    }
-}
-
-export namespace Message {
-    export enum Type {
-        Default, Success, Info, Warning, Error,
-    }
 }
 
 export class UiStore {
     @observable
-    messages: Message[] = [];
+    messages: IObservableArray<Message> = observable.array();
 
-    addMessage(message: Message) {
+    addMessage(message: MessageProps) {
-        this.messages.push(message);
+        this.messages.push(observable({
+            ...message,
+            id: getRandomId(),
+        }));
     }
 }

package.json

@@ -33,6 +33,7 @@
     "@types/node": "^8.0.6",
     "@types/object-assign": "^4.0.30",
     "@types/paho-mqtt": "^1.0.0",
+    "@types/prop-types": "^15.5.1",
     "@types/react": "^16",
     "@types/react-dom": "^15.5.0",
     "@types/react-fontawesome": "^1.5.0",
@@ -47,6 +48,7 @@
     "mobx-react": "^4.2.1",
     "object-assign": "^4.1.1",
     "paho-mqtt": "^1.0.3",
+    "prop-types": "^15.5.10",
     "react": ">=16.0.0-beta.5 <17",
     "react-dom": ">=16.0.0-beta.5 <17",
     "react-fontawesome": "^1.6.1",

yarn.lock

@@ -49,6 +49,10 @@
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/paho-mqtt/-/paho-mqtt-1.0.0.tgz#9dc7d4d98dac7940187f6ccb77aab649249d0799"
 
+"@types/prop-types@^15.5.1":
+  version "15.5.1"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.1.tgz#1ecf52621299e65b855374337fb11fd2d1066fc1"
+
 "@types/react-dom@^15.5.0":
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.4.tgz#3f75ba86a2ce9a7d1d9e7d1ee3f186f3a9652d8f"