map_list: initial

urls: editing now handled through urls

src/redux/store.js

@@ -6,6 +6,8 @@ import createSagaMiddleware from 'redux-saga';
 
 import { userReducer } from '$redux/user/reducer';
 import { userSaga } from '$redux/user/sagas';
+import { createBrowserHistory } from 'history';
+import { locationChanged } from '$redux/user/actions';
 
 const userPersistConfig = {
   key: 'user',
@@ -42,3 +44,8 @@ export function configureStore() {
 
   return { store, persistor };
 }
+
+export const history = createBrowserHistory();
+export const historyListener = history.listen(location => {
+  store.dispatch(locationChanged(location.pathname));
+});

src/redux/user/actions.js

@@ -39,3 +39,7 @@ export const takeAShot = () => ({ type: ACTIONS.TAKE_A_SHOT });
 export const cropAShot = payload => ({ type: ACTIONS.CROP_A_SHOT, ...payload });
 
 export const setProvider = provider => ({ type: ACTIONS.SET_PROVIDER, provider });
+
+export const setDialog = ({ dialog, dialog_active }) => ({ type: ACTIONS.SET_DIALOG, dialog });
+export const locationChanged = location => ({ type: ACTIONS.LOCATION_CHANGED, location });
+export const setReady = ready => ({ type: ACTIONS.SET_READY, ready });

src/redux/user/constants.js

@@ -1,4 +1,6 @@
-export const ACTIONS = {
+// @flow
+
+export const ACTIONS = ({
   SET_USER: 'SET_USER',
   USER_LOGOUT: 'USER_LOGOUT',
 
@@ -38,4 +40,8 @@ export const ACTIONS = {
   CROP_A_SHOT: 'CROP_A_SHOT',
 
   SET_PROVIDER: 'SET_PROVIDER',
-};
+
+  SET_DIALOG: 'SET_DIALOG',
+  LOCATION_CHANGED: 'LOCATION_CHANGED',
+  SET_READY: 'SET_READY',
+}: { [key: String]: String });

src/redux/user/reducer.js

@@ -1,3 +1,4 @@
+// @flow
 import { createReducer } from 'reduxsauce';
 import { ACTIONS } from '$redux/user/constants';
 import { DEFAULT_USER } from '$constants/auth';
@@ -5,6 +6,7 @@ import { MODES } from '$constants/modes';
 import { DEFAULT_LOGO } from '$constants/logos';
 import { TIPS } from '$constants/tips';
 import { DEFAULT_PROVIDER } from '$constants/providers';
+import { DIALOGS } from '$constants/dialogs';
 
 const getEstimated = distance => {
   const time = (distance && (distance / 15)) || 0;
@@ -73,7 +75,18 @@ const setRenderer = (state, { payload }) => ({
 
 const setProvider = (state, { provider }) => ({ ...state, provider });
 
-const HANDLERS = {
+const setDialog = (state, { dialog, dialog_active }) => ({
+  ...state,
+  dialog: dialog || state.dialog,
+  dialog_active: typeof dialog_active !== 'undefined' ? dialog_active : !state.dialog_active,
+});
+
+const setReady = (state, { ready = true }) => ({
+  ...state,
+  ready,
+});
+
+const HANDLERS = ({
   [ACTIONS.SET_USER]: setUser,
   [ACTIONS.SET_EDITING]: setEditing,
   [ACTIONS.SET_CHANGED]: setChanged,
@@ -96,9 +109,13 @@ const HANDLERS = {
   [ACTIONS.SET_RENDERER]: setRenderer,
 
   [ACTIONS.SET_PROVIDER]: setProvider,
-};
+
+  [ACTIONS.SET_DIALOG]: setDialog,
+  [ACTIONS.SET_READY]: setReady,
+}: { [key: String]: Function });
 
 export const INITIAL_STATE = {
+  ready: false,
   user: { ...DEFAULT_USER },
   editing: false,
   mode: MODES.NONE,
@@ -117,6 +134,9 @@ export const INITIAL_STATE = {
   save_overwriting: false,
   save_processing: false,
 
+  dialog: DIALOGS.NONE,
+  dialog_active: false,
+
   renderer: {
     data: '',
     width: 0,

src/redux/user/sagas.js

@@ -7,7 +7,7 @@ import {
   setActiveSticker, setAddress,
   setChanged,
   setEditing,
-  setMode, setRenderer,
+  setMode, setReady, setRenderer,
   setSaveError,
   setSaveOverwrite, setSaveSuccess, setTitle,
   setUser
@@ -62,12 +62,15 @@ function* startEmptyEditorSaga() {
 }
 
 function* startEditingSaga() {
-  yield editor.startEditing();
-  yield put(setEditing(true));
+  // yield put(setEditing(true));
+  // yield editor.startEditing();
+  const { path } = getUrlData();
+  yield pushPath(`/${path}/edit`);
 }
 
 function* stopEditingSaga() {
   const { changed, editing, mode } = yield select(getState);
+  const { path } = getUrlData();
 
   if (!editing) return;
   if (changed && mode !== MODES.CONFIRM_CANCEL) {
@@ -76,40 +79,59 @@ function* stopEditingSaga() {
   }
 
   yield editor.cancelEditing();
-
   yield put(setMode(MODES.NONE));
-
   yield put(setChanged(false));
-
   yield put(setEditing(editor.hasEmptyHistory)); // don't close editor if no previous map
+
+  yield pushPath(`/${path}/`);
+}
+
+function* loadMapSaga(path) {
+  const map = yield call(getStoredMap, { name: path });
+
+  if (map) {
+    yield editor.setData(map);
+    yield editor.fitDrawing();
+    yield put(setChanged(false));
+  }
+
+  return map;
 }
 
 function* mapInitSaga() {
   const { path, mode } = getUrlData();
 
   if (path) {
-    const map = yield call(getStoredMap, { name: path });
+    const map = yield call(loadMapSaga, path);
+    // const map = yield call(getStoredMap, { name: path });
 
     if (map) {
-      yield editor.setData(map);
-      yield editor.fitDrawing();
-      yield put(setChanged(false));
+    //   yield editor.setData(map);
+    //   yield editor.fitDrawing();
+    //   yield put(setChanged(false));
 
       if (mode && mode === 'edit') {
-        yield call(startEditingSaga);
+        yield put(setEditing(true));
+        editor.startEditing();
+        // yield call(startEditingSaga); // <-- this is working
         // yield put(setEditing(true));
         // editor.startEditing();
       } else {
-        yield put(setEditing(false));
+        // yield put(setEditing(false)); // <-- this is working
         // yield call(stopEditingSaga);
+        yield put(setEditing(false));
         editor.stopEditing();
       }
 
-      return hideLoader();
+      yield put(setReady(true));
+      hideLoader();
+      return true;
     }
   }
 
-  return yield call(startEmptyEditorSaga);
+  yield call(startEmptyEditorSaga);
+  yield put(setReady(true));
+  return true;
 }
 
 function* authChechSaga() {
@@ -120,7 +142,6 @@ function* authChechSaga() {
 
     if (user) {
       yield put(setUser(user));
-
       return yield call(mapInitSaga);
     }
   }
@@ -294,9 +315,37 @@ function setProviderSaga({ provider }) {
   return put(setMode(MODES.NONE));
 }
 
-export function* userSaga() {
-  // ASYNCHRONOUS!!! :-)
+function* locationChangeSaga({ location }) {
+  const { address, editing, ready, user: { id, random_url } } = yield select(getState);
 
+  if (!ready) return;
+
+  const { path, mode } = getUrlData(location);
+
+  if (address !== path) {
+    const map = yield call(loadMapSaga, path);
+
+    if (map && map.owner && mode === 'edit' && map.owner.id !== id) {
+      pushPath(`/${map.random_url}/edit`);
+      return;
+    }
+  } else if (mode === 'edit' && editor.owner.id !== id) {
+    pushPath(`/${random_url}/edit`);
+    return;
+  }
+
+  if (editing !== (mode === 'edit')) {
+    if (mode === 'edit') {
+      yield put(setEditing(true));
+      editor.startEditing();
+    } else {
+      yield put(setEditing(false));
+      editor.stopEditing();
+    }
+  }
+}
+
+export function* userSaga() {
   yield takeLatest(REHYDRATE, authChechSaga);
   yield takeEvery(ACTIONS.SET_MODE, setModeSaga);
 
@@ -322,4 +371,5 @@ export function* userSaga() {
   yield takeLatest(ACTIONS.CROP_A_SHOT, cropAShotSaga);
 
   yield takeEvery(ACTIONS.SET_PROVIDER, setProviderSaga);
+  yield takeLatest(ACTIONS.LOCATION_CHANGED, locationChangeSaga);
 }