Convert pure Components to functions

src/components/SideBar.js

@@ -21,57 +21,41 @@ export type SideBarProps = {
   children?: React.Node
 };
 
-export type SideBarState = {
-};
-
 type Props = SideBarProps & Classes;
 
-class SideBar extends React.PureComponent<Props, SideBarState> {
+const SideBar = (props: Props) => (
-  constructor(props: Props) {
+  <Drawer open={props.open}
-    super(props);
+    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.flex}>
+          {props.control == null ? "" : props.control.name}
+        </Typography>
+        <IconButton onClick={props.onCloseRequest}>
+          <i className="mdi mdi-close mdi-36px"></i>
+        </IconButton>
+      </Toolbar>
+    </AppBar>
+    <List id="drawer_uiComponents">
+      <React.Fragment>{props.children}</React.Fragment>
+    </List>
+  </Drawer>
+);
 
-  static styles(): Object {
+const styles = {
-    return {
   drawerPaper: {
     width: 340
   },
   flex: {
     flex: 1
   }
-    };
+};
-  }
 
-  close() {
+export default withStyles(styles)(SideBar);
-    this.props.onCloseRequest();
-  }
-
-  render() {
-    return (
-      <Drawer open={this.props.open}
-        anchor="right"
-        onClose={this.close}
-        classes={{paper: this.props.classes.drawerPaper}}
-        variant="persistent"
-      >
-        <AppBar position="static">
-          <Toolbar>
-            <span>{this.props.icon == null
-              || renderRawIcon(this.props.icon, "mdi-36px")}</span>
-            <Typography variant="title" className={this.props.classes.flex}>
-              {this.props.control == null ? "" : this.props.control.name}
-            </Typography>
-            <IconButton onClick={this.close.bind(this)}>
-              <i className="mdi mdi-close mdi-36px"></i>
-            </IconButton>
-          </Toolbar>
-        </AppBar>
-        <List id="drawer_uiComponents">
-          <React.Fragment>{this.props.children}</React.Fragment>
-        </List>
-      </Drawer>
-    );
-  }
-}
-
-export default withStyles(SideBar.styles)(SideBar);

src/components/TopBar.js

@@ -11,33 +11,22 @@ export type TopBarProps = {
   connected: boolean
 };
 
-export type TopBarState = {
+const renderConnectionIndicator = (connected: boolean) => {
-
+  if (connected) {
-};
-
-export default class TopBar
-  extends React.PureComponent<TopBarProps, TopBarState> {
-  constructor(props: TopBarProps) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <AppBar position="static">
-        <Toolbar>
-          {this.renderConnectionIndicator()}
-          <Typography variant="title">{this.props.title}</Typography>
-        </Toolbar>
-      </AppBar>
-    );
-  }
-
-  renderConnectionIndicator() {
-    if (this.props.connected) {
     return (<i style={{fontSize: 48}} className="mdi mdi-map"></i>);
   }
   return (
     <CircularProgress size={48} style={{color: "rgba(0, 0, 0, 0.54)"}} />
   );
-  }
+};
-}
+
+const TopBar = (props: TopBarProps) => (
+  <AppBar position="static">
+    <Toolbar>
+      {renderConnectionIndicator(props.connected)}
+      <Typography variant="title">{props.title}</Typography>
+    </Toolbar>
+  </AppBar>
+);
+
+export default TopBar;