redux: half-completed editor panel

src/components/panels/EditorPanel.jsx

@@ -9,7 +9,7 @@ import { EditorDialog } from '$components/panels/EditorDialog';
 import { LogoPreview } from '$components/logo/LogoPreview';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { setMode } from '$redux/user/actions';
+import { setMode, startEditing, stopEditing } from '$redux/user/actions';
 import type { UserType } from '$constants/types';
 import { editor } from '$modules/Editor';
 
@@ -19,19 +19,17 @@ type Props = {
   mode: String,
   changed: Boolean,
   distance: Number,
-  // not implemented
   title: String,
   address: String,
-  mode: String,
-  editing: Boolean,
   logo: String,
   routerPoints: Number,
-  estimateTime: Number,
   activeSticker: String,
-  title: String,
-  address: String,
+  estimateTime: Number, // todo: implement!
 
   setMode: Function,
+  startEditing: Function,
+  stopEditing: Function,
+
 }
 
 class Component extends React.PureComponent<Props, void> {
@@ -50,15 +48,16 @@ class Component extends React.PureComponent<Props, void> {
   // startLogoMode = () => this.props.editor.changeMode(MODES.LOGO);
   // startSaveMode = () => this.props.editor.changeMode(MODES.SAVE);
 
-  stopEditing = () => {
-    if (!this.props.changed) {
-      editor.cancelEditing();
-    } else {
-      editor.changeMode(MODES.CONFIRM_CANCEL);
-    }
-  };
+  // stopEditing = () => {
+  //   if (!this.props.changed) {
+  //     editor.cancelEditing();
+  //   } else {
+  //     // editor.changeMode(MODES.CONFIRM_CANCEL);
+  //     this.props.setMode(MODES.CONFIRM_CANCEL);
+  //   }
+  // };
 
-  startEditing = () => editor.startEditing();
+  // startEditing = () => editor.startEditing();
 
   render() {
     const {
@@ -145,7 +144,7 @@ class Component extends React.PureComponent<Props, void> {
           <div className="control-bar">
             <button
               className="highlighted  cancel"
-              onClick={this.stopEditing}
+              onClick={this.props.stopEditing}
             >
               <span>ОТМЕНА</span>
             </button>
@@ -163,7 +162,7 @@ class Component extends React.PureComponent<Props, void> {
 
         <div className={classnames('panel right', { active: !editing })}>
           <div className="control-bar">
-            <button className="primary single" onClick={this.startEditing}>
+            <button className="primary single" onClick={this.props.startEditing}>
               <Icon icon="icon-route-2" />
               <span>
                 РЕДАКТИРОВАТЬ
@@ -181,7 +180,15 @@ function mapStateToProps(state) {
     user: {
       user,
       editing,
-      mode, routerPoints, distance, estimateTime, activeSticker, logo, title, address, changed,
+      mode,
+      routerPoints,
+      distance,
+      estimateTime,
+      activeSticker,
+      logo,
+      title,
+      address,
+      changed,
     },
   } = state;
 
@@ -202,6 +209,8 @@ function mapStateToProps(state) {
 
 const mapDispatchToProps = dispatch => bindActionCreators({
   setMode,
+  startEditing,
+  stopEditing,
 }, dispatch);
 
 export const EditorPanel = connect(

src/modules/Editor.js

@@ -99,8 +99,9 @@ export class Editor {
   }
 
   getUser = () => store.getState().user.user;
-  getTitle = () => store.getState().title;
-  getEditing = () => store.getState().editing;
+  getTitle = () => store.getState().user.title;
+  getEditing = () => store.getState().user.editing;
+  getChanged = () => store.getState().user.changed;
 
   setEditing = value => store.dispatch(setEditing(value));
   setDistance = value => store.dispatch(setDistance(value));
@@ -111,10 +112,10 @@ export class Editor {
   setTitle = value => store.dispatch(setTitle(value));
   setAddress = value => store.dispatch(setAddress(value));
 
-  clearChanged = () => store.direction(setChanged(false));
+  clearChanged = () => store.dispatch(setChanged(false));
 
   triggerOnChange = () => {
-    if (!this.getEditing()) return;
+    if (!this.getEditing() && this.getChanged()) return;
 
     this.setChanged(true);
   };
@@ -277,7 +278,7 @@ export class Editor {
     if (this.poly.latlngs && this.poly.latlngs.length > 1) this.poly.poly.enableEdit();
 
     this.stickers.startEditing();
-    this.setEditing(true);
+    // this.setEditing(true);
 
     console.log(this.initialData);
   };

src/redux/user/actions.js

@@ -10,3 +10,6 @@ export const setActiveSticker = activeSticker => ({ type: ACTIONS.SET_ACTIVE_STI
 export const setLogo = logo => ({ type: ACTIONS.SET_LOGO, logo });
 export const setTitle = title => ({ type: ACTIONS.SET_TITLE, title });
 export const setAddress = address => ({ type: ACTIONS.SET_ADDRESS, address });
+
+export const startEditing = () => ({ type: ACTIONS.START_EDITING });
+export const stopEditing = () => ({ type: ACTIONS.STOP_EDITING });

src/redux/user/constants.js

@@ -10,4 +10,7 @@ export const ACTIONS = {
   SET_LOGO: 'SET_LOGO',
   SET_TITLE: 'SET_TITLE',
   SET_ADDRESS: 'SET_ADDRESS',
+
+  START_EDITING: 'START_EDITING',
+  STOP_EDITING: 'STOP_EDITING',
 };

src/redux/user/reducer.js

@@ -13,6 +13,7 @@ const setUser = (state, { user }) => ({
 });
 
 const setEditing = (state, { editing }) => ({ ...state, editing });
+const setChanged = (state, { changed }) => ({ ...state, changed });
 const setMode = (state, { mode }) => ({ ...state, mode });
 const setDistance = (state, { distance }) => ({ ...state, distance });
 const setRouterPoints = (state, { routerPoints }) => ({ ...state, routerPoints });
@@ -25,6 +26,7 @@ const setAddress = (state, { address }) => ({ ...state, address });
 const HANDLERS = {
   [ACTIONS.SET_USER]: setUser,
   [ACTIONS.SET_EDITING]: setEditing,
+  [ACTIONS.SET_CHANGED]: setChanged,
   [ACTIONS.SET_MODE]: setMode,
   [ACTIONS.SET_DISTANCE]: setDistance,
   [ACTIONS.SET_ROUTER_POINTS]: setRouterPoints,

src/redux/user/sagas.js

@@ -1,12 +1,15 @@
 import { REHYDRATE } from 'redux-persist';
 import { takeLatest, select, call, put, takeEvery } from 'redux-saga/effects';
 import { checkUserToken, getGuestToken, getStoredMap } from '$utils/api';
-import { setUser } from '$redux/user/actions';
+import { setEditing, setMode, setUser } from '$redux/user/actions';
 import { getUrlData, pushPath } from '$utils/history';
 import { editor } from '$modules/Editor';
 import { ACTIONS } from '$redux/user/constants';
+import { MODES } from '$constants/modes';
 
 const getUser = state => (state.user.user);
+const getState = state => (state.user);
+
 const hideLoader = () => {
   document.getElementById('loader').style.opacity = 0;
   document.getElementById('loader').style.pointerEvents = 'none';
@@ -79,9 +82,31 @@ function* setModeSaga({ mode }) {
   // console.log('change', mode);
 }
 
+function* startEditingSaga() {
+  yield editor.startEditing();
+  yield put(setEditing(true));
+}
+
+function* stopEditingSaga() {
+  const { changed } = yield select(getState);
+
+  if (!changed) {
+    yield editor.cancelEditing();
+    yield put(setEditing(false));
+    yield put(setMode(MODES.NONE));
+  } else {
+    // editor.changeMode(MODES.CONFIRM_CANCEL);
+    // this.props.setMode(MODES.CONFIRM_CANCEL);
+    yield put(setMode(MODES.CONFIRM_CANCEL));
+  }
+}
+
 export function* userSaga() {
   // Login
   // yield takeLatest(AUTH_ACTIONS.SEND_LOGIN_REQUEST, sendLoginRequestSaga);
   yield takeLatest(REHYDRATE, authChechSaga);
   yield takeEvery(ACTIONS.SET_MODE, setModeSaga);
+
+  yield takeEvery(ACTIONS.START_EDITING, startEditingSaga);
+  yield takeEvery(ACTIONS.STOP_EDITING, stopEditingSaga);
 }