From 08aff120bda1b5d99f7a24931b77bdab08a785e5 Mon Sep 17 00:00:00 2001
From: uwap <me@uwap.name>
Date: Sat, 20 Oct 2018 09:02:24 +0200
Subject: [PATCH] Fix two bugs Fix the flow types for the search bar Fix that
 sometimes the UI would not update in the sidebar

---
 src/components/App.js               | 15 ++++++++-------
 src/components/ControlMap.js        | 15 +++++++--------
 src/components/UiItemList/UiItem.js |  5 +++--
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index d30d3ab..4adddcf 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -61,15 +61,16 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
       search: "",
       error: null
     };
-    this.controlMap = (search: string) =>
-      <ControlMap width={1000} height={700} zoom={0}
-        layers={this.props.config.layers}
-        controls={this.props.config.controls}
-        onChangeControl={this.changeControl}
-        search={search}
-      />;
   }
 
+  controlMap = (search: string) =>
+    <ControlMap width={1000} height={700} zoom={0}
+      layers={this.props.config.layers}
+      controls={this.props.config.controls}
+      onChangeControl={this.changeControl}
+      search={search}
+    />;
+
   get topics(): Topics {
     return Array.isArray(this.props.config.topics) ?
       Object.assign({}, ...this.props.config.topics) : this.props.config.topics;
diff --git a/src/components/ControlMap.js b/src/components/ControlMap.js
index 21b7430..3ad42c6 100644
--- a/src/components/ControlMap.js
+++ b/src/components/ControlMap.js
@@ -4,8 +4,9 @@ import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet";
 import { CRS, point, divIcon } from "leaflet";
 import map from "lodash/map";
 import filter from "lodash/filter";
+import reduce from "lodash/reduce";
 import MqttContext from "mqtt/context";
-import type { Controls, Control } from "config/flowtypes";
+import type { Controls, Control, UIControl, ControlUI } from "config/flowtypes";
 
 export type Point = [number, number];
 
@@ -58,7 +59,7 @@ const renderMarker = (props: ControlMapProps) =>
     </MqttContext.Consumer>
   );
 
-const safeIncludes = (o: {type?: string, text?: string, topic?: string},
+const safeIncludes = (o: {+type?: string, +text?: string, +topic?: string},
   s: string) => {
   if (o.type != null) {
     if (o.type.toLowerCase().includes(s)) {
@@ -78,16 +79,14 @@ const safeIncludes = (o: {type?: string, text?: string, topic?: string},
   return false;
 };
 
-const isVisible = (props: ControlMapProps) => (c: UIControl) => {
+const isVisible = (props: ControlMapProps) =>
+  (c: UIControl & {ui?: Array<ControlUI>}) => {
   if (safeIncludes(c, props.search.toLowerCase())) {
     return true;
   }
   if (c.ui != null) {
-    for (let k in c.ui) {
-      if (safeIncludes(c.ui[k], props.search.toLowerCase())) {
-        return true;
-      }
-    }
+    return reduce(c.ui,
+      (b, e) => b || safeIncludes(e, props.search.toLowerCase()), false);
   }
   return false;
 };
diff --git a/src/components/UiItemList/UiItem.js b/src/components/UiItemList/UiItem.js
index c0d11d8..e688c14 100644
--- a/src/components/UiItemList/UiItem.js
+++ b/src/components/UiItemList/UiItem.js
@@ -84,8 +84,9 @@ export class UiControl<I: UIControl> extends UiItem<I> {
 
   // $FlowFixMe
   shouldComponentUpdate(nextProps: UiItemProps<I>) { // TODO: Fix Flow
-    return nextProps.state[nextProps.item.topic] !==
-      this.props.state[this.props.item.topic];
+    return nextProps.item.topic !== this.props.item.topic
+      || nextProps.state[nextProps.item.topic] !==
+        this.props.state[this.props.item.topic];
   }
 
   getValue() {