enabling / disabling editor from url

src/containers/App.jsx

@@ -9,7 +9,7 @@ import { DEFAULT_USER } from '$constants/auth';
 import { getGuestToken, checkUserToken, getStoredMap } from '$utils/api';
 import { storeData, getData } from '$utils/storage';
 import { UserPanel } from '$components/panels/UserPanel';
-import { getPath } from '$utils/history';
+import { getUrlData, replacePath } from '$utils/history';
 
 export class App extends React.Component {
   state = {
@@ -26,12 +26,34 @@ export class App extends React.Component {
 
   componentDidMount() {
     this.authInit();
-    this.mapInit();
   }
 
   mapInit = () => {
-    const path = getPath();
+    const { path, mode } = getUrlData();
-    if (path) getStoredMap({ name: path, callback: this.setDataOnLoad });
+
+    if (path) {
+      getStoredMap({ name: path })
+        .then(this.setDataOnLoad)
+        .then(() => {
+          if (mode && mode === 'edit') {
+            this.editor.startEditing();
+          } else {
+            this.editor.stopEditing();
+          }
+        })
+        .catch(this.hideLoader);
+    } else {
+      // this.hideLoader();
+      this.startEmptyEditor();
+    }
+  };
+
+  startEmptyEditor = () => {
+    const { user } = this.state;
+    if (!user || !user.random_url) return;
+
+    replacePath(`/${user.random_url}/edit`);
+    this.hideLoader();
   };
 
   setDataOnLoad = data => {
@@ -80,17 +102,18 @@ export class App extends React.Component {
     const user = this.getUserData();
 
     const { id, token } = (user || {});
-    const fallback = () => getGuestToken({ callback: this.setUser });
 
     if (id && token) {
       checkUserToken({
-        callback: this.setUser,
-        fallback,
         id,
         token
-      });
+      })
+        .then(this.setUser)
+        .then(this.mapInit);
     } else {
-      getGuestToken({ callback: fallback });
+      getGuestToken()
+        .then(this.setUser)
+        .then(this.mapInit);
     }
   };
 

src/modules/Editor.js

@@ -181,5 +181,13 @@ export class Editor {
       }));
     }
     this.map.map.fitBounds(this.poly.poly.getBounds());
+  };
+
+  startEditing = () => {
+    this.poly.poly.enableEdit();
+  };
+
+  stopEditing = () => {
+    this.poly.poly.disableEdit();
   }
 }

src/utils/api.js

@@ -4,25 +4,19 @@ import { API } from '$constants/api';
 
 const report = console.warn;
 
-export const checkUserToken = ({
+export const checkUserToken = ({ id, token }) => axios.get(API.CHECK_TOKEN, {
-  callback, fallback, id, token
+  params: {
-}) => (
+    id,
-  axios.get(API.CHECK_TOKEN, {
+    token,
-    params: { action: 'check_token', id, token }
+    action: 'check_token',
-  })
+  }
-    .then(result => (result && result.data))
+}).then(result => (result && result.data && { ...result.data, id, token }))
-    .then(data => ({ ...data, id, token }))
+
-    .then(callback)
+export const getGuestToken = () => axios.get(API.GET_GUEST, {
-    .catch(fallback)
+  params: {
-);
+    action: 'gen_guest_token'
-export const getGuestToken = ({ callback }) => (
+  }
-  axios.get(API.GET_GUEST, {
+}).then(result => (result && result.data));
-    params: { action: 'gen_guest_token' }
-  })
-    .then(result => (result && result.data))
-    .then(callback)
-    .catch(report)
-);
 
 export const getMergedImage = ({ placement, callback }) => (
   axios.get(API.COMPOSE, {
@@ -32,12 +26,9 @@ export const getMergedImage = ({ placement, callback }) => (
     .catch(report)
 );
 
-export const getStoredMap = ({ name, callback }) => (
+export const getStoredMap = ({ name }) => axios.get(API.GET_MAP, {
-  axios.get(API.GET_MAP, {
+  params: {
-    params: { name, action: 'load' }
+    name,
-  })
+    action: 'load'
-    .then(result => (result && result.data &&result.data.data))
+  }
-    .then(data => ({ ...data }))
+}).then(result => (result && result.data && result.data.data));
-    .then(callback)
-    .catch(report)
-)

src/utils/history.js

@@ -1,2 +1,12 @@
 export const getPath = () => (window.location && window.location.pathname &&
   window.location.pathname.replace(/^\//, ''));
+
+export const replacePath = url => window.history.replaceState(url, 'Редактирование маршрута', url);
+
+export const getUrlData = () => {
+  const url = getPath();
+
+  const [path, mode] = url.split('/');
+
+  return { path, mode };
+};

webpack.config.js

@@ -105,10 +105,10 @@ module.exports = () => {
     resolve,
     plugins,
     entry: {
-      // loader: './src/loader.js',
       app: './src/index.js',
     },
     output: {
+      publicPath: '/',
       filename: '[name].bundle.[githash].js',
     },
     optimization: {