redux: trashing fixed

src/components/panels/EditorDialog.jsx

@@ -8,11 +8,21 @@ 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 { setLogo, routerCancel, routerSubmit } from '$redux/user/actions';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { editor } from '$modules/Editor';
 
+import {
+  setLogo,
+  routerCancel,
+  routerSubmit,
+  setActiveSticker,
+  clearStickers,
+  clearPoly,
+  clearAll,
+  clearCancel,
+} from '$redux/user/actions';
+
 type Props = {
   mode: String,
   routerPoints: Number,
@@ -26,6 +36,11 @@ type Props = {
   setLogo: Function,
   routerSubmit: Function,
   routerCancel: Function,
+  setActiveSticker: Function,
+  clearStickers: Function,
+  clearPoly: Function,
+  clearAll: Function,
+  clearCancel: Function,
 }
 
 export const Component = (props: Props) => {
@@ -46,8 +61,8 @@ export const Component = (props: Props) => {
     showDialog &&
       <div id="control-dialog">
         { mode === MODES.ROUTER && <RouterDialog {...props} /> }
-        { mode === MODES.STICKERS && <StickersDialog editor={editor} /> }
-        { mode === MODES.TRASH && <TrashDialog editor={editor} /> }
+        { mode === MODES.STICKERS && <StickersDialog {...props} /> }
+        { mode === MODES.TRASH && <TrashDialog {...props} /> }
         { mode === MODES.LOGO && <LogoDialog editor={editor} logo={logo} setLogo={setLogo} /> }
         { mode === MODES.SAVE && <SaveDialog editor={editor} user={user} title={title} address={address} /> }
         { mode === MODES.CONFIRM_CANCEL && <CancelDialog editor={editor} /> }
@@ -78,6 +93,11 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   routerCancel,
   routerSubmit,
   setLogo,
+  setActiveSticker,
+  clearStickers,
+  clearPoly,
+  clearAll,
+  clearCancel,
 }, dispatch);
 
 export const EditorDialog = connect(

src/components/stickers/StickersDialog.jsx

@@ -1,22 +1,23 @@
+// @flow
 import React from 'react';
 
 import { stickers } from '$constants/stickers';
 import sprite from '$sprites/stickers.svg';
 
-export class StickersDialog extends React.Component {
-  render() {
-    return (
-      <div className="helper stickers-helper">
-        {
-          stickers.map(sticker => (
-            <div className="sticker-preview" key={sticker}>
-              <svg width={48} height={48} viewBox="0 0 64 64" onClick={() => this.props.editor.setSticker(sticker)}>
-                <use xlinkHref={`${sprite}#sticker-${sticker}`} x="0" y="0" width="64" height="64" />
-              </svg>
-            </div>
-          ))
-        }
-      </div>
-    );
-  }
-}
+type Props = {
+  setActiveSticker: Function
+};
+
+export const StickersDialog = ({ setActiveSticker }: Props) => (
+  <div className="helper stickers-helper">
+    {
+      stickers.map(sticker => (
+        <div className="sticker-preview" key={sticker}>
+          <svg width={48} height={48} viewBox="0 0 64 64" onClick={() => setActiveSticker(sticker)}>
+            <use xlinkHref={`${sprite}#sticker-${sticker}`} x="0" y="0" width="64" height="64" />
+          </svg>
+        </div>
+      ))
+    }
+  </div>
+);

src/components/trash/TrashDialog.jsx

@@ -1,48 +1,33 @@
 import React from 'react';
 
-import { MODES } from '$constants/modes';
-
-export class TrashDialog extends React.Component {
-  clearPoly = () => {
-    this.props.editor.poly.clearAll();
-    this.props.editor.changeMode(MODES.NONE);
-  };
-
-  clearStickers = () => {
-    this.props.editor.stickers.clearAll();
-    this.props.editor.changeMode(MODES.NONE);
-  };
-
-  clearAll = () => {
-    this.props.editor.clearAll();
-  };
-
-  cancel = () => {
-    this.props.editor.changeMode(MODES.NONE);
-  };
-
-  render() {
-    return (
-      <div className="helper trash-helper">
-        <div className="helper__text">
-          <div className="big white">Уверены?</div>
-          <div className="small gray">Мы все удалим</div>
-        </div>
-        <div className="helper__buttons button-group">
-          <div className="button router-helper__button" onClick={this.clearStickers}>
-            Стикеры
-          </div>
-          <div className="button router-helper__button" onClick={this.clearPoly}>
-            Маршрут
-          </div>
-          <div className="button danger router-helper__button" onClick={this.clearAll}>
-            Очистить
-          </div>
-          <div className="button primary router-helper__button" onClick={this.cancel}>
-            Отмена
-          </div>
-        </div>
-      </div>
-    );
-  }
+type Props = {
+  clearPoly: Function,
+  clearStickers: Function,
+  clearAll: Function,
+  clearCancel: Function,
 }
+
+export const TrashDialog = ({
+  clearPoly, clearStickers, clearAll, clearCancel
+}: Props) => (
+  <div className="helper trash-helper">
+    <div className="helper__text">
+      <div className="big white">Уверены?</div>
+      <div className="small gray">Мы все удалим</div>
+    </div>
+    <div className="helper__buttons button-group">
+      <div className="button router-helper__button" onClick={clearStickers}>
+        Стикеры
+      </div>
+      <div className="button router-helper__button" onClick={clearPoly}>
+        Маршрут
+      </div>
+      <div className="button danger router-helper__button" onClick={clearAll}>
+        Очистить
+      </div>
+      <div className="button primary router-helper__button" onClick={clearCancel}>
+        Отмена
+      </div>
+    </div>
+  </div>
+);

src/modules/Editor.js

@@ -180,11 +180,6 @@ export class Editor {
     this.poly.pushPoints(latlngs);
   };
 
-  // setSticker = sticker => {
-  //   this.activeSticker = sticker;
-  //   this.setActiveSticker(sticker);
-  // };
-
   clearSticker = () => {
     if (this.activeSticker) {
       this.setActiveSticker(null);

src/redux/user/actions.js

@@ -19,3 +19,8 @@ export const stopEditing = () => ({ type: ACTIONS.STOP_EDITING });
 
 export const routerCancel = () => ({ type: ACTIONS.ROUTER_CANCEL });
 export const routerSubmit = () => ({ type: ACTIONS.ROUTER_SUBMIT });
+
+export const clearPoly = () => ({ type: ACTIONS.CLEAR_POLY });
+export const clearStickers = () => ({ type: ACTIONS.CLEAR_STICKERS });
+export const clearAll = () => ({ type: ACTIONS.CLEAR_ALL });
+export const clearCancel = () => ({ type: ACTIONS.CLEAR_CANCEL });

src/redux/user/constants.js

@@ -17,4 +17,9 @@ export const ACTIONS = {
 
   ROUTER_CANCEL: 'ROUTER_CANCEL',
   ROUTER_SUBMIT: 'ROUTER_SUBMIT',
+
+  CLEAR_POLY: 'CLEAR_POLY',
+  CLEAR_STICKERS: 'CLEAR_STICKERS',
+  CLEAR_ALL: 'CLEAR_ALL',
+  CLEAR_CANCEL: 'CLEAR_CANCEL',
 };

src/redux/user/sagas.js

@@ -141,6 +141,27 @@ function* routerSubmitSaga() {
   return true;
 }
 
+function* clearSaga({ type }){
+  switch (type) {
+    case ACTIONS.CLEAR_POLY:
+      editor.poly.clearAll();
+      editor.router.clearAll();
+      break;
+
+    case ACTIONS.CLEAR_STICKERS:
+      editor.stickers.clearAll();
+      break;
+
+    case ACTIONS.CLEAR_ALL:
+      editor.clearAll();
+      break;
+
+    default: break;
+  }
+
+  yield put(setMode(MODES.NONE));
+}
+
 export function* userSaga() {
   // ASYNCHRONOUS!!! :-)
 
@@ -156,4 +177,11 @@ export function* userSaga() {
 
   yield takeEvery(ACTIONS.ROUTER_CANCEL, routerCancelSaga);
   yield takeEvery(ACTIONS.ROUTER_SUBMIT, routerSubmitSaga);
+  yield takeEvery([
+    ACTIONS.CLEAR_POLY,
+    ACTIONS.CLEAR_STICKERS,
+    ACTIONS.CLEAR_ALL,
+    ACTIONS.CLEAR_CANCEL,
+  ], clearSaga);
+
 }