Working mqtt setup

src/components/App.js

@@ -15,6 +15,8 @@ import UiItemList from "components/UiItemList";
 import keyOf from "utils/keyOf";
 import { controlGetIcon } from "utils/parseIconName";
 
+import connectMqtt from "../connectMqtt";
+
 export type AppProps = {
   config: Config
 };
@@ -22,7 +24,8 @@ export type AppProps = {
 export type AppState = {
   selectedControl: ?Control,
   drawerOpened: boolean,
-  mqttState: State
+  mqttState: State,
+  mqttSend: (topic: string, value: any) => void
 };
 
 class App extends React.Component<AppProps & Classes, AppState> {
@@ -34,7 +37,11 @@ class App extends React.Component<AppProps & Classes, AppState> {
       mqttState: _.mapValues(props.config.topics, (topic) => ({
         actual: topic.defaultValue,
         internal: keyOf(topic.values, topic.defaultValue)
-      }))
+      })),
+      mqttSend: connectMqtt(props.config.space.mqtt, {
+        onMessage: this.receiveMessage.bind(this),
+        subscribe: _.map(props.config.topics, (x) => x.state)
+      })
     };
   }
 
@@ -54,6 +61,23 @@ class App extends React.Component<AppProps & Classes, AppState> {
     });
   }
 
+  receiveMessage(rawTopic: string, message: Object) {
+    const topic = _.findKey(
+      this.props.config.topics,
+      (v) => v.state === rawTopic
+    );
+    if (topic == null) {
+      return;
+    }
+    const parseValue = this.props.config.topics[topic].parseState;
+    const value = parseValue == null ? message.toString() : parseValue(message);
+    this.setState({mqttState: _.merge(this.state.mqttState,
+      { [topic]: {
+        actual: value,
+        internal: keyOf(this.props.config.topics[topic].values, value) || value
+      }})});
+  }
+
   changeControl(control: ?Control = null) {
     this.setState({selectedControl: control, drawerOpened: control != null});
   }
@@ -63,11 +87,14 @@ class App extends React.Component<AppProps & Classes, AppState> {
   }
 
   changeState(topic: string, value: any) {
-    this.setState({mqttState: _.merge(this.state.mqttState,
-      { [topic]: {
-        actual: this.props.config.topics[topic].values[value],
-        internal: value
-      }})});
+    const rawTopic = this.props.config.topics[topic].command;
+    if (rawTopic == null) {
+      return;
+    }
+    this.state.mqttSend(
+      rawTopic,
+      String(this.props.config.topics[topic].values[value] || value)
+    );
   }
 
   render() {

src/components/UiItemList.js

@@ -16,6 +16,10 @@ import Select from "material-ui/Select";
 import { MenuItem } from "material-ui/Menu";
 import Button from "material-ui/Button";
 
+// TODO: Use something else
+import Slider from "material-ui-old/Slider";
+import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";
+
 export type UiItemListProps = {
   controls: Array<ControlUI>,
   state: State,
@@ -61,6 +65,9 @@ export default class UiItemList extends React.Component<UiItemListProps> {
     case "link": {
       return this.renderLink(control);
     }
+    case "slider": {
+      return this.renderSlider(control);
+    }
     default: {
       throw new Error(
         `Unknown UI type "${control.type}" for "${control.text}" component`
@@ -127,7 +134,7 @@ export default class UiItemList extends React.Component<UiItemListProps> {
     return (
       <FormControl>
         <InputLabel htmlFor={id}>{control.text}</InputLabel>
-        <Select value={value.internal}
+        <Select value={value.internal || value.actual}
           onChange={(event) => this.changeDropDown(control, event.target.value)}
           disabled={!this.isEnabled(control)}
           input={<Input id={id} />}
@@ -159,4 +166,24 @@ export default class UiItemList extends React.Component<UiItemListProps> {
       </Button>
     );
   }
+
+  renderSlider(control: ControlUI) {
+    const value = this.getValue(control);
+    return [
+      <ListItemText primary={control.text} key="text" />,
+      <ListItemSecondaryAction key="action">
+        <MuiThemeProvider>
+          <Slider value={value.internal || value.actual}
+            min={control.min || 0}
+            max={control.max || 100}
+            step={control.step || 1}
+            onChange={
+              (_event, newvalue) =>
+                this.props.onChangeState(control.topic, newvalue)
+            }
+            style={{width: 100}}
+          /></MuiThemeProvider>
+      </ListItemSecondaryAction>
+    ];
+  }
 }