fixed router

src/redux/editor/actions.ts

@@ -118,3 +118,8 @@ export const editorKeyPressed = ({
   key,
   target: tagName,
 });
+
+export const editorSetRouter = (router: Partial<IEditorState['router']>) => ({
+  type: EDITOR_ACTIONS.SET_ROUTER,
+  router,
+});

src/redux/editor/constants.ts

@@ -44,4 +44,6 @@ export const EDITOR_ACTIONS = {
   SET_FEATURE: `${P}-SET_FEATURE`,
   SET_IS_ROUTING: `${P}-SET_IS_ROUTING`,
   KEY_PRESSED: `${P}-KEY_PRESSED`,
+
+  SET_ROUTER: `${P}-SET_ROUTER`,
 };

src/redux/editor/handlers.ts

@@ -113,7 +113,10 @@ const resetSaveDialog = (state): IEditorState => ({
   save_error: '',
 });
 
-const setDialog = (state, { dialog }: ReturnType<typeof ACTIONS.editorSetDialog>): IEditorState => ({
+const setDialog = (
+  state,
+  { dialog }: ReturnType<typeof ACTIONS.editorSetDialog>
+): IEditorState => ({
   ...state,
   dialog,
 });
@@ -126,7 +129,10 @@ const setDialogActive = (
   dialog_active: dialog_active || !state.dialog_active,
 });
 
-const setReady = (state, { ready = true }: ReturnType<typeof ACTIONS.editorSetReady>): IEditorState => ({
+const setReady = (
+  state,
+  { ready = true }: ReturnType<typeof ACTIONS.editorSetReady>
+): IEditorState => ({
   ...state,
   ready,
 });
@@ -169,6 +175,17 @@ const setIsRouting = (
   is_routing,
 });
 
+const setRouter = (
+  state,
+  { router }: ReturnType<typeof ACTIONS.editorSetRouter>
+): IEditorState => ({
+  ...state,
+  router: {
+    ...state.router,
+    ...router,
+  },
+});
+
 export const EDITOR_HANDLERS = {
   [EDITOR_ACTIONS.SET_EDITING]: setEditing,
   [EDITOR_ACTIONS.SET_CHANGED]: setChanged,
@@ -197,4 +214,5 @@ export const EDITOR_HANDLERS = {
 
   [EDITOR_ACTIONS.SET_FEATURE]: setFeature,
   [EDITOR_ACTIONS.SET_IS_ROUTING]: setIsRouting,
+  [EDITOR_ACTIONS.SET_ROUTER]: setRouter,
 };

src/redux/editor/index.ts

@@ -2,44 +2,51 @@ import { IDialogs } from '~/constants/dialogs';
 import { MODES } from '~/constants/modes';
 import { createReducer } from 'reduxsauce';
 import { EDITOR_HANDLERS } from './handlers';
+import { ILatLng } from '../map/types';
 
 export interface IEditorState {
-  changed: boolean,
-  editing: boolean,
-  ready: boolean,
+  changed: boolean;
+  editing: boolean;
+  ready: boolean;
   markers_shown: boolean;
-  
-  mode: typeof MODES[keyof typeof MODES],
 
-  dialog: IDialogs[keyof IDialogs],
-  dialog_active: boolean,
+  router: {
+    points: ILatLng[];
+    waypoints: ILatLng[];
+  };
 
-  routerPoints: number,
-  distance: number,
-  estimated: number,
-  speed: number,
-  activeSticker: { set?: string, sticker?: string },
-  is_empty: boolean,
-  is_published: boolean,
-  is_routing: boolean,
-  save_error: string,
-  save_finished: boolean,
-  save_overwriting: boolean,
-  save_processing: boolean,
-  save_loading: boolean,  
+  mode: typeof MODES[keyof typeof MODES];
+
+  dialog: IDialogs[keyof IDialogs];
+  dialog_active: boolean;
+
+  routerPoints: number;
+  distance: number;
+  estimated: number;
+  speed: number;
+  activeSticker: { set?: string; sticker?: string };
+  is_empty: boolean;
+  is_published: boolean;
+  is_routing: boolean;
+
+  save_error: string;
+  save_finished: boolean;
+  save_overwriting: boolean;
+  save_processing: boolean;
+  save_loading: boolean;
 
   features: {
-    routing: boolean,
-  },
+    routing: boolean;
+  };
 
   renderer: {
-    data: string,
-    width: number,
-    height: number
-    renderer_active: boolean,
-    info: string,
-    progress: number,
-  },
+    data: string;
+    width: number;
+    height: number;
+    renderer_active: boolean;
+    info: string;
+    progress: number;
+  };
 }
 
 const EDITOR_INITIAL_STATE = {
@@ -57,7 +64,10 @@ const EDITOR_INITIAL_STATE = {
   estimated: 0,
   speed: 15,
   activeSticker: { set: null, sticker: null },
-
+  router: {
+    waypoints: [],
+    points: [],
+  },
   is_published: false,
   is_empty: true,
   is_routing: false,
@@ -67,7 +77,7 @@ const EDITOR_INITIAL_STATE = {
   save_overwriting: false,
   save_processing: false,
   save_loading: false,
-  
+
   features: {
     routing: false,
   },
@@ -80,6 +90,6 @@ const EDITOR_INITIAL_STATE = {
     info: '',
     progress: 0,
   },
-}
+};
 
 export const editor = createReducer(EDITOR_INITIAL_STATE, EDITOR_HANDLERS);

src/redux/editor/sagas.ts

@@ -1,7 +1,7 @@
 import { call, put, takeEvery, takeLatest, select, race } from 'redux-saga/effects';
 import { delay, SagaIterator } from 'redux-saga';
 import { selectEditor } from '~/redux/editor/selectors';
-
+import { simplify } from '~/utils/simplify';
 import {
   editorHideRenderer,
   editorSetChanged,
@@ -36,11 +36,15 @@ import {
   imageFetcher,
   downloadCanvas,
 } from '~/utils/renderer';
-import { selectMap } from '../map/selectors';
+import { selectMap, selectMapRoute } from '../map/selectors';
 import { selectUser } from '../user/selectors';
 import { LOGOS } from '~/constants/logos';
-import { loadMapSaga, replaceAddressIfItsBusy } from '../map/sagas';
-import { mapSetAddressOrigin } from '../map/actions';
+import { loadMapSaga } from '../map/sagas';
+import { mapClicked, mapSetRoute } from '../map/actions';
+import { MAP_ACTIONS } from '../map/constants';
+import { OsrmRouter } from '~/utils/osrm';
+import path from 'ramda/es/path';
+import { MainMap } from '~/constants/map';
 
 const hideLoader = () => {
   document.getElementById('loader').style.opacity = String(0);
@@ -230,10 +234,30 @@ function* getGPXTrackSaga(): SagaIterator {
 }
 
 function* routerCancel() {
-  yield put(editorSetMode(MODES.NONE))
+  yield put(editorSetMode(MODES.NONE));
   // TODO: clear router
 }
 
+function* mapClick({ latlng }: ReturnType<typeof mapClicked>) {
+  const { mode }: ReturnType<typeof selectEditor> = yield select(selectEditor);
+
+  if (mode === MODES.ROUTER) {
+    const wp = OsrmRouter.getWaypoints().filter(point => !!point.latLng);
+    OsrmRouter.setWaypoints([...wp, latlng]);
+  }
+}
+
+function* routerSubmit() {
+  const route: ReturnType<typeof selectMapRoute> = yield select(selectMapRoute);
+  const latlngs = path(['_routes', 0, 'coordinates'], OsrmRouter);
+
+  const coordinates = simplify({ map: MainMap, latlngs });
+
+  yield put(mapSetRoute([...route, ...coordinates]));
+  OsrmRouter.setWaypoints([]);
+  yield put(editorSetMode(MODES.NONE));
+}
+
 export function* editorSaga() {
   yield takeEvery(EDITOR_ACTIONS.STOP_EDITING, stopEditingSaga);
   yield takeLatest(EDITOR_ACTIONS.TAKE_A_SHOT, takeAShotSaga);
@@ -242,4 +266,6 @@ export function* editorSaga() {
   yield takeLatest(EDITOR_ACTIONS.KEY_PRESSED, keyPressedSaga);
   yield takeLatest(EDITOR_ACTIONS.GET_GPX_TRACK, getGPXTrackSaga);
   yield takeLatest(EDITOR_ACTIONS.ROUTER_CANCEL, routerCancel);
+  yield takeLatest(MAP_ACTIONS.MAP_CLICKED, mapClick);
+  yield takeLatest(EDITOR_ACTIONS.ROUTER_SUBMIT, routerSubmit);
 }

src/redux/editor/selectors.ts

@@ -4,4 +4,5 @@ export const selectEditor = (state: IState) => state.editor;
 export const selectEditorEditing = (state: IState) => state.editor.editing;
 export const selectEditorMode = (state: IState) => state.editor.mode;
 export const selectEditorActiveSticker = (state: IState) => state.editor.activeSticker;
-export const selectEditorRenderer = (state: IState) => state.editor.renderer;
+export const selectEditorRenderer = (state: IState) => state.editor.renderer;
+export const selectEditorRouter = (state: IState) => state.editor.router;