Use React Context API

src/components/UiItemList/index.js

@@ -2,17 +2,17 @@
 import React from "react";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
-import { renderIcon } from "config/icon";
+import { renderRawIcon } from "config/icon";
 
 import type { ControlUI } from "config/flowtypes";
 
 import { Toggle, DropDown, Link,
   Section, Text, Progress, Slider } from "./UiItem";
+import MqttContext from "mqtt/context";
+import type { MqttContextValue } from "mqtt/context";
 
 export type UiItemListProps = {
-  controls: Array<ControlUI>,
-  state: State,
-  onChangeState: (topic: string, nextState: string) => void
+  controls: Array<ControlUI>
 };
 
 export default class UiItemList extends React.PureComponent<UiItemListProps> {
@@ -27,66 +27,60 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
           "A control is missing the \"type\" parameter"
         );
       }
-      if (control.type === "section") {
-        return this.renderControl(control, key.toString());
-      }
       return (
         <ListItem key={key}>
-          <React.Fragment>
-            {control.icon == null || control.type === "link" ||
-              <ListItemIcon key={`${key.toString()}-liicon`}>
-                {renderIcon(control.icon(this.props.state), "mdi-24px")}
-              </ListItemIcon>}
-            {this.renderControl(control, key.toString())}
-          </React.Fragment>
+          <MqttContext.Consumer>
+            {this.renderListItem(control, key)}
+          </MqttContext.Consumer>
         </ListItem>
       );
     });
   }
 
-  renderControl(control: ControlUI, key: string) {
+  renderListItem(control: ControlUI, key: number) {
+    return (mqtt: MqttContextValue) => {
+      const node = this.renderControl(control, key.toString(), mqtt);
+      if (control.icon == null || control.type === "link"
+        || control.type === "section") {
+        return node;
+      } else {
+        const listIconNode = (
+          <ListItemIcon key={`${key.toString()}-liicon`}>
+            {renderRawIcon(control.icon(mqtt.state), "mdi-24px")}
+          </ListItemIcon>
+        );
+        return [listIconNode, node];
+      }
+    };
+  }
+
+  renderControl(control: ControlUI, key: string, mqtt: MqttContextValue) {
+    const props = {
+      state: mqtt.state,
+      onChangeState: mqtt.changeState,
+      key: `${key}-licontrol`
+    };
     switch (control.type) {
     case "toggle": {
-      return <Toggle item={control}
-        state={this.props.state}
-        onChangeState={this.props.onChangeState}
-        key={`${key}-licontrol`} />;
+      return <Toggle item={control} {...props} />;
     }
     case "dropDown": {
-      return <DropDown item={control}
-        state={this.props.state}
-        onChangeState={this.props.onChangeState}
-        key={`${key}-licontrol`} />;
+      return <DropDown item={control} {...props} />;
     }
     case "section": {
-      return <Section item={control}
-        state={this.props.state}
-        onChangeState={this.props.onChangeState}
-        key={`${key}-licontrol`} />;
+      return <Section item={control} {...props} />;
     }
     case "link": {
-      return <Link item={control}
-        state={this.props.state}
-        onChangeState={this.props.onChangeState}
-        key={`${key}-licontrol`} />;
+      return <Link item={control} {...props} />;
     }
     case "slider": {
-      return <Slider item={control}
-        state={this.props.state}
-        onChangeState={this.props.onChangeState}
-        key={`${key}-licontrol`} />;
+      return <Slider item={control} {...props} />;
     }
     case "text": {
-      return <Text item={control}
-        state={this.props.state}
-        onChangeState={this.props.onChangeState}
-        key={`${key}-licontrol`} />;
+      return <Text item={control} {...props} />;
     }
     case "progress": {
-      return <Progress item={control}
-        state={this.props.state}
-        onChangeState={this.props.onChangeState}
-        key={`${key}-licontrol`} />;
+      return <Progress item={control} {...props} />;
     }
     default: {
       throw new Error(