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>
+);

src/modules/Router.js

@@ -2,14 +2,13 @@ import L from 'leaflet';
 import Routing from 'leaflet-routing-machine/src/index';
 import { CONFIG } from '$config';
 import { DomMarker } from '$utils/DomMarker';
-import { MODES } from '$constants/modes';
 
 export class Router {
-  constructor({ map, lockMapClicks, setRouterPoints, changeMode, pushPolyPoints }) {
+  constructor({ map, lockMapClicks, setRouterPoints, pushPolyPoints }) {
     this.waypoints = [];
     this.lockMapClicks = lockMapClicks;
     this.setRouterPoints = setRouterPoints;
-    this.changeMode = changeMode;
+    // this.changeMode = changeMode;
     this.pushPolyPoints = pushPolyPoints;
 
     const routeLine = r => Routing.line(r, {
@@ -45,6 +44,8 @@ export class Router {
 
     // this.router._line.on('mousedown', console.log);
   }
+
+  // changeMode = value => store.dispatch(setMode(value));
   //
   pushWaypointOnClick = ({ latlng: { lat, lng } }) => {
     const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng);
@@ -116,7 +117,8 @@ export class Router {
 
   cancelDrawing = () => {
     this.router.setWaypoints([]);
-    this.changeMode(MODES.NONE);
+    // this.router.
+    // this.changeMode(MODES.NONE);
   };
 
   submitDrawing = () => {
@@ -125,10 +127,12 @@ export class Router {
 
     const { coordinates } = route;
     this.pushPolyPoints(coordinates);
-    const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng);
-    this.router.setWaypoints(waypoints[waypoints.length - 1]);
 
-    // this.changeMode(MODES.POLY);
+    this.router.setWaypoints([]);
+
+    // UNCOMMENT THIS TO CONTINUE DRAWING
+    // const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng);
+    // this.router.setWaypoints(waypoints[waypoints.length - 1]);
   };
 
   clearAll = () => {

src/redux/user/actions.js

@@ -16,3 +16,6 @@ export const setAddress = address => ({ type: ACTIONS.SET_ADDRESS, address });
 
 export const startEditing = () => ({ type: ACTIONS.START_EDITING });
 export const stopEditing = () => ({ type: ACTIONS.STOP_EDITING });
+
+export const routerCancel = () => ({ type: ACTIONS.ROUTER_CANCEL });
+export const routerSubmit = () => ({ type: ACTIONS.ROUTER_SUBMIT });

src/redux/user/constants.js

@@ -14,4 +14,7 @@ export const ACTIONS = {
 
   START_EDITING: 'START_EDITING',
   STOP_EDITING: 'STOP_EDITING',
+
+  ROUTER_CANCEL: 'ROUTER_CANCEL',
+  ROUTER_SUBMIT: 'ROUTER_SUBMIT',
 };

src/redux/user/sagas.js

@@ -127,6 +127,20 @@ function* setLogoSaga({ logo }) {
   }
 }
 
+function* routerCancelSaga() {
+  yield call(editor.router.cancelDrawing);
+  yield put(setMode(MODES.NONE));
+
+  return true;
+}
+
+function* routerSubmitSaga() {
+  yield call(editor.router.submitDrawing);
+  yield put(setMode(MODES.NONE));
+
+  return true;
+}
+
 export function* userSaga() {
   // ASYNCHRONOUS!!! :-)
 
@@ -139,4 +153,7 @@ export function* userSaga() {
   yield takeEvery(ACTIONS.USER_LOGOUT, userLogoutSaga);
   yield takeEvery(ACTIONS.SET_ACTIVE_STICKER, setActiveStickerSaga);
   yield takeEvery(ACTIONS.SET_LOGO, setLogoSaga);
+
+  yield takeEvery(ACTIONS.ROUTER_CANCEL, routerCancelSaga);
+  yield takeEvery(ACTIONS.ROUTER_SUBMIT, routerSubmitSaga);
 }