From dde6cf83e9682e277382ae6f95ca0e48b1934394 Mon Sep 17 00:00:00 2001 From: muerwre Date: Mon, 26 Nov 2018 13:15:18 +0700 Subject: [PATCH] redux: editor working --- src/containers/App.jsx | 54 ++++++++++++++++++++++--------------- src/index.html | 2 +- src/modules/Editor.js | 31 +++++++++++++-------- src/redux/user/actions.js | 3 +++ src/redux/user/constants.js | 4 +++ src/redux/user/reducer.js | 23 ++++++++++------ src/redux/user/sagas.js | 2 +- 7 files changed, 76 insertions(+), 43 deletions(-) diff --git a/src/containers/App.jsx b/src/containers/App.jsx index be3129c..7e9acd0 100644 --- a/src/containers/App.jsx +++ b/src/containers/App.jsx @@ -1,16 +1,15 @@ // @flow import React from 'react'; -import { Editor, editor } from '$modules/Editor'; +import { editor } from '$modules/Editor'; import { EditorPanel } from '$components/panels/EditorPanel'; import { Fills } from '$components/Fills'; import { DEFAULT_LOGO } from '$constants/logos'; import { UserLocation } from '$components/UserLocation'; import { DEFAULT_USER } from '$constants/auth'; -import { getGuestToken, checkUserToken, getStoredMap } from '$utils/api'; import { storeData, getData } from '$utils/storage'; import { UserPanel } from '$components/panels/UserPanel'; -import { getUrlData, pushPath } from '$utils/history'; +import { pushPath } from '$utils/history'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; @@ -19,6 +18,14 @@ import type { UserType } from '$constants/types'; type Props = { user: UserType, + editing: false, + mode: String, + + // not implemented + title: String, + address: String, + changed: Boolean, + totalDistance: Number, } type State = { @@ -26,7 +33,6 @@ type State = { editing: Boolean, logo: String, routerPoints: Number, - totalDistance: Number, estimateTime: Number, activeSticker: String, title: String, @@ -36,19 +42,19 @@ type State = { class Component extends React.Component { state = { - mode: 'none', - editing: false, + // mode: 'none', + // editing: false, logo: DEFAULT_LOGO, routerPoints: 0, totalDistance: 0, estimateTime: 0, activeSticker: null, - user: { - ...DEFAULT_USER, - }, - title: '', - address: '', - changed: false, + // user: { + // ...DEFAULT_USER, + // }, + // title: '', + // address: '', + // changed: false, }; componentDidMount() { @@ -134,12 +140,12 @@ class Component extends React.Component { }; getUser = () => this.state.user; - - triggerOnChange = () => { - if (!this.state.editing) return; - - this.setState({ changed: true }); - }; + // + // triggerOnChange = () => { + // if (!this.state.editing) return; + // + // this.setState({ changed: true }); + // }; clearChanged = () => { this.setState({ changed: false }); @@ -219,10 +225,10 @@ class Component extends React.Component { render() { const { state: { - mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, editing, title, address, changed, + mode, routerPoints, totalDistance, estimateTime, activeSticker, logo, title, address, changed, }, props: { - user, + user, editing, } } = this; @@ -260,11 +266,15 @@ class Component extends React.Component { function mapStateToProps(state) { const { - user, + user: { + user, + editing, + }, } = state; return { - user + user, + editing, }; } diff --git a/src/index.html b/src/index.html index 067fea9..458c14f 100644 --- a/src/index.html +++ b/src/index.html @@ -23,7 +23,7 @@ +
-
diff --git a/src/modules/Editor.js b/src/modules/Editor.js index 99336fb..c2252b0 100644 --- a/src/modules/Editor.js +++ b/src/modules/Editor.js @@ -9,21 +9,21 @@ import { DEFAULT_LOGO } from '$constants/logos'; import { parseStickerAngle, parseStickerStyle } from '$utils/import'; import { getUrlData, pushPath } from '$utils/history'; import { store } from '$redux/store'; -import { setEditing } from '$redux/user/actions'; +import { setChanged, setDistance, setEditing, setMode } from '$redux/user/actions'; export class Editor { constructor({ // container, // mode, - setMode, + // setMode, setRouterPoints, - setTotalDist, + // setTotalDist, setActiveSticker, setLogo, // setEditing, setTitle, setAddress, - triggerOnChange, + // triggerOnChange, clearChanged, // getTitle, }) { @@ -33,11 +33,11 @@ export class Editor { this.initialData = {}; const { - lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map } + triggerOnChange, lockMapClicks, routerMoveStart, changeMode, pushPolyPoints, map: { map } } = this; this.poly = new Poly({ - map, routerMoveStart, lockMapClicks, setTotalDist, triggerOnChange + map, routerMoveStart, lockMapClicks, setTotalDist: this.setDistance, triggerOnChange }); this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange }); this.router = new Router({ @@ -76,12 +76,12 @@ export class Editor { this.clearChanged = clearChanged; this.setActiveSticker = setActiveSticker; this.setLogo = setLogo; - this.setMode = setMode; + // this.setMode = setMode; // this.setEditing = setEditing; this.setTitle = setTitle; this.setAddress = setAddress; // this.getUser = getUser; - this.mode = 'none'; + this.mode = MODES.NONE; // this.getTitle = getTitle; map.addEventListener('mouseup', this.onClick); @@ -89,9 +89,20 @@ export class Editor { map.addEventListener('dragstop', () => lockMapClicks(false)); } - getUser = () => store.getState().user; + getUser = () => store.getState().user.user; getTitle = () => store.getState().title; + getEditing = () => store.getState().editing; + setEditing = editing => store.dispatch(setEditing(editing)); + setMode = mode => store.dispatch(setMode(mode)); + setDistance = distance => store.dispatch(setDistance(distance)); + setChanged = changed => store.dispatch(setChanged(changed)); + + triggerOnChange = () => { + if (!this.getEditing()) return; + + this.setChanged(true); + }; createStickerOnClick = (e) => { if (!e || !e.latlng || !this.activeSticker) return; @@ -300,8 +311,6 @@ export class Editor { } export const editor = new Editor({ - container: 'map', - mode: 'none', // setMode: this.setMode, // setRouterPoints: this.setRouterPoints, // setTotalDist: this.setTotalDist, diff --git a/src/redux/user/actions.js b/src/redux/user/actions.js index 58908c9..77463ca 100644 --- a/src/redux/user/actions.js +++ b/src/redux/user/actions.js @@ -2,3 +2,6 @@ import { ACTIONS } from '$redux/user/constants'; export const setUser = user => ({ type: ACTIONS.SET_USER, user }); export const setEditing = editing => ({ type: ACTIONS.SET_EDITING, editing }); +export const setMode = mode => ({ type: ACTIONS.SET_MODE, mode }); +export const setDistance = distance => ({ type: ACTIONS.SET_DISTANCE, distance }); +export const setChanged = changed => ({ type: ACTIONS.SET_CHANGED, changed }); diff --git a/src/redux/user/constants.js b/src/redux/user/constants.js index bc847cf..a3f4549 100644 --- a/src/redux/user/constants.js +++ b/src/redux/user/constants.js @@ -1,4 +1,8 @@ export const ACTIONS = { SET_USER: 'SET_USER', SET_EDITING: 'SET_EDITING', + + SET_MODE: 'SET_MODE', + SET_DISTANCE: 'SET_DISTANCE', + SET_CHANGED: 'SET_CHANGED', }; diff --git a/src/redux/user/reducer.js b/src/redux/user/reducer.js index 51c93af..0d86428 100644 --- a/src/redux/user/reducer.js +++ b/src/redux/user/reducer.js @@ -1,25 +1,32 @@ import { createReducer } from 'reduxsauce'; -import { ACTIONS, EMPTY_USER } from '$redux/user/constants'; +import { ACTIONS } from '$redux/user/constants'; import { DEFAULT_USER } from '$constants/auth'; +import { MODES } from '$constants/modes'; const setUser = (state, { user }) => ({ ...state, - ...user, -}); - -const setEditing = (state, { editing }) => ({ - ...state, - editing, + user: { + ...state.user, + ...user, + }, }); +const setEditing = (state, { editing }) => ({ ...state, editing }); +const setMode = (state, { mode }) => ({ ...state, mode }); +const setDistance = (state, { distance }) => ({ ...state, distance }); const HANDLERS = { [ACTIONS.SET_USER]: setUser, [ACTIONS.SET_EDITING]: setEditing, + [ACTIONS.SET_MODE]: setMode, + [ACTIONS.SET_DISTANCE]: setDistance, }; export const INITIAL_STATE = { - ...DEFAULT_USER + user: { ...DEFAULT_USER }, + editing: false, + mode: MODES.NONE, + distance: 0, }; export const userReducer = createReducer(INITIAL_STATE, HANDLERS); diff --git a/src/redux/user/sagas.js b/src/redux/user/sagas.js index e04ad26..d9b6cc6 100644 --- a/src/redux/user/sagas.js +++ b/src/redux/user/sagas.js @@ -5,7 +5,7 @@ import { setUser } from '$redux/user/actions'; import { getUrlData, pushPath } from '$utils/history'; import { editor } from '$modules/Editor'; -const getUser = state => (state.user); +const getUser = state => (state.user.user); const hideLoader = () => { document.getElementById('loader').style.opacity = 0; document.getElementById('loader').style.pointerEvents = 'none';