save: save reset

appearance: save button reacts to changes

src/components/panels/EditorPanel.jsx

@@ -54,7 +54,7 @@ class Component extends React.PureComponent<Props, void> {
 
   render() {
     const {
-      mode, routerPoints, distance, estimated, activeSticker, logo, user, editing, title, address,
+      mode, distance, estimated, changed, logo, editing,
     } = this.props;
 
     return (
@@ -137,7 +137,7 @@ class Component extends React.PureComponent<Props, void> {
             </button>
 
             <button
-              className="primary"
+              className={classnames({ primary: changed, disabled: !changed })}
               onClick={this.startSaveMode}
             >
               <span>СХОРОНИТЬ</span>

src/constants/tips.js

@@ -1,6 +1,7 @@
 export const TIPS = {
   SAVE_INFO: 'Никто, кроме вас не сможет изменить маршрут - только создать его копию и сохранить по другому адресу',
-  SAVE_TIMED_OUT: 'Сервер не ответил на запрос, попробуйте позже',
+  SAVE_TIMED_OUT: 'Сервер не ответил на запрос, попробуйте еще раз',
   SAVE_EMPTY: 'Этот маршрут пуст, нарисуйте что-нибудь для начала',
-  SAVE_SUCCESS: 'Маршрут сохранен - он будет доступен по указанному адресу'
+  SAVE_SUCCESS: 'Отлично! Ваш маршрут сохранён. Поделитесь ссылкой с друзьями, приятной покатушки!',
+  SAVE_OVERWRITE: 'У вас уже есть маршрут с таким именем. Можно перезаписать его или переименовать?'
 };

src/modules/Editor.js

@@ -10,13 +10,13 @@ import { parseStickerAngle, parseStickerStyle } from '$utils/import';
 import { getUrlData, pushPath } from '$utils/history';
 import { store } from '$redux/store';
 import {
+  resetSaveDialog,
   setActiveSticker, setAddress,
   setChanged,
   setDistance,
-  setEditing,
-  setLogo, setMode,
+  setMode,
   setRouterPoints,
-  setTitle
+  setTitle,
 } from '$redux/user/actions';
 
 export class Editor {
@@ -67,6 +67,9 @@ export class Editor {
       },
       [MODES.LOGO]: {
         toggle: this.clearMode,
+      },
+      [MODES.SAVE]: {
+        stop: this.resetSaveDialog,
       }
     };
 
@@ -98,16 +101,21 @@ export class Editor {
   getDistance = () => store.getState().user.distance;
 
   setMode = value => store.dispatch(setMode(value));
-  setChanged = value => store.dispatch(setChanged(value));
   setRouterPoints = value => store.dispatch(setRouterPoints(value));
   setActiveSticker = value => store.dispatch(setActiveSticker(value));
   setTitle = value => store.dispatch(setTitle(value));
   setAddress = value => store.dispatch(setAddress(value));
 
+  resetSaveDialog = () => store.dispatch(resetSaveDialog());
+
   setDistance = value => {
     if (this.getDistance() !== value) store.dispatch(setDistance(value));
   };
 
+  setChanged = value => {
+    if (this.getChanged() !== value) store.dispatch(setChanged(value));
+  };
+
   clearMode = () => this.setMode(MODES.NONE);
   clearChanged = () => store.dispatch(setChanged(false));
 

src/redux/user/actions.js

@@ -26,7 +26,7 @@ export const clearAll = () => ({ type: ACTIONS.CLEAR_ALL });
 export const clearCancel = () => ({ type: ACTIONS.CLEAR_CANCEL });
 
 export const sendSaveRequest = payload => ({ type: ACTIONS.SEND_SAVE_REQUEST, ...payload });
-export const cancelSaveRequest = () => ({ type: ACTIONS.CANCEL_SAVE_REQUEST });
+export const resetSaveDialog = () => ({ type: ACTIONS.RESET_SAVE_DIALOG });
 
 export const setSaveSuccess = payload => ({ type: ACTIONS.SET_SAVE_SUCCESS, ...payload });
 export const setSaveError = save_error => ({ type: ACTIONS.SET_SAVE_ERROR, save_error });

src/redux/user/constants.js

@@ -25,6 +25,7 @@ export const ACTIONS = {
 
   SEND_SAVE_REQUEST: 'SEND_SAVE_REQUEST',
   CANCEL_SAVE_REQUEST: 'CANCEL_SAVE_REQUEST',
+  RESET_SAVE_DIALOG: 'RESET_SAVE_DIALOG',
 
   SET_SAVE_SUCCESS: 'SET_SAVE_SUCCESS',
   SET_SAVE_ERROR: 'SET_SAVE_ERROR',

src/redux/user/reducer.js

@@ -3,6 +3,7 @@ import { ACTIONS } from '$redux/user/constants';
 import { DEFAULT_USER } from '$constants/auth';
 import { MODES } from '$constants/modes';
 import { DEFAULT_LOGO } from '$constants/logos';
+import { TIPS } from '$constants/tips';
 
 const getEstimated = distance => {
   const time = (distance && (distance / 15)) || 0;
@@ -18,9 +19,7 @@ const setUser = (state, { user }) => ({
 });
 
 const setEditing = (state, { editing }) => ({ ...state, editing });
-const setChanged = (state, { changed }) => ({
-  ...state, changed, ...state, save_overwriting: false, save_finished: false, save_processing: false, save_error: '',
-});
+const setChanged = (state, { changed }) => ({ ...state, changed });
 const setMode = (state, { mode }) => ({ ...state, mode });
 const setDistance = (state, { distance }) => ({
   ...state,
@@ -39,13 +38,19 @@ const sendSaveRequest = state => ({ ...state, save_processing: true, });
 const setSaveError = (state, { save_error }) => ({
   ...state, save_error, save_finished: false, save_processing: false
 });
+
 const setSaveOverwrite = state => ({
-  ...state, save_overwriting: true, save_finished: false, save_processing: false
+  ...state, save_overwriting: true, save_finished: false, save_processing: false, save_error: TIPS.SAVE_OVERWRITE,
 });
+
 const setSaveSuccess = (state, { save_error }) => ({
   ...state, save_overwriting: false, save_finished: true, save_processing: false, save_error
 });
 
+const resetSaveDialog = state => ({
+  ...state, save_overwriting: false, save_finished: false, save_processing: false, save_error: '',
+});
+
 const HANDLERS = {
   [ACTIONS.SET_USER]: setUser,
   [ACTIONS.SET_EDITING]: setEditing,
@@ -62,6 +67,7 @@ const HANDLERS = {
   [ACTIONS.SET_SAVE_OVERWRITE]: setSaveOverwrite,
   [ACTIONS.SET_SAVE_SUCCESS]: setSaveSuccess,
   [ACTIONS.SEND_SAVE_REQUEST]: sendSaveRequest,
+  [ACTIONS.RESET_SAVE_DIALOG]: resetSaveDialog,
 };
 
 export const INITIAL_STATE = {
@@ -73,7 +79,7 @@ export const INITIAL_STATE = {
   distance: 0,
   estimated: 0,
   activeSticker: null,
-  title: 0,
+  title: '',
   address: '',
   changed: false,
 

src/redux/user/sagas.js

@@ -195,7 +195,7 @@ function* sendSaveRequestSaga({ title, address, force }) {
       id, token, route, stickers, title, force, address
     }),
     timeout: delay(10000),
-    cancel: take(ACTIONS.CANCEL_SAVE_REQUEST),
+    cancel: take(ACTIONS.RESET_SAVE_DIALOG),
   });
 
   if (cancel) return yield put(setMode(MODES.NONE));

src/styles/panel.less

@@ -97,17 +97,19 @@
     }
 
     &.disabled {
+      color: #999999;
+
       svg {
         fill: #999999;
       }
     }
 
     &.highlighted {
-      background: #555555;
+      background: rgba(255, 255, 255, 0.1);
     }
 
     &.cancel {
-      background: linear-gradient(270deg, #0f5871, #444444 60%);
+      // background: linear-gradient(270deg, #0f5871, #444444 60%);
     }
 
     &.primary {