From fe814718ebd6df1090e8c06d0ca59fe2205c98de Mon Sep 17 00:00:00 2001
From: uwap <me@uwap.name>
Date: Sun, 15 Apr 2018 17:15:11 +0200
Subject: [PATCH] Improve performance of the map by using Pure Components

---
 src/components/App.js               | 6 +++---
 src/components/ControlMap.js        | 2 +-
 src/components/SideBar.js           | 2 +-
 src/components/TopBar.js            | 2 +-
 src/components/UiItemList/UiItem.js | 4 ++--
 src/components/UiItemList/index.js  | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index c525d8c..c19ea83 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -35,7 +35,7 @@ export type AppState = {
   mqttConnected: boolean,
 };
 
-class App extends React.Component<AppProps & Classes, AppState> {
+class App extends React.PureComponent<AppProps & Classes, AppState> {
   constructor(props: AppProps & Classes) {
     super(props);
     this.state = {
@@ -89,11 +89,11 @@ class App extends React.Component<AppProps & Classes, AppState> {
       const topic = topics[i];
       const parseValue = this.topics[topic].type;
       const val = parseValue == null ? message.toString() : parseValue(message);
-      this.setState({mqttState: merge(this.state.mqttState,
+      this.setState({mqttState: Object.assign({}, merge(this.state.mqttState,
         { [topic]: {
           actual: val,
           internal: keyOf(this.topics[topic].values, val) || val
-        }})});
+        }}))});
     }
   }
 
diff --git a/src/components/ControlMap.js b/src/components/ControlMap.js
index f824256..7524673 100644
--- a/src/components/ControlMap.js
+++ b/src/components/ControlMap.js
@@ -22,7 +22,7 @@ export type ControlMapProps = {
   state: State
 };
 
-export default class ControlMap extends React.Component<ControlMapProps> {
+export default class ControlMap extends React.PureComponent<ControlMapProps> {
   constructor(props: ControlMapProps) {
     super(props);
   }
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index 505c582..e3bd2f0 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -23,7 +23,7 @@ export type SideBarProps = {
 export type SideBarState = {
 };
 
-class SideBar extends React.Component<SideBarProps & Classes, SideBarState> {
+class SideBar extends React.PureComponent<SideBarProps & Classes, SideBarState> {
   constructor(props: SideBarProps & Classes) {
     super(props);
   }
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index 1e3455d..02f200c 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -15,7 +15,7 @@ export type TopBarState = {
 
 };
 
-export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+export default class TopBar extends React.PureComponent<TopBarProps, TopBarState> {
   constructor(props: TopBarProps) {
     super(props);
   }
diff --git a/src/components/UiItemList/UiItem.js b/src/components/UiItemList/UiItem.js
index da36678..4db8900 100644
--- a/src/components/UiItemList/UiItem.js
+++ b/src/components/UiItemList/UiItem.js
@@ -30,7 +30,7 @@ type UiItemProps<I> = {
 };
 
 // eslint-disable-next-line flowtype/no-weak-types
-export default class UiItem<I:Object> extends React.Component<UiItemProps<I>> {
+export default class UiItem<I:Object> extends React.PureComponent<UiItemProps<I>> {
   constructor(props: UiItemProps<I>) {
     super(props);
   }
@@ -236,7 +236,7 @@ export class Progress extends UiControl<UIProgress> {
     return [
       <ListItemText key="label" secondary={this.props.item.text} />,
       <div style={{ flex: "10 1 auto" }} key="progressbar">
-        <LinearProgress mode="determinate" value={value} />
+        <LinearProgress variant="determinate" value={value} />
       </div>
     ];
   }
diff --git a/src/components/UiItemList/index.js b/src/components/UiItemList/index.js
index a267629..9cf82b6 100644
--- a/src/components/UiItemList/index.js
+++ b/src/components/UiItemList/index.js
@@ -22,7 +22,7 @@ export type UiItemListProps = {
   onChangeState: (topic: string, nextState: Actual) => void
 };
 
-export default class UiItemList extends React.Component<UiItemListProps> {
+export default class UiItemList extends React.PureComponent<UiItemListProps> {
   constructor(props: UiItemListProps) {
     super(props);
   }