Fix svg import & update dependencies

(Fixes #132)

src/components/App.js

@@ -9,9 +9,9 @@ import throttle from "lodash/throttle";
 
 import type { Config, Control, Topics } from "config/flowtypes";
 
-import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
-import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
-import withStyles from "@material-ui/core/styles/withStyles";
+import {
+  MuiThemeProvider, createMuiTheme, withStyles
+} from "@material-ui/core/styles";
 import * as Colors from "@material-ui/core/colors";
 import Snackbar from "@material-ui/core/Snackbar";
 import IconButton from "@material-ui/core/IconButton";
@@ -55,7 +55,8 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
         onDisconnect: () => this.setState({ mqttConnected: false }),
         subscribe: map(
           filter(keys(this.topics), (x) => this.topics[x].state != null),
-          (x) => this.topics[x].state.name)
+          (x) => (this.topics[x].state != null ? this.topics[x].state.name : "")
+        )
       }),
       mqttConnected: false,
       search: "",

src/components/SideBar.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from "react";
 
-import withStyles from "@material-ui/core/styles/withStyles";
+import { makeStyles } from "@material-ui/core/styles";
 import Drawer from "@material-ui/core/Drawer";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
@@ -21,42 +21,43 @@ export type SideBarProps = {
   children?: React.Node
 };
 
-type Props = SideBarProps & Classes;
-
-const SideBar = (props: Props) => (
-  <Drawer open={props.open}
-    anchor="right"
-    onClose={props.onCloseRequest}
-    classes={{paper: props.classes.drawerPaper}}
-    variant="persistent"
-  >
-    <AppBar position="static">
-      <Toolbar>
-        <span>
-          {props.icon == null || renderRawIcon(props.icon, "mdi-36px")}
-        </span>
-        <Typography variant="title" className={props.classes.title}>
-          {props.control == null ? "" : props.control.name}
-        </Typography>
-        <IconButton onClick={props.onCloseRequest}>
-          <i className="mdi mdi-close"></i>
-        </IconButton>
-      </Toolbar>
-    </AppBar>
-    <List id="drawer_uiComponents">
-      <React.Fragment>{props.children}</React.Fragment>
-    </List>
-  </Drawer>
-);
-
-const styles = (theme) => ({
+const useStyles = makeStyles((theme) => ({
   drawerPaper: {
     width: 340
   },
   title: {
     flex: 1,
-    marginLeft: theme.spacing.unit
+    marginLeft: theme.spacing(1)
   }
-});
+}));
 
-export default withStyles(styles)(SideBar);
+const SideBar = (props: SideBarProps) => {
+  const classes = useStyles();
+  return (
+    <Drawer open={props.open}
+      anchor="right"
+      onClose={props.onCloseRequest}
+      classes={{paper: classes.drawerPaper}}
+      variant="persistent"
+    >
+      <AppBar position="static">
+        <Toolbar>
+          <span>
+            {props.icon == null || renderRawIcon(props.icon, "mdi-36px")}
+          </span>
+          <Typography variant="subtitle1" className={classes.title}>
+            {props.control == null ? "" : props.control.name}
+          </Typography>
+          <IconButton onClick={props.onCloseRequest}>
+            <i className="mdi mdi-close"></i>
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <List id="drawer_uiComponents">
+        <React.Fragment>{props.children}</React.Fragment>
+      </List>
+    </Drawer>
+  );
+};
+
+export default SideBar;

src/components/TopBar.js

@@ -6,7 +6,7 @@ import Toolbar from "@material-ui/core/Toolbar";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import InputBase from "@material-ui/core/InputBase";
 import { fade } from "@material-ui/core/styles/colorManipulator";
-import { withStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import Tooltip from "@material-ui/core/Tooltip";
 import IconButton from "@material-ui/core/IconButton";
 
@@ -28,7 +28,7 @@ const renderConnectionIndicator = (connected: boolean) => {
   );
 };
 
-const searchStyles = (theme) => ({
+const useSearchStyles = makeStyles((theme) => ({
   search: {
     position: "relative",
     borderRadius: theme.shape.borderRadius,
@@ -36,16 +36,16 @@ const searchStyles = (theme) => ({
     "&:hover": {
       backgroundColor: fade(theme.palette.common.white, 0.25)
     },
-    marginRight: theme.spacing.unit * 2,
+    marginRight: theme.spacing(2),
     marginLeft: 0,
     width: "100%",
     [theme.breakpoints.up("sm")]: {
-      marginLeft: theme.spacing.unit * 3,
+      marginLeft: theme.spacing(3),
       width: "auto"
     }
   },
   searchIcon: {
-    width: theme.spacing.unit * 6,
+    width: theme.spacing(6),
     height: "100%",
     position: "absolute",
     pointerEvents: "none",
@@ -59,31 +59,32 @@ const searchStyles = (theme) => ({
     width: "100%"
   },
   inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 6,
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(6),
     transition: theme.transitions.create("width"),
     width: "100%",
     [theme.breakpoints.up("md")]: {
       width: 200
     }
   }
-});
+}));
 
-const RawSearch = (props: SearchBarProps & Classes) => (
-  <div className={props.classes.search}>
-    <i className={`mdi mdi-magnify ${props.classes.searchIcon}`}></i>
-    <InputBase placeholder="Search…" type="search"
-      onChange={(e) => props.onSearch(e.target.value)}
-      classes={{
-        root: props.classes.inputRoot,
-        input: props.classes.inputInput
-      }} />
-  </div>
-);
-
-const Search = withStyles(searchStyles)(RawSearch);
+const Search = (props: SearchBarProps) => {
+  const classes = useSearchStyles();
+  return (
+    <div className={classes.search}>
+      <i className={`mdi mdi-magnify ${classes.searchIcon}`}></i>
+      <InputBase placeholder="Search…" type="search"
+        onChange={(e) => props.onSearch(e.target.value)}
+        classes={{
+          root: classes.inputRoot,
+          input: classes.inputInput
+        }} />
+    </div>
+  );
+};
 
 const openOnGithub = () => window.open(
   "https://github.com/uwap/mqtt-control-map", "_blank");

src/components/UiItems/Slider.js

@@ -5,7 +5,7 @@ import { isDisabled, getValue } from "./utils";
 
 import type { UISlider } from "config/flowtypes";
 
-import SliderComponent from "@material-ui/lab/Slider";
+import SliderComponent from "@material-ui/core/Slider";
 
 const changeSliderValue = (item: UISlider, changeState) => (_e, v) =>
   changeState(item, v.toString());
@@ -36,5 +36,3 @@ export default createComponent({
   },
   baseComponent: BaseComponent
 });
-
-