save: save dialog and sagas

src/components/panels/EditorDialog.jsx

@@ -11,7 +11,6 @@ import { CancelDialog } from '$components/save/CancelDialog';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-
 import {
   setMode,
   setLogo,
@@ -24,12 +23,13 @@ import {
   clearCancel,
   stopEditing,
   setEditing,
+  sendSaveRequest,
 } from '$redux/user/actions';
 
 type Props = {
   mode: String,
   activeSticker: String,
-  windth: Number,
+  width: Number,
 }
 
 export const Component = (props: Props) => {
@@ -83,6 +83,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   stopEditing,
   setEditing,
   setMode,
+  sendSaveRequest,
 }, dispatch);
 
 export const EditorDialog = connect(

src/components/save/SaveDialog.jsx

@@ -3,86 +3,63 @@ 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';
+type Props = {
+  address: String, // initial?
+  title: String, // initial?
 
-export class SaveDialog extends React.Component {
+  save_error: String,
+  save_finished: Boolean,
+  save_overwriting: Boolean,
+  save_processing: Boolean,
+
+  setMode: Function,
+  sendSaveRequest: Function,
+};
+
+type State = {
+  address: String,
+  title: String,
+};
+
+export class SaveDialog extends React.Component<Props, State> {
   constructor(props) {
     super(props);
 
     this.state = {
       address: props.address || '',
       title: props.title || '',
-      error: '',
-      sending: false,
-      finished: false,
-      overwriting: false,
     };
   }
 
   getAddress = () => {
     const { path } = getUrlData();
     const { title, address } = this.state;
-    return toTranslit(address.trim()) || toTranslit(title.trim()) || toTranslit(path.trim());
+
+    return toTranslit(address.trim()) || toTranslit(title.trim().toLowerCase()) || toTranslit(path.trim());
   };
 
   setTitle = ({ target: { value } }) => this.setState({ title: (value || '') });
 
   setAddress = ({ target: { value } }) => this.setState({ address: (value || '') });
 
-  cancelSaving = () => this.props.editor.changeMode(MODES.NONE);
+  // cancelSaving = () => this.props.editor.changeMode(MODES.NONE);
+  cancelSaving = () => this.props.setMode(MODES.NONE);
 
   sendSaveRequest = (e, force = false) => {
-    const { route, stickers } = this.props.editor.dumpData();
     const { title } = this.state;
-    const { id, token } = this.props.user;
+    const address = this.getAddress();
 
-    postMap({
-      id,
-      token,
-      route,
-      stickers,
-      title,
-      force,
-      address: this.getAddress(),
-    }).then(this.parseResponse).catch(console.warn);
+    this.props.sendSaveRequest({
+      title, address, force,
+    });
   };
 
   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`);
-
-    console.log('addr?', address);
-    this.props.editor.setAddress(address);
-    this.props.editor.owner = this.props.user.id;
-
-    this.props.editor.setInitialData();
-
-    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 {
-      title, error, finished, overwriting, sending
-    } = this.state;
+    const { title } = this.state;
+    const { save_error, save_finished, save_overwriting, save_processing } = this.props;
     const { host } = getUrlData();
 
     return (
@@ -90,42 +67,40 @@ export class SaveDialog extends React.Component {
         <div className="save-title">
           <div className="save-title-input">
             <label className="save-title-label">Название</label>
-            <input type="text" value={title} onChange={this.setTitle} autoFocus />
+            <input type="text" value={title} onChange={this.setTitle} autoFocus readOnly={save_finished} />
           </div>
         </div>
 
         <div className="save-description">
           <div className="save-address-input">
             <label className="save-address-label">http://{host}/</label>
-            <input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} />
+            <input type="text" value={this.getAddress().substr(0, 32)} onChange={this.setAddress} readOnly={save_finished} />
           </div>
 
           <div className="save-text">
-            {
-              error || TIPS.SAVE_INFO
-            }
+            { save_error || TIPS.SAVE_INFO }
           </div>
 
           <div className="save-buttons">
             <div className="save-buttons-text" />
-            <div className={classnames({ 'button-group': !finished })}>
+            <div>
 
-              { !finished &&
-              <div className="button" onClick={this.cancelSaving}>Отмена</div>
+              { !save_finished &&
+                  <div className="button" onClick={this.cancelSaving}>Отмена</div>
               }
 
               {
-                (!sending || (sending && !overwriting && !finished)) &&
+                !save_finished && !save_overwriting &&
                   <div className="button primary" onClick={this.sendSaveRequest}>Сохранить</div>
               }
 
               {
-                sending && overwriting &&
+                save_overwriting &&
                   <div className="button danger" onClick={this.forceSaveRequest}>Перезаписать</div>
               }
 
-              { finished &&
-              <div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
+              { save_finished &&
+                  <div className="button success" onClick={this.cancelSaving}>Отлично, спасибо!</div>
               }
 
             </div>