From eb5b0e5d282ed50e8066ae84ec938497368125d5 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 26 Nov 2018 15:50:36 +0700 Subject: [PATCH] redux: router fixed --- src/components/panels/EditorDialog.jsx | 48 +++++++++++++++++++++++--- src/components/router/RouterDialog.jsx | 48 +++++++++++--------------- src/modules/Router.js | 18 ++++++---- src/redux/user/actions.js | 3 ++ src/redux/user/constants.js | 3 ++ src/redux/user/sagas.js | 17 +++++++++ 6 files changed, 98 insertions(+), 39 deletions(-) diff --git a/src/components/panels/EditorDialog.jsx b/src/components/panels/EditorDialog.jsx index ba40897..0ed18bc 100644 --- a/src/components/panels/EditorDialog.jsx +++ b/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 &&
- { mode === MODES.ROUTER && } + { mode === MODES.ROUTER && } { mode === MODES.STICKERS && } { mode === MODES.TRASH && } { mode === MODES.LOGO && } @@ -45,3 +54,34 @@ export const EditorDialog = ({
); }; + +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); + diff --git a/src/components/router/RouterDialog.jsx b/src/components/router/RouterDialog.jsx index d00c311..8c9ac8d 100644 --- a/src/components/router/RouterDialog.jsx +++ b/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) => (
Укажите на карте первую точку маршрута
Путь прокладывается по улицам, тротуарам и тропинкам
-
+
Отмена
); -const firstPoint = ({ cancelDrawing }) => ( +const firstPoint = ({ routerCancel }: Props) => (
Укажите на карте конечную точку маршрута
Вы сможете добавить уточняющие точки
-
+
Отмена
); -const draggablePoints = ({ cancelDrawing, submitDrawing }) => ( +const draggablePoints = ({ routerCancel, routerSubmit }: Props) => (
Продолжите маршрут, щелкая по карте
Потяните линию, чтобы указать промежуточные точки
-
+
Отмена
-
+
Применить
); -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 ( -
- {!routerPoints && noPoints({ cancelDrawing })} - {routerPoints === 1 && firstPoint({ cancelDrawing })} - {routerPoints >= 2 && draggablePoints({ cancelDrawing, submitDrawing })} -
- ); - } -} +export const RouterDialog = ({ routerPoints, routerCancel, routerSubmit }: Props) => ( +
+ {!routerPoints && noPoints({ routerCancel })} + {routerPoints === 1 && firstPoint({ routerCancel })} + {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })} +
+); diff --git a/src/modules/Router.js b/src/modules/Router.js index 63fd46f..55e2c15 100644 --- a/src/modules/Router.js +++ b/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 = () => { diff --git a/src/redux/user/actions.js b/src/redux/user/actions.js index 6b946f1..034b8fb 100644 --- a/src/redux/user/actions.js +++ b/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 }); diff --git a/src/redux/user/constants.js b/src/redux/user/constants.js index 031fdc7..db72493 100644 --- a/src/redux/user/constants.js +++ b/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', }; diff --git a/src/redux/user/sagas.js b/src/redux/user/sagas.js index 68f1067..781b53d 100644 --- a/src/redux/user/sagas.js +++ b/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); }