top panels code cleanup

package.json

@@ -45,7 +45,7 @@
     "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack": "^4.6.0",
     "webpack-cli": "^2.0.15",
-    "webpack-dev-server": "^3.1.3"
+    "webpack-dev-server": "^3.1.11"
   },
   "dependencies": {
     "axios": "^0.18.0",

src/components/logo/LogoPreview.jsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import { LOGOS } from '$constants/logos';
+import { connect } from 'react-redux';
 
-export const LogoPreview = ({ logo }) => (
+type Props = {
+  logo: string
+};
+
+const Component = ({ logo }: Props) => (
   <div
     className="logo-preview"
     style={{
@@ -11,3 +16,10 @@ export const LogoPreview = ({ logo }) => (
     }}
   />
 );
+
+function mapStateToProps(state) {
+  const { user: { logo } } = state;
+  return { logo };
+}
+
+export const LogoPreview = connect(mapStateToProps)(Component);

src/components/panels/EditorPanel.jsx

@@ -2,38 +2,25 @@ import React from 'react';
 import { MODES } from '$constants/modes';
 import classnames from 'classnames';
 
-import { toHours } from '$utils/format';
-
 import { Icon } from '$components/panels/Icon';
 import { EditorDialog } from '$components/panels/EditorDialog';
-import { LogoPreview } from '$components/logo/LogoPreview';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { setMode, startEditing, stopEditing, setLogo, takeAShot, keyPressed } from '$redux/user/actions';
 
-import { UserLocation } from '$components/UserLocation';
-import { PROVIDERS } from '$constants/providers';
-import { LOGOS } from '$constants/logos';
-
 type Props = {
   editing: false,
   mode: String,
   changed: Boolean,
-  distance: Number,
-  logo: String,
-  estimated: Number, // todo: implement!
-  provider: String,
-
   setMode: Function,
   startEditing: Function,
   stopEditing: Function,
-  takeAShot: Function,
   keyPressed: Function,
 }
 
 class Component extends React.PureComponent<Props, void> {
   componentDidMount() {
-    window.addEventListener('keydown', this.keyPressed);
+    window.addEventListener('keydown', this.props.keyPressed);
 
     const obj = document.getElementById('control-dialog');
     const { width } = this.panel.getBoundingClientRect();
@@ -44,27 +31,13 @@ class Component extends React.PureComponent<Props, void> {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('keydown', this.keyPressed);
+    window.removeEventListener('keydown', this.props.keyPressed);
   }
 
-  keyPressed = e => {
-    // if (
-    //   e.target.tagName === 'INPUT' ||
-    //   e.target.tagName === 'TEXTAREA'
-    // ) {
-    //   if (e.key === 'Escape') e.target.blur();
-    //   return;
-    // }
-
-    this.props.keyPressed(e);
-  };
-
   startPolyMode = () => this.props.setMode(MODES.POLY);
   startStickerMode = () => this.props.setMode(MODES.STICKERS_SELECT);
   startRouterMode = () => this.props.setMode(MODES.ROUTER);
-  startProviderMode = () => this.props.setMode(MODES.PROVIDER);
   startTrashMode = () => this.props.setMode(MODES.TRASH);
-  startLogoMode = () => this.props.setMode(MODES.LOGO);
   startSaveMode = () => {
     if (!this.props.changed) return;
     this.props.setMode(MODES.SAVE);
@@ -72,42 +45,11 @@ class Component extends React.PureComponent<Props, void> {
 
   render() {
     const {
-      mode, distance, estimated, changed, logo, editing, provider,
+      mode, changed, editing,
     } = this.props;
 
     return (
       <div>
-
-        <LogoPreview logo={logo} />
-
-        <div className="status-panel top left">
-          <div className="status-bar square pointer pointer">
-            <UserLocation />
-          </div>
-
-          <div className="status-bar padded desktop-only">
-            {distance} км&nbsp;
-            <Icon icon="icon-cycle" size={32} />
-            {
-              <span>{toHours(estimated)}</span>
-            }
-          </div>
-        </div>
-
-        <div className="status-panel top right">
-          <div className="status-bar pointer top-control padded" onClick={this.startProviderMode}>
-            <Icon icon="icon-map-1" size={24} />
-            <div className="status-bar-sep" />
-            <span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
-          </div>
-
-          <div className="status-bar pointer top-control padded" onClick={this.startLogoMode}>
-            <Icon icon="icon-logo-3" size={24} />
-            <div className="status-bar-sep" />
-            <span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
-          </div>
-        </div>
-
         <div className={classnames('panel right', { active: editing })} ref={el => { this.panel = el; }}>
           <div className="control-bar control-bar-padded">
             <button
@@ -190,14 +132,10 @@ function mapStateToProps(state) {
       editing,
       mode,
       routerPoints,
-      distance,
-      estimated,
       activeSticker,
-      logo,
       title,
       address,
       changed,
-      provider,
     },
   } = state;
 
@@ -206,14 +144,10 @@ function mapStateToProps(state) {
     editing,
     mode,
     routerPoints,
-    distance,
-    estimated,
     activeSticker,
-    logo,
     title,
     address,
     changed,
-    provider,
   };
 }
 

src/components/panels/TopLeftPanel.jsx

@@ -0,0 +1,42 @@
+// 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';
+
+type Props = {
+  distance: number,
+  estimated: number,
+};
+
+const Component = ({ distance, estimated }: Props) => (
+  <div className="status-panel top left">
+    <div className="status-bar square pointer pointer">
+      <UserLocation />
+    </div>
+
+    <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);

src/components/panels/TopRightPanel.jsx

@@ -0,0 +1,51 @@
+// flow
+import React from 'react';
+import { Icon } from '$components/panels/Icon';
+import { PROVIDERS } from '$constants/providers';
+import { LOGOS } from '$constants/logos';
+import { setMode } from '$redux/user/actions';
+import { connect } from 'react-redux';
+import { MODES } from '$constants/modes';
+
+type Props = {
+  provider: string,
+  logo: string,
+  startProviderMode: Function,
+  startLogoMode: Function,
+};
+
+const Component = ({
+  provider, logo, startProviderMode, startLogoMode
+}: Props) => (
+  <div className="status-panel top right">
+    <div className="status-bar pointer top-control padded" onClick={startProviderMode}>
+      <Icon icon="icon-map-1" size={24} />
+      <div className="status-bar-sep" />
+      <span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
+    </div>
+
+    <div className="status-bar pointer top-control padded" onClick={startLogoMode}>
+      <Icon icon="icon-logo-3" size={24} />
+      <div className="status-bar-sep" />
+      <span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>
+    </div>
+  </div>
+);
+
+function mapStateToProps(state) {
+  const {
+    user: { provider, logo },
+  } = state;
+
+  return { provider, logo };
+}
+
+const mapDispatchToProps = dispatch => ({
+  startProviderMode: () => dispatch(setMode(MODES.PROVIDER)),
+  startLogoMode: () => dispatch(setMode(MODES.LOGO)),
+});
+
+export const TopRightPanel = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Component);

src/containers/App.jsx

@@ -12,6 +12,9 @@ import { Renderer } from '$components/renderer/Renderer';
 import { hideRenderer, setDialogActive } from '$redux/user/actions';
 import { Cursor } from '$components/Cursor';
 import { LeftDialog } from '$containers/LeftDialog';
+import { TopLeftPanel } from '$components/panels/TopLeftPanel';
+import { TopRightPanel } from '$components/panels/TopRightPanel';
+import { LogoPreview } from '$components/logo/LogoPreview';
 
 type Props = {
   renderer_active: Boolean,
@@ -28,6 +31,11 @@ const Component = (props: Props) => (
     <Fills />
     <UserPanel />
     <EditorPanel />
+
+    <TopLeftPanel />
+    <TopRightPanel />
+    <LogoPreview />
+
     <Cursor mode={props.mode} sticker={props.sticker} set={props.set} />
     <LeftDialog dialog={props.dialog} dialog_active={props.dialog_active} setDialogActive={props.setDialogActive} />
 
@@ -39,7 +47,7 @@ const Component = (props: Props) => (
 
 const mapStateToProps = ({
   user: {
-    mode, dialog, dialog_active, renderer, activeSticker: { sticker = null, set = null },
+    mode, dialog, dialog_active, renderer, activeSticker: { sticker = null, set = null }
   }
 }) => ({
   renderer_active: renderer.renderer_active,

src/index.js

@@ -1,6 +1,5 @@
 /*
 
-
   todo save spinner
   todo cancelling editing someone's else map return back to it's original address /razminochnyj/