top panels code cleanup

src/components/UserLocation.jsx

@@ -10,10 +10,7 @@ export class UserLocation extends React.Component {
 
     const element = document.createElement('div');
 
-    this.icon = new DomMarker({
+    this.icon = new DomMarker({ element, className: 'location-marker' });
-      element,
-      className: 'location-marker',
-    });
 
     this.mark = null;
     this.map = editor.map.map;
@@ -64,9 +61,11 @@ export class UserLocation extends React.Component {
 
   render() {
     return (
+      <div className="status-bar square pointer pointer">
         <div onClick={this.centerMapOnLocation}>
           <Icon icon="icon-locate" size={30} />
         </div>
+      </div>
     );
   }
 }

src/components/panels/DistanceBar.jsx

@@ -0,0 +1,35 @@
+// flow
+import React from 'react';
+import { toHours } from '$utils/format';
+import { Icon } from '$components/panels/Icon';
+import { connect } from 'react-redux';
+
+type Props = {
+  distance: number,
+  estimated: number,
+};
+
+const Component = ({ distance, estimated }: Props) => (
+  <div className="status-bar padded desktop-only">
+    {distance} км&nbsp;
+    <Icon icon="icon-cycle" size={32} />
+    {
+      <span>{toHours(estimated)}</span>
+    }
+  </div>
+);
+
+function mapStateToProps(state) {
+  const {
+    user: { distance, estimated },
+  } = state;
+
+  return { distance, estimated };
+}
+
+const mapDispatchToProps = () => ({ });
+
+export const DistanceBar = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Component);

src/components/panels/TopLeftPanel.jsx

@@ -1,42 +1,11 @@
 // flow
 import React from 'react';
-import { toHours } from '$utils/format';
-import { Icon } from '$components/panels/Icon';
 import { UserLocation } from '$components/UserLocation';
-import { connect } from 'react-redux';
+import { DistanceBar } from '$components/panels/DistanceBar';
 
-type Props = {
+export const TopLeftPanel = () => (
-  distance: number,
-  estimated: number,
-};
-
-const Component = ({ distance, estimated }: Props) => (
   <div className="status-panel top left">
-    <div className="status-bar square pointer pointer">
     <UserLocation />
-    </div>
+    <DistanceBar />
-
-    <div className="status-bar padded desktop-only">
-      {distance} км&nbsp;
-      <Icon icon="icon-cycle" size={32} />
-      {
-        <span>{toHours(estimated)}</span>
-      }
-    </div>
   </div>
 );
-
-function mapStateToProps(state) {
-  const {
-    user: { distance, estimated },
-  } = state;
-
-  return { distance, estimated };
-}
-
-const mapDispatchToProps = () => ({ });
-
-export const TopLeftPanel = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Component);