redux: setMode sagas

src/components/panels/EditorPanel.jsx

@@ -7,35 +7,62 @@ import { toHours } from '$utils/format';
 import { Icon } from '$components/panels/Icon';
 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 type { UserType } from '$constants/types';
+import { editor } from '$modules/Editor';
 
-export class EditorPanel extends React.PureComponent {
-  startPolyMode = () => this.props.editor.changeMode(MODES.POLY);
+type Props = {
+  user: UserType,
+  editing: false,
+  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,
 
-  startStickerMode = () => this.props.editor.changeMode(MODES.STICKERS);
+  setMode: Function,
+}
 
-  startRouterMode = () => this.props.editor.changeMode(MODES.ROUTER);
-
-  startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER);
-
-  startTrashMode = () =>  this.props.editor.changeMode(MODES.TRASH);
-
-  startLogoMode = () => this.props.editor.changeMode(MODES.LOGO);
-
-  startSaveMode = () => this.props.editor.changeMode(MODES.SAVE);
+class Component extends React.PureComponent<Props, void> {
+  startPolyMode = () => this.props.setMode(MODES.POLY);
+  startStickerMode = () => this.props.setMode(MODES.STICKERS);
+  startRouterMode = () => this.props.setMode(MODES.ROUTER);
+  startShotterMode = () => this.props.setMode(MODES.SHOTTER);
+  startTrashMode = () => this.props.setMode(MODES.TRASH);
+  startLogoMode = () => this.props.setMode(MODES.LOGO);
+  startSaveMode = () => this.props.setMode(MODES.SAVE);
+  // startPolyMode = () => this.props.editor.changeMode(MODES.POLY);
+  // startStickerMode = () => this.props.editor.changeMode(MODES.STICKERS);
+  // startRouterMode = () => this.props.editor.changeMode(MODES.ROUTER);
+  // startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER);
+  // startTrashMode = () =>  this.props.editor.changeMode(MODES.TRASH);
+  // startLogoMode = () => this.props.editor.changeMode(MODES.LOGO);
+  // startSaveMode = () => this.props.editor.changeMode(MODES.SAVE);
 
   stopEditing = () => {
     if (!this.props.changed) {
-      this.props.editor.cancelEditing();
+      editor.cancelEditing();
     } else {
-      this.props.editor.changeMode(MODES.CONFIRM_CANCEL);
+      editor.changeMode(MODES.CONFIRM_CANCEL);
     }
   };
 
-  startEditing = () => this.props.editor.startEditing();
+  startEditing = () => editor.startEditing();
 
   render() {
     const {
-      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker, logo, user, editing, title, address, changed,
+      mode, routerPoints, distance, estimateTime, activeSticker, logo, user, editing, title, address, changed,
     } = this.props;
 
     return (
@@ -56,10 +83,12 @@ export class EditorPanel extends React.PureComponent {
 
         <div className="control-dist">
           {changed && '(ch) '}
-          {totalDistance} км
+          {distance} км
           <Icon icon="icon-cycle" size={32} />
           {
-            <span>{toHours(estimateTime)}</span>
+            <span>{
+              // toHours(estimateTime)
+            }HOURS HERE</span>
           }
         </div>
 
@@ -146,3 +175,36 @@ export class EditorPanel extends React.PureComponent {
     );
   }
 }
+
+function mapStateToProps(state) {
+  const {
+    user: {
+      user,
+      editing,
+      mode, routerPoints, distance, estimateTime, activeSticker, logo, title, address, changed,
+    },
+  } = state;
+
+  return {
+    user,
+    editing,
+    mode,
+    routerPoints,
+    distance,
+    estimateTime,
+    activeSticker,
+    logo,
+    title,
+    address,
+    changed,
+  };
+}
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+  setMode,
+}, dispatch);
+
+export const EditorPanel = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Component);

src/containers/App.jsx

@@ -17,18 +17,14 @@ import { hot } from 'react-hot-loader';
 import type { UserType } from '$constants/types';
 
 type Props = {
+  // todo: clean this!
   user: UserType,
   editing: false,
   mode: String,
-
-  // not implemented
+  changed: Boolean,
+  distance: Number,
   title: String,
   address: String,
-  changed: Boolean,
-  totalDistance: Number,
-}
-
-type State = {
   mode: String,
   editing: Boolean,
   logo: String,
@@ -37,7 +33,10 @@ type State = {
   activeSticker: String,
   title: String,
   address: String,
-  changed: Boolean,
+}
+
+type State = {
+
 }
 
 class Component extends React.Component<Props, State> {
@@ -224,12 +223,7 @@ class Component extends React.Component<Props, State> {
 
   render() {
     const {
-      state: {
-        mode, routerPoints, totalDistance, estimateTime, activeSticker, logo,  title, address, changed,
-      },
-      props: {
-        user, editing,
-      }
+      props: { user }
     } = this;
 
     return (
@@ -245,20 +239,7 @@ class Component extends React.Component<Props, State> {
           userLogout={this.userLogout}
         />
 
-        <EditorPanel
-          editor={editor}
-          mode={mode}
-          routerPoints={routerPoints}
-          totalDistance={totalDistance}
-          estimateTime={estimateTime}
-          activeSticker={activeSticker}
-          logo={logo}
-          user={user}
-          editing={editing}
-          title={title}
-          address={address}
-          changed={changed}
-        />
+        <EditorPanel />
       </div>
     );
   }
@@ -269,12 +250,30 @@ function mapStateToProps(state) {
     user: {
       user,
       editing,
+      mode,
+      routerPoints,
+      totalDistance,
+      estimateTime,
+      activeSticker,
+      logo,
+      title,
+      address,
+      changed,
     },
   } = state;
 
   return {
     user,
     editing,
+    mode,
+    routerPoints,
+    totalDistance,
+    estimateTime,
+    activeSticker,
+    logo,
+    title,
+    address,
+    changed,
   };
 }
 

src/modules/Editor.js

@@ -118,12 +118,12 @@ export class Editor {
         this.switches[mode].toggle(); // if we have special function on mode when it toggles
       } else {
         this.disableMode(mode);
-        this.setMode(MODES.NONE);
+        // this.setMode(MODES.NONE);
         this.mode = MODES.NONE;
       }
     } else {
       this.disableMode(this.mode);
-      this.setMode(mode);
+      // this.setMode(mode);
       this.mode = mode;
       this.enableMode(mode);
     }

src/redux/store.js

@@ -12,7 +12,7 @@ import { userSaga } from '$redux/user/sagas';
 
 const userPersistConfig = {
   key: 'user',
-  blacklist: ['editing'],
+  whitelist: ['user'],
   storage,
 };
 

src/redux/user/reducer.js

@@ -2,6 +2,7 @@ import { createReducer } from 'reduxsauce';
 import { ACTIONS } from '$redux/user/constants';
 import { DEFAULT_USER } from '$constants/auth';
 import { MODES } from '$constants/modes';
+import { DEFAULT_LOGO } from '$constants/logos';
 
 const setUser = (state, { user }) => ({
   ...state,
@@ -26,7 +27,14 @@ export const INITIAL_STATE = {
   user: { ...DEFAULT_USER },
   editing: false,
   mode: MODES.NONE,
+  logo: DEFAULT_LOGO,
+  routerPoints: 0,
   distance: 0,
+  estimateTime: 0,
+  activeSticker: null,
+  title: 0,
+  address: '',
+  changed: false,
 };
 
 export const userReducer = createReducer(INITIAL_STATE, HANDLERS);

src/redux/user/sagas.js

@@ -1,9 +1,10 @@
 import { REHYDRATE } from 'redux-persist';
-import { takeLatest, select, call, put } from 'redux-saga/effects';
+import { takeLatest, select, call, put, takeEvery } from 'redux-saga/effects';
 import { checkUserToken, getGuestToken, getStoredMap } from '$utils/api';
 import { setUser } from '$redux/user/actions';
 import { getUrlData, pushPath } from '$utils/history';
 import { editor } from '$modules/Editor';
+import { ACTIONS } from '$redux/user/constants';
 
 const getUser = state => (state.user.user);
 const hideLoader = () => {
@@ -73,8 +74,14 @@ function* authChechSaga() {
   return yield call(mapInitSaga);
 }
 
+function* setModeSaga({ mode }) {
+  return yield editor.changeMode(mode);
+  // console.log('change', mode);
+}
+
 export function* userSaga() {
   // Login
   // yield takeLatest(AUTH_ACTIONS.SEND_LOGIN_REQUEST, sendLoginRequestSaga);
   yield takeLatest(REHYDRATE, authChechSaga);
+  yield takeEvery(ACTIONS.SET_MODE, setModeSaga);
 }