Refactor ControlMap

src/components/ControlMap.js

@@ -19,75 +19,47 @@ export type ControlMapProps = {
   onChangeControl: (control: Control) => void
 };
 
-export default class ControlMap extends React.PureComponent<ControlMapProps> {
+const center = (props: ControlMapProps): Point =>
-  constructor(props: ControlMapProps) {
+  convertPoint([
-    super(props);
+    props.width / 2,
-  }
+    props.height / 2
-
-  get center(): Point {
-    return convertPoint([
-      this.props.width / 2,
-      this.props.height / 2
   ]);
-  }
 
-  render() {
+const iconColor = (control: Control, state: State): string => {
-    return (
+  if (control.iconColor != null) {
-      <Map center={this.center}
+    return control.iconColor(state);
-        zoom={this.props.zoom}
-        crs={CRS.Simple}
-        leaflet={{}}>
-        {this.renderMarkers()}
-        {this.renderLayers()}
-      </Map>
-    );
   }
+  return "#000";
+};
 
-  renderMarkers() {
+const createLeafletIcon = (control: Control, state: State) => {
-    return map(this.props.controls, this.renderMarker.bind(this));
-  }
-
-  createLeafletIcon(control: Control, state: State) {
   const icon = control.icon(state);
   const iconClass = `${icon} mdi-36px`;
   return divIcon({
     iconSize: point(36, 36),
     iconAnchor: point(18, 18),
     html: `<i class="${iconClass}"
-          style="line-height: 1; color: ${this.iconColor(control, state)}"></i>`
+        style="line-height: 1; color: ${iconColor(control, state)}"></i>`
   });
-  }
+};
 
-  iconColor(control: Control, state: State): string {
+const renderMarker = (props: ControlMapProps) =>
-    if (control.iconColor != null) {
+  (control: Control, key: string) => (
-      return control.iconColor(state);
-    }
-    return "#000";
-  }
-
-  renderMarker(control: Control, key: string) {
-    return (
     <MqttContext.Consumer key={key}>
       {({ state }) => (
         <Marker position={convertPoint(control.position)}
-            icon={this.createLeafletIcon(control, state)}
+          icon={createLeafletIcon(control, state)}
-            onClick={() => this.props.onChangeControl(control)}
+          onClick={() => props.onChangeControl(control)}
         >
         </Marker>
       )}
     </MqttContext.Consumer>
   );
-  }
 
-  renderLayers() {
+const renderMarkers = (props: ControlMapProps) =>
-    return (
+  map(props.controls, renderMarker(props));
-      <LayersControl position="topright">
-        {this.props.layers.map(this.renderLayer)}
-      </LayersControl>
-    );
-  }
 
-  renderLayer(layer: Layer) {
+const renderLayer = (layer: Layer) => {
   const LayersControlType =
     layer.baseLayer ? LayersControl.BaseLayer : LayersControl.Overlay;
   return (
@@ -95,9 +67,11 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
       key={layer.name}
       name={layer.name}
       checked={layer.defaultVisibility === "visible"}
-        removeLayer={(_layer) => {}}
+      removeLayer={(_layer) => {}} // eslint-disable-line fp/no-nil
-        removeLayerControl={(_layer) => {}}
+      removeLayerControl={(_layer) => {}} // eslint-disable-line fp/no-nil
+      // eslint-disable-next-line fp/no-nil
       addOverlay={(_layer, _name, _checked) => {}}
+      // eslint-disable-next-line fp/no-nil
       addBaseLayer={(_layer, _name, _checked) => {}}>
       <ImageOverlay url={layer.image}
         bounds={[
@@ -107,5 +81,22 @@ export default class ControlMap extends React.PureComponent<ControlMapProps> {
         opacity={layer.opacity || 1} />
     </LayersControlType>
   );
-  }
+};
-}
+
+const renderLayers = (props: ControlMapProps) => (
+  <LayersControl position="topright">
+    {props.layers.map(renderLayer)}
+  </LayersControl>
+);
+
+const ControlMap = (props: ControlMapProps) => (
+  <Map center={center(props)}
+    zoom={props.zoom}
+    crs={CRS.Simple}
+    leaflet={{}}>
+    {renderMarkers(props)}
+    {renderLayers(props)}
+  </Map>
+);
+
+export default ControlMap;