finally saving things

src/components/panels/EditorDialog.jsx

@@ -5,15 +5,17 @@ import { RouterDialog } from '$components/router/RouterDialog';
 import { StickersDialog } from '$components/stickers/StickersDialog';
 import { TrashDialog } from '$components/trash/TrashDialog';
 import { LogoDialog } from '$components/logo/LogoDialog';
+import { SaveDialog } from '$components/save/SaveDialog';
 
 export const EditorDialog = ({
-  mode, routerPoints, editor, activeSticker, logo
+  mode, routerPoints, editor, activeSticker, logo, user,
 }) => {
   const showDialog = (
     mode === MODES.ROUTER
     || (mode === MODES.STICKERS && !activeSticker)
     || mode === MODES.TRASH
     || mode === MODES.LOGO
+    || mode === MODES.SAVE
   );
 
   return (
@@ -23,6 +25,7 @@ export const EditorDialog = ({
         { mode === MODES.STICKERS && <StickersDialog editor={editor} /> }
         { mode === MODES.TRASH && <TrashDialog editor={editor} /> }
         { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} /> }
+        { mode === MODES.SAVE && <SaveDialog editor={editor} user={user} /> }
       </div>
   );
 };

src/components/panels/EditorPanel.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { MODES } from '$constants/modes';
 import classnames from 'classnames';
 
-import { toHours } from '$utils/time';
+import { toHours } from '$utils/format';
 
 import { Icon } from '$components/panels/Icon';
 import { EditorDialog } from '$components/panels/EditorDialog';
@@ -21,9 +21,11 @@ export class EditorPanel extends React.PureComponent {
 
   startLogoMode = () => this.props.editor.changeMode(MODES.LOGO);
 
+  startSaveMode = () => this.props.editor.changeMode(MODES.SAVE);
+
   render() {
     const {
-      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo,
+      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user
     } = this.props;
 
     return (
@@ -35,6 +37,7 @@ export class EditorPanel extends React.PureComponent {
           activeSticker={activeSticker}
           editor={editor}
           logo={logo}
+          user={user}
         />
 
         <LogoPreview logo={logo} />
@@ -96,6 +99,7 @@ export class EditorPanel extends React.PureComponent {
 
             <button
               className="highlighted"
+              onClick={this.startSaveMode}
             >
               <span>СХОРОНИТЬ</span>
               <Icon icon="icon-save" />

src/components/save/SaveDialog.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { getUrlData } from '$utils/history';
+import { toTranslit } from '$utils/format';
+import { TIPS } from '$constants/tips';
+import { MODES } from '$constants/modes';
+import { postMap } from '$utils/api';
+
+export class SaveDialog extends React.Component {
+  state = {
+    address: '',
+    title: '',
+    error: '',
+    sending: false,
+    finished: false,
+    success: false,
+  };
+
+  setTitle = ({ target: { value } }) => this.setState({ title: (value || '') });
+
+  setAddress = ({ target: { value } }) => this.setState({ address: (value || '') });
+
+  cancelSaving = () => this.props.editor.changeMode(MODES.NONE);
+
+  sendSaveRequest = () => {
+    const { route, stickers } = this.props.editor.dumpData();
+    const { title, address } = this.state;
+    const { id, token } = this.props.user;
+
+    postMap({
+      id,
+      token,
+      route,
+      stickers,
+      title,
+      address,
+    }).then(console.log).catch(console.warn);
+  };
+
+  render() {
+    const { address, title, error } = this.state;
+    const { path, host } = getUrlData();
+
+    return (
+      <div className="helper save-helper">
+        <div className="save-title">
+          <div className="save-title-input">
+            <label className="save-title-label">Название</label>
+            <input type="text" value={title} onChange={this.setTitle} autoFocus />
+          </div>
+        </div>
+
+        <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} />
+          </div>
+
+          <div className="save-text">
+            {
+              error || TIPS.SAVE_INFO
+            }
+          </div>
+
+          <div className="save-buttons">
+            <div className="save-buttons-text" />
+            <div className="button-group">
+              <div className="button" onClick={this.cancelSaving}>Отмена</div>
+              <div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+    );
+  }
+};