redux: fixed performance regression

src/components/logo/LogoDialog.jsx

@@ -8,7 +8,7 @@ type Props = {
   setLogo: Function,
 }
 
-export const LogoDialog = ({ logo, setLogo }: Props)  => (
+export const LogoDialog = ({ logo, setLogo }: Props) => (
   <div className="helper logo-helper">
     <div className="helper-back">
       <Icon icon="icon-logo" size={200} />

src/components/panels/EditorDialog.jsx

@@ -7,12 +7,13 @@ import { TrashDialog } from '$components/trash/TrashDialog';
 import { LogoDialog } from '$components/logo/LogoDialog';
 import { SaveDialog } from '$components/save/SaveDialog';
 import { CancelDialog } from '$components/save/CancelDialog';
-import type { UserType } from '$constants/types';
+
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { editor } from '$modules/Editor';
+
 
 import {
+  setMode,
   setLogo,
   routerCancel,
   routerSubmit,
@@ -21,31 +22,18 @@ import {
   clearPoly,
   clearAll,
   clearCancel,
+  stopEditing,
+  setEditing,
 } from '$redux/user/actions';
 
 type Props = {
   mode: String,
-  routerPoints: Number,
-  editor: Object,
   activeSticker: String,
-  logo: String,
-  user: UserType,
-  title: String,
-  address: String,
-
-  setLogo: Function,
-  routerSubmit: Function,
-  routerCancel: Function,
-  setActiveSticker: Function,
-  clearStickers: Function,
-  clearPoly: Function,
-  clearAll: Function,
-  clearCancel: Function,
 }
 
 export const Component = (props: Props) => {
   const {
-    mode, activeSticker, logo, user, title, address
+    mode, activeSticker,
   } = props;
 
   const showDialog = (
@@ -63,31 +51,14 @@ export const Component = (props: Props) => {
         { mode === MODES.ROUTER && <RouterDialog {...props} /> }
         { mode === MODES.STICKERS && <StickersDialog {...props} /> }
         { mode === MODES.TRASH && <TrashDialog {...props} /> }
-        { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} setLogo={setLogo} /> }
+        { mode === MODES.LOGO && <LogoDialog {...props} /> }
-        { mode === MODES.SAVE && <SaveDialog editor={editor} user={user} title={title} address={address} /> }
+        { mode === MODES.SAVE && <SaveDialog {...props} /> }
-        { mode === MODES.CONFIRM_CANCEL && <CancelDialog editor={editor} /> }
+        { mode === MODES.CONFIRM_CANCEL && <CancelDialog {...props} /> }
       </div>
   );
 };
 
-function mapStateToProps(state) {
+const mapStateToProps = ({ user }) => ({ ...user });
-  const {
-    user: {
-      mode, routerPoints, activeSticker, logo, user, title, address,
-    },
-  } = state;
-
-  return {
-    mode,
-    routerPoints,
-    activeSticker,
-    logo,
-    user,
-    title,
-    address,
-    editor,
-  };
-}
 
 const mapDispatchToProps = dispatch => bindActionCreators({
   routerCancel,
@@ -98,6 +69,9 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   clearPoly,
   clearAll,
   clearCancel,
+  stopEditing,
+  setEditing,
+  setMode,
 }, dispatch);
 
 export const EditorDialog = connect(

src/components/panels/EditorPanel.jsx

@@ -82,7 +82,6 @@ class Component extends React.PureComponent<Props, void> {
         <LogoPreview logo={logo} />
 
         <div className="control-dist">
-          {changed && '(ch) '}
           {distance} км
           <Icon icon="icon-cycle" size={32} />
           {

src/components/save/CancelDialog.jsx

@@ -1,18 +1,24 @@
 import React from 'react';
 
 import { MODES } from '$constants/modes';
+import { editor } from '$modules/Editor';
 
-export class CancelDialog extends React.Component {
+type Props = {
+  stopEditing: Function,
+  setMode: Function,
+  setEditing: Function,
+};
+
+export class CancelDialog extends React.Component<Props, void> {
   cancel = () => {
-    this.props.editor.stopEditing();
+    editor.cancelEditing();
+    // this.props.stopEditing();
+    this.props.setEditing(false);
+    this.props.setMode(MODES.NONE);
   };
 
   proceed = () => {
-    this.props.editor.changeMode(MODES.NONE);
+    this.props.setMode(MODES.NONE);
-  };
-
-  save = () => {
-    this.props.editor.changeMode(MODES.SAVE);
   };
 
   render() {
@@ -24,13 +30,10 @@ export class CancelDialog extends React.Component {
         </div>
         <div className="helper__buttons button-group">
           <div className="button router-helper__button" onClick={this.cancel}>
-            Закрыть
+            Удалить все
           </div>
-          <div className="button success router-helper__button" onClick={this.proceed}>
+          <div className="button primary router-helper__button" onClick={this.proceed}>
-            Продолжить
+            Вернуться
-          </div>
-          <div className="button primary router-helper__button" onClick={this.save}>
-            Сохранить
           </div>
         </div>
       </div>

src/modules/Editor.js

@@ -89,7 +89,6 @@ export class Editor {
   getEditing = () => store.getState().user.editing;
   getChanged = () => store.getState().user.changed;
 
-  setEditing = value => store.dispatch(setEditing(value));
   setMode = value => store.dispatch(setMode(value));
   setDistance = value => store.dispatch(setDistance(value));
   setChanged = value => store.dispatch(setChanged(value));
@@ -102,7 +101,7 @@ export class Editor {
   clearChanged = () => store.dispatch(setChanged(false));
 
   triggerOnChange = () => {
-    if (!this.getEditing() && this.getChanged()) return;
+    if (!this.getEditing() || this.getChanged()) return;
 
     this.setChanged(true);
   };
@@ -194,18 +193,11 @@ export class Editor {
     this.router.clearAll();
     this.stickers.clearAll();
 
-    this.setActiveSticker(null);
+    // this.setActiveSticker(null);
-    this.setMode(MODES.NONE);
+    // this.setMode(MODES.NONE);
-
+    // this.clearChanged();
-    this.clearChanged();
   };
 
-  changeLogo = logo => {
-    // todo: move to sagas
-    this.logo = logo;
-    this.setLogo(logo);
-    this.changeMode(MODES.NONE);
-  };
 
   setData = ({
     route, stickers, version = 1, owner, title, address
@@ -217,6 +209,7 @@ export class Editor {
 
     if (route) this.poly.setPoints(route);
 
+    this.stickers.clearAll();
     if (stickers) {
       stickers.map(sticker => this.stickers.createSticker({
         latlng: sticker.latlng,
@@ -231,7 +224,7 @@ export class Editor {
 
     const bounds = this.poly.poly.getBounds();
 
-    if (Object.values(bounds)) this.map.map.fitBounds(bounds);
+    if (route && bounds && Object.values(bounds)) this.map.map.fitBounds(bounds);
   };
 
   setInitialData = () => {
@@ -251,6 +244,7 @@ export class Editor {
   };
 
   startEditing = () => {
+    console.log('ED START');
     const { path } = getUrlData();
     const { random_url, id } = this.getUser();
 
@@ -269,6 +263,7 @@ export class Editor {
   };
 
   stopEditing = () => {
+    console.log('ED STOP');
     const { path } = getUrlData();
     pushPath(`/${(this.initialData && this.initialData.path) || path}`);
 
@@ -284,13 +279,18 @@ export class Editor {
     console.log('trying to set initial data');
 
     if (this.hasEmptyHistory()) {
+      console.log('empty history');
       this.clearAll();
       this.startEditing();
     } else {
+      console.log('setting initial');
       this.setData(this.initialData);
+      console.log('setting initial - done');
     }
 
     this.clearChanged();
+
+    return true;
   };
 
   dumpData = () => ({

src/modules/Router.js

@@ -122,6 +122,7 @@ export class Router {
   };
 
   submitDrawing = () => {
+    console.log('ROUT', this.router);
     const [route] = this.router._routes;
     if (!route) return;
 

src/redux/user/sagas.js

@@ -1,7 +1,7 @@
 import { REHYDRATE } from 'redux-persist';
 import { takeLatest, select, call, put, takeEvery } from 'redux-saga/effects';
 import { checkUserToken, getGuestToken, getStoredMap } from '$utils/api';
-import { setEditing, setMode, setUser } from '$redux/user/actions';
+import { setActiveSticker, setChanged, setEditing, setMode, setUser } from '$redux/user/actions';
 import { getUrlData, pushPath } from '$utils/history';
 import { editor } from '$modules/Editor';
 import { ACTIONS } from '$redux/user/constants';
@@ -39,6 +39,27 @@ function* startEmptyEditorSaga() {
   // todo: this.clearChanged();
 }
 
+function* startEditingSaga() {
+  yield editor.startEditing();
+  yield put(setEditing(true));
+}
+
+function* stopEditingSaga() {
+  const { changed, editing, mode } = yield select(getState);
+
+  if (!editing) return;
+
+  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));
+  }
+}
+
 function* mapInitSaga() {
   const { path, mode } = getUrlData();
 
@@ -46,13 +67,20 @@ function* mapInitSaga() {
     const map = yield call(getStoredMap, { name: path });
 
     if (map) {
-      // todo: this.clearChanged();
+      console.log('setting!', map, mode);
-      editor.setData(map);
+
+      yield editor.setData(map);
+      yield put(setChanged(false));
 
       if (mode && mode === 'edit') {
-        editor.startEditing();
+        yield call(startEditingSaga);
+        // yield put(setEditing(true));
+        // editor.startEditing();
       } else {
-        editor.stopEditing();
+        console.log('stopping edit');
+        yield put(setEditing(false));
+        // yield call(stopEditingSaga);
+        // editor.stopEditing();
       }
 
       return hideLoader();
@@ -83,25 +111,6 @@ 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));
-  }
-}
-
 function* userLogoutSaga() {
   const { id } = yield select(getUser);
 
@@ -141,24 +150,26 @@ function* routerSubmitSaga() {
   return true;
 }
 
-function* clearSaga({ type }){
+function* clearSaga({ type }) {
   switch (type) {
     case ACTIONS.CLEAR_POLY:
-      editor.poly.clearAll();
+      yield editor.poly.clearAll();
-      editor.router.clearAll();
+      yield editor.router.clearAll();
       break;
 
     case ACTIONS.CLEAR_STICKERS:
-      editor.stickers.clearAll();
+      yield editor.stickers.clearAll();
       break;
 
     case ACTIONS.CLEAR_ALL:
-      editor.clearAll();
+      yield editor.clearAll();
+      yield put(setChanged(false));
       break;
 
     default: break;
   }
 
+  yield put(setActiveSticker(null));
   yield put(setMode(MODES.NONE));
 }
 

src/styles/router.less

@@ -35,3 +35,7 @@
 
 .router-helper {
 }
+
+.router-helper__button {
+  white-space: nowrap;
+}