Add eslint

src/UiItems.js

@@ -1,25 +1,22 @@
 // @flow
 import React from "react";
 import Switch from "material-ui/Switch";
-import Select from 'material-ui/Select';
-import { MenuItem } from 'material-ui/Menu';
-import Slider from 'material-ui-old/Slider';
-import MuiThemeProvider from 'material-ui-old/styles/MuiThemeProvider';
-import Icon from 'material-ui/Icon';
+import Select from "material-ui/Select";
+import { MenuItem } from "material-ui/Menu";
+import Slider from "material-ui-old/Slider";
+import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";
 import Config from "./config";
-import { keyOf } from "./util";
-import Input, { InputLabel } from 'material-ui/Input';
-import { FormControl } from 'material-ui/Form';
+import Input, { InputLabel } from "material-ui/Input";
+import { FormControl } from "material-ui/Form";
 import R from "ramda";
-import List, {
+import {
   ListItem,
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
   ListSubheader,
-} from 'material-ui/List';
-import Button from 'material-ui/Button';
-import withStyles from 'material-ui/styles/withStyles';
+} from "material-ui/List";
+import Button from "material-ui/Button";
 
 const enabled = (props: ControlUI, state: State) => {
   if (props.enableCondition == null) return true;
@@ -47,11 +44,11 @@ export const isToggled = (state: State, props: ControlUI) => {
   const val = state.values[props.topic];
   if (props.toggled != null) {
     return props.toggled(val.internal == null ? val.actual : val.internal,
-            val.actual);
+      val.actual);
   } else {
     return val.internal === R.propOr("on", "on", props);
   }
-}
+};
 
 export const toggle = (state: State, props: ControlUI) => {
   return (
@@ -66,7 +63,7 @@ export const toggle = (state: State, props: ControlUI) => {
       </ListItemSecondaryAction>
     </ListItem>
   );
-}
+};
 
 const onDropDownChange = (topic: string, props: ControlUI, state: State) =>
   (event) => {
@@ -87,9 +84,9 @@ export const dropDown = (state: State, props: ControlUI) => {
       <FormControl>
         <InputLabel htmlFor={id}>{props.text}</InputLabel>
         <Select value={state.values[props.topic].actual}
-              onChange={onDropDownChange(props.topic, props, state)}
-              disabled={!(enabled(props, state))}
-              input={<Input id={id} />}
+          onChange={onDropDownChange(props.topic, props, state)}
+          disabled={!(enabled(props, state))}
+          input={<Input id={id} />}
         >
           {R.values(R.mapObjIndexed(dropDownItem(props.topic), props.options))}
         </Select>
@@ -111,13 +108,13 @@ export const slider = (state: State, props: ControlUI) => (
     <ListItemText primary={props.text} />
     <ListItemSecondaryAction>
       <MuiThemeProvider>
-      <Slider value={state.values[props.topic].actual}
-            min={props.min == null ? 0 : props.min}
-            max={props.max == null ? 1 : props.max}
-            step={props.step == null ? 1 : props.step}
-            onChange={onSliderChange(state, props)}
-            style={{width: 100}}
-      /></MuiThemeProvider>
+        <Slider value={state.values[props.topic].actual}
+          min={props.min == null ? 0 : props.min}
+          max={props.max == null ? 1 : props.max}
+          step={props.step == null ? 1 : props.step}
+          onChange={onSliderChange(state, props)}
+          style={{width: 100}}
+        /></MuiThemeProvider>
     </ListItemSecondaryAction>
   </ListItem>
 );
@@ -128,8 +125,8 @@ export const section = (state: State, props: ControlUI) => (
 
 export const link = (state: State, props: ControlUI) => (
   <ListItem>
-    <Button raised onClick={() => window.open(props.link, '_blank')} color="primary">
+    <Button raised onClick={() => window.open(props.link, "_blank")} color="primary">
       {props.text}
     </Button>
   </ListItem>
-)
+);

src/appbar.js

@@ -1,23 +1,22 @@
 // @flow
 import React from "react";
 import AppBar from "material-ui/AppBar";
-import Toolbar from 'material-ui/Toolbar';
+import Toolbar from "material-ui/Toolbar";
 import { CircularProgress } from "material-ui/Progress";
 import IconButton from "material-ui/IconButton";
-import Menu, { MenuItem } from "material-ui/Menu";
-import Typography from 'material-ui/Typography';
+import Typography from "material-ui/Typography";
 
-const TopBarLayerSelector = (props: Object) => (
+const TopBarLayerSelector = (_props: Object) => (
   <IconButton>
     <Icon>layers</Icon>
   </IconButton>
-)
+);
 
 const TopBarIndicatorMenu = (props: Object) => (
   <IconButton>
-      {props.mqtt.connected ?
-        (<i style={{fontSize: 48}} className="mdi mdi-map"></i>) :
-        (<i style={{fontSize: 48}} className="mdi mdi-lan-disconnect"></i>)}
+    {props.mqtt.connected ?
+      (<i style={{fontSize: 48}} className="mdi mdi-map"></i>) :
+      (<i style={{fontSize: 48}} className="mdi mdi-lan-disconnect"></i>)}
   </IconButton>
 );
     

src/config.js

@@ -1,4 +1,4 @@
 // @flow
-import config from '../config/rzl';
+import config from "../config/rzl";
 
 export default config;

src/index.jsx

@@ -1,29 +1,27 @@
 // @flow
 import React from "react";
 import ReactDOM from "react-dom";
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
-import createMuiTheme from 'material-ui/styles/createMuiTheme';
-import withStyles from 'material-ui/styles/withStyles';
-import Drawer from 'material-ui/Drawer';
-import injectTapEventPlugin from 'react-tap-event-plugin';
+import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
+import createMuiTheme from "material-ui/styles/createMuiTheme";
+import withStyles from "material-ui/styles/withStyles";
+import Drawer from "material-ui/Drawer";
+import injectTapEventPlugin from "react-tap-event-plugin";
 import { store, Actions } from "./state";
 import connectMqtt from "./mqtt";
 import SpaceMapBar from "./appbar";
-import Switch from "material-ui/Switch";
 import * as UiItems from "./UiItems.js";
 import SpaceMap from "./map.js";
 import R from "ramda";
 import Config from "./config";
 import Toolbar from "material-ui/Toolbar";
-import * as colors from 'material-ui/colors';
-import Typography from 'material-ui/Typography';
-import List, { ListSubheader } from 'material-ui/List';
-import IconButton from 'material-ui/IconButton';
-import Icon from 'material-ui/Icon';
-import AppBar from 'material-ui/AppBar';
+import * as colors from "material-ui/colors";
+import Typography from "material-ui/Typography";
+import List from "material-ui/List";
+import IconButton from "material-ui/IconButton";
+import AppBar from "material-ui/AppBar";
 
-import '../node_modules/mdi/css/materialdesignicons.min.css';
-import '../css/styles.css';
+import "../node_modules/mdi/css/materialdesignicons.min.css";
+import "../css/styles.css";
 
 injectTapEventPlugin();
 
@@ -42,7 +40,7 @@ const theme = createMuiTheme({
   }
 });
 
-const appStyles = withStyles((theme) => ({
+const appStyles = withStyles((_theme) => ({
   drawerPaper: {
     width: 320
   }
@@ -75,7 +73,7 @@ class app extends React.Component<{state: State, classes: Object}> {
                 </Toolbar>
               </AppBar>
               <List id="drawer_uiComponents">
-                  {renderUi(state, state.uiOpened)}
+                {renderUi(state, state.uiOpened)}
               </List>
             </Drawer>
           </div>

src/map.js

@@ -1,17 +1,14 @@
 // @flow
 import React from "react";
-import { Map, ImageOverlay, Marker, Popup, LayersControl } from "react-leaflet";
+import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import Leaflet from "leaflet";
 import R from "ramda";
 import Config from "./config";
 import { Actions } from "./state";
-import { keyOf } from "./util";
 import { store } from "./state";
 
-import ReactDOM from "react-dom";
-
 // convert width/height coordinates to -height/width coordinates
-const c = (p) => [-p[1], p[0]]
+const c = (p) => [-p[1], p[0]];
 
 const color = (iconColor, state: State) => {
   // TODO: give iconColor not only internal but also actual values
@@ -20,11 +17,11 @@ const color = (iconColor, state: State) => {
       R.map(x => x.internal == null ?
         x.actual : x.internal, state.values == null ? {} : state.values)
     );
-}
+};
 const iconHtml = (el, state: State) =>
   "<i class=\"mdi mdi-" + el.icon + " mdi-36px\" style=\""
     + "color:" + color(el.iconColor, state) + ";\">"
-    + "</i>"
+    + "</i>";
 
 const Markers = (props) => R.values(R.mapObjIndexed((el,key) => (
   <Marker position={c(el.position)} key={el.name}
@@ -49,7 +46,7 @@ class SpaceMap extends React.Component<{state: State, width: number, height: num
     const props = this.props;
     return (
       <Map center={c([props.width / 2, props.height / 2])} zoom={props.zoom}
-          crs={Leaflet.CRS.Simple}> 
+        crs={Leaflet.CRS.Simple}> 
         {Markers(props)}
         <LayersControl position='topright'>
           {Config.layers.map(x => this.renderLayer(x, [c([0,0]), c([props.width, props.height])]))}
@@ -62,7 +59,7 @@ class SpaceMap extends React.Component<{state: State, width: number, height: num
     const LayersControlType = layer.baseLayer ? LayersControl.BaseLayer : LayersControl.Overlay;
     return (
       <LayersControlType name={layer.name}
-            checked={layer.defaultVisibility == "visible"}>
+        checked={layer.defaultVisibility == "visible"}>
         <ImageOverlay url={layer.image} bounds={bounds} opacity={layer.opacity} />
       </LayersControlType>
     );

src/state.js

@@ -18,7 +18,7 @@ const initState : State = {
     topic => { return {
       internal: keyOf(topic.values, topic.defaultValue),
       actual: topic.defaultValue
-    }}, Config.topics),
+    };}, Config.topics),
   visibleLayers: []
 };
 
@@ -28,7 +28,7 @@ const onMessage = (state: State, action: StateAction) => {
   // topics is the list of all internal topic references
   // that have their state topic set to action.payload.topic
   const payload = action.payload == undefined ? { topic: "", message: {} }
-                : action.payload; // thx flow </3
+    : action.payload; // thx flow </3
   const topics = R.keys(R.pickBy(
     val => val.state == payload.topic, Config.topics));
   const message = payload.message;
@@ -39,17 +39,17 @@ const onMessage = (state: State, action: StateAction) => {
     } else {
       return parseFunction(message);
     }
-  }
+  };
   const newValue = (topic: string) => {
     return {
       actual: parsedMessage(topic),
       internal: keyOf(Config.topics[topic].values,parsedMessage(topic))
     };
-  }
+  };
   return R.mergeDeepRight(state, R.objOf("values", R.mergeAll(
     R.map(topic => R.objOf(topic, newValue(topic)), topics)
   )));
-}
+};
 
 const match = (value: any, array: Map<any,any>) => array[value];
 const handleEvent = (state: State = initState, action: StateAction) => {
@@ -68,6 +68,6 @@ const handleEvent = (state: State = initState, action: StateAction) => {
     })(),
     [null]: state
   });
-}
+};
 
 export const store = createStore(handleEvent, initState);

src/util.js

@@ -2,5 +2,4 @@
 import R from "ramda";
 
 export const keyOf = <a,b> (map: Map<b,a>, value: a) : ?b =>
-  ((keys) => keys[R.findIndex(k => map[k] == value, keys)])
-    (R.keys(map));
+  ((keys) => keys[R.findIndex(k => map[k] == value, keys)])(R.keys(map));