saving with title and buttons and forcing

src/components/save/SaveDialog.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import { getUrlData } from '$utils/history';
+import { getUrlData, pushPath } from '$utils/history';
 import { toTranslit } from '$utils/format';
 import { TIPS } from '$constants/tips';
 import { MODES } from '$constants/modes';
 import { postMap } from '$utils/api';
 
+import classnames from 'classnames';
+
 export class SaveDialog extends React.Component {
   state = {
     address: '',
@@ -12,21 +14,25 @@ export class SaveDialog extends React.Component {
     error: '',
     sending: false,
     finished: false,
-    success: false,
     overwriting: false,
   };
 
+  getAddress = () => {
+    const { path } = getUrlData();
+    const { title, address } = this.state;
+    return toTranslit(address.trim()) || toTranslit(title.trim()) || toTranslit(path.trim());
+  };
+
   setTitle = ({ target: { value } }) => this.setState({ title: (value || '') });
 
   setAddress = ({ target: { value } }) => this.setState({ address: (value || '') });
 
   cancelSaving = () => this.props.editor.changeMode(MODES.NONE);
 
-  sendSaveRequest = () => {
+  sendSaveRequest = (e, force = false) => {
     const { route, stickers } = this.props.editor.dumpData();
-    const { title, address } = this.state;
+    const { title } = this.state;
     const { id, token } = this.props.user;
-    const { path, host } = getUrlData();
 
     postMap({
       id,
@@ -34,13 +40,40 @@ export class SaveDialog extends React.Component {
       route,
       stickers,
       title,
-      address: (toTranslit(address.trim()) || toTranslit(title.trim()) || toTranslit(path.trim())),
-    }).then(console.log).catch(console.warn);
+      force,
+      address: this.getAddress(),
+    }).then(this.parseResponse).catch(console.warn);
   };
 
+  forceSaveRequest = e => this.sendSaveRequest(e, true);
+
+  parseResponse = data => {
+    if (data.success) return this.setSuccess(data);
+    if (data.mode === 'overwriting') return this.setOverwrite(data.description);
+    return this.setError(data.description);
+  };
+
+  setSuccess = ({ address, description }) => {
+    pushPath(`/${address}/edit`);
+
+    this.setState({
+      error: description, finished: true, sending: true, overwriting: false
+    });
+  };
+
+  setOverwrite = error => this.setState({
+    error, finished: false, sending: true, overwriting: true
+  });
+
+  setError = error => this.setState({
+    error, finished: false, sending: true, overwriting: false
+  });
+
   render() {
-    const { address, title, error } = this.state;
-    const { path, host } = getUrlData();
+    const {
+      title, error, finished, overwriting, sending
+    } = this.state;
+    const { host } = getUrlData();
 
     return (
       <div className="helper save-helper">
@@ -54,7 +87,7 @@ export class SaveDialog extends React.Component {
         <div className="save-description">
           <div className="save-address-input">
             <label className="save-address-label">http://{host}/</label>
-            <input type="text" value={toTranslit(address.trim() || title.trim() || path).substr(0, 32)} onChange={this.setAddress} />
+            <input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} />
           </div>
 
           <div className="save-text">
@@ -65,9 +98,26 @@ export class SaveDialog extends React.Component {
 
           <div className="save-buttons">
             <div className="save-buttons-text" />
-            <div className="button-group">
+            <div className={classnames({ 'button-group': !finished })}>
+
+              { !finished &&
               <div className="button" onClick={this.cancelSaving}>Отмена</div>
+              }
+
+              {
+                (!sending || (sending && !overwriting && !finished)) &&
                   <div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
+              }
+
+              {
+                sending && overwriting &&
+                  <div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
+              }
+
+              { finished &&
+              <div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
+              }
+
             </div>
           </div>
         </div>
@@ -76,4 +126,4 @@ export class SaveDialog extends React.Component {
       </div>
     );
   }
-};
+}

src/containers/App.jsx

@@ -41,7 +41,6 @@ export class App extends React.Component {
             this.editor.stopEditing();
           }
         })
-        .catch(console.warn)
         .catch(this.startEmptyEditor);
     } else {
       // this.hideLoader();

src/modules/Editor.js

@@ -195,10 +195,12 @@ export class Editor {
 
   startEditing = () => {
     this.poly.poly.enableEdit();
+    this.stickers.startEditing();
   };
 
   stopEditing = () => {
     this.poly.poly.disableEdit();
+    this.stickers.stopEditing();
   };
 
   dumpData = () => ({

src/modules/Sticker.js

@@ -129,9 +129,13 @@ export class Sticker {
     angle: this.angle,
     latlng: this.latlng,
     sticker: this.sticker,
-  })
-
-  stopEditing = () => ({
-
   });
+
+  stopEditing = () => {
+    this.element.className = 'sticker-container inactive';
+  };
+
+  startEditing = () => {
+    this.element.className = 'sticker-container';
+  };
 }

src/modules/Stickers.js

@@ -53,4 +53,12 @@ export class Stickers {
   };
 
   dumpData = () => this.stickers.map(sticker => sticker.dumpData());
+
+  startEditing = () => {
+    this.stickers.map(sticker => sticker.startEditing());
+  }
+
+  stopEditing = () => {
+    this.stickers.map(sticker => sticker.stopEditing());
+  }
 }

src/styles/button.less

@@ -20,6 +20,10 @@
   &.danger {
     background: #ed2f3b;
   }
+
+  &.success {
+    background: #17bf6d;
+  }
 }
 
 .button-group {

src/styles/stickers.less

@@ -1,6 +1,7 @@
 .sticker-container {
   outline: none;
   position: relative;
+  transition: transform 250ms;
 
   &:before {
     content: ' ';
@@ -28,6 +29,14 @@
       transform: scale(1);
     }
   }
+
+  &.inactive {
+    pointer-events: none;
+
+    .sticker-delete {
+      display: none;
+    }
+  }
 }
 
 .sticker-label {

src/utils/api.js

@@ -31,10 +31,10 @@ export const getStoredMap = ({ name }) => axios.get(API.GET_MAP, {
     name,
     action: 'load'
   }
-}).then(result => (result && result.data && result.data.data && result.data.owner && { ...result.data.data, owner: result.data.owner }));
+}).then(result => (result && result.data && result.data.data && { ...result.data.data, owner: (result.data.owner || null) }));
 
 export const postMap = ({
-  title, address, route, stickers, id, token
+  title, address, route, stickers, id, token, force,
 }) => axios.post(API.POST_MAP, {
   action: 'store',
   title,
@@ -43,4 +43,5 @@ export const postMap = ({
   stickers,
   id,
   token,
-}).then(result => (result && result.data && result.data.data && result.data.owner && { ...result.data.data, owner: result.data.owner }));
+  force,
+}).then(result => (result && result.data && result.data));