From 0d47cd877325d5248d645066c4ceaa212dd1d1a2 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 26 Nov 2018 13:33:18 +0700 Subject: [PATCH] redux: setMode sagas --- src/components/panels/EditorPanel.jsx | 100 +++++++++++++++++++++----- src/containers/App.jsx | 55 +++++++------- src/modules/Editor.js | 4 +- src/redux/store.js | 2 +- src/redux/user/reducer.js | 8 +++ src/redux/user/sagas.js | 9 ++- 6 files changed, 127 insertions(+), 51 deletions(-) diff --git a/src/components/panels/EditorPanel.jsx b/src/components/panels/EditorPanel.jsx index 381fc6e..ed5dde0 100644 --- a/src/components/panels/EditorPanel.jsx +++ b/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 { + 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(); + if (!this.props.changed) { + 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 {
{changed && '(ch) '} - {totalDistance} км + {distance} км { - {toHours(estimateTime)} + { + // toHours(estimateTime) + }HOURS HERE }
@@ -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); diff --git a/src/containers/App.jsx b/src/containers/App.jsx index 7e9acd0..11b1c64 100644 --- a/src/containers/App.jsx +++ b/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 { @@ -224,12 +223,7 @@ class Component extends React.Component { 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 { userLogout={this.userLogout} /> - + ); } @@ -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, }; } diff --git a/src/modules/Editor.js b/src/modules/Editor.js index c2252b0..13797eb 100644 --- a/src/modules/Editor.js +++ b/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); } diff --git a/src/redux/store.js b/src/redux/store.js index 2d66baf..582b3a9 100644 --- a/src/redux/store.js +++ b/src/redux/store.js @@ -12,7 +12,7 @@ import { userSaga } from '$redux/user/sagas'; const userPersistConfig = { key: 'user', - blacklist: ['editing'], + whitelist: ['user'], storage, }; diff --git a/src/redux/user/reducer.js b/src/redux/user/reducer.js index 0d86428..b9cfde1 100644 --- a/src/redux/user/reducer.js +++ b/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); diff --git a/src/redux/user/sagas.js b/src/redux/user/sagas.js index d9b6cc6..716287d 100644 --- a/src/redux/user/sagas.js +++ b/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); }