redux: router fixed

src/components/panels/EditorDialog.jsx

@@ -8,6 +8,10 @@ import { LogoDialog } from '$components/logo/LogoDialog';
 import { SaveDialog } from '$components/save/SaveDialog';
 import { CancelDialog } from '$components/save/CancelDialog';
 import type { UserType } from '$constants/types';
+import { setLogo, routerCancel, routerSubmit } from '$redux/user/actions';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { editor } from '$modules/Editor';
 
 type Props = {
   mode: String,
@@ -20,10 +24,15 @@ type Props = {
   address: String,
 
   setLogo: Function,
+  routerSubmit: Function,
+  routerCancel: Function,
 }
-export const EditorDialog = ({
-  mode, routerPoints, editor, activeSticker, logo, user, title, address, setLogo
-}: Props) => {
+
+export const Component = (props: Props) => {
+  const {
+    mode, activeSticker, logo, user, title, address
+  } = props;
+
   const showDialog = (
     mode === MODES.ROUTER
     || (mode === MODES.STICKERS && !activeSticker)
@@ -36,7 +45,7 @@ export const EditorDialog = ({
   return (
     showDialog &&
       <div id="control-dialog">
-        { mode === MODES.ROUTER && <RouterDialog routerPoints={routerPoints} editor={editor} /> }
+        { mode === MODES.ROUTER && <RouterDialog {...props} /> }
         { mode === MODES.STICKERS && <StickersDialog editor={editor} /> }
         { mode === MODES.TRASH && <TrashDialog editor={editor} /> }
         { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} setLogo={setLogo} /> }
@@ -45,3 +54,34 @@ export const EditorDialog = ({
       </div>
   );
 };
+
+function mapStateToProps(state) {
+  const {
+    user: {
+      mode, routerPoints, activeSticker, logo, user, title, address,
+    },
+  } = state;
+
+  return {
+    mode,
+    routerPoints,
+    activeSticker,
+    logo,
+    user,
+    title,
+    address,
+    editor,
+  };
+}
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+  routerCancel,
+  routerSubmit,
+  setLogo,
+}, dispatch);
+
+export const EditorDialog = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Component);
+

src/components/router/RouterDialog.jsx

@@ -1,68 +1,60 @@
 import React from 'react';
 
-const noPoints = ({ cancelDrawing }) => (
+type Props = {
+  routerCancel: Function,
+  routerSubmit: Function,
+  routerPoints: Number,
+}
+
+const noPoints = ({ routerCancel }: Props) => (
   <div className="helper router-helper">
     <div className="helper__text">
       <div className="big white">Укажите на карте первую точку маршрута</div>
       <div className="small gray">Путь прокладывается по улицам, тротуарам и тропинкам</div>
     </div>
     <div className="helper__buttons">
-      <div className="button router-helper__button" onClick={cancelDrawing}>
+      <div className="button router-helper__button" onClick={routerCancel}>
         Отмена
       </div>
     </div>
   </div>
 );
 
-const firstPoint = ({ cancelDrawing }) => (
+const firstPoint = ({ routerCancel }: Props) => (
   <div className="helper router-helper">
     <div className="helper__text">
       <div className="big white">Укажите на карте конечную точку маршрута</div>
       <div className="small gray"> Вы сможете добавить уточняющие точки</div>
     </div>
     <div className="helper__buttons">
-      <div className="button router-helper__button" onClick={cancelDrawing}>
+      <div className="button router-helper__button" onClick={routerCancel}>
         Отмена
       </div>
     </div>
   </div>
 );
 
-const draggablePoints = ({ cancelDrawing, submitDrawing }) => (
+const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
   <div className="helper router-helper">
     <div className="helper__text">
       <div className="big white">Продолжите маршрут, щелкая по карте</div>
       <div className="small gray">Потяните линию, чтобы указать промежуточные точки</div>
     </div>
     <div className="helper__buttons button-group">
-      <div className="button button_red router-helper__button" onClick={cancelDrawing}>
+      <div className="button button_red router-helper__button" onClick={routerCancel}>
         Отмена
       </div>
-      <div className="button primary router-helper__button" onClick={submitDrawing}>
+      <div className="button primary router-helper__button" onClick={routerSubmit}>
         Применить
       </div>
     </div>
   </div>
 );
 
-export class RouterDialog extends React.Component {
-  cancelDrawing = () => {
-    this.props.editor.router.cancelDrawing();
-  };
-
-  submitDrawing = () => {
-    this.props.editor.router.submitDrawing();
-  };
-
-  render() {
-    const { routerPoints, editor } = this.props;
-    const { cancelDrawing, submitDrawing } = this;
-    return (
-      <div>
-        {!routerPoints && noPoints({ cancelDrawing })}
-        {routerPoints === 1 && firstPoint({ cancelDrawing })}
-        {routerPoints >= 2 && draggablePoints({ cancelDrawing, submitDrawing })}
-      </div>
-    );
-  }
-}
+export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit }: Props) => (
+  <div>
+    {!routerPoints && noPoints({ routerCancel })}
+    {routerPoints === 1 && firstPoint({ routerCancel })}
+    {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}
+  </div>
+);