From 6db2809de5058afcd76da3e21172cc14155c2526 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 30 Dec 2019 17:35:37 +0700 Subject: [PATCH] adding stickers on click --- src/components/Cursor.tsx | 5 ++-- src/constants/modes.ts | 5 +--- src/containers/App.tsx | 5 ++-- src/containers/map/Map/index.tsx | 28 ++++++++++++++++----- src/containers/map/Route/index.tsx | 4 +-- src/redux/map/actions.ts | 6 +++++ src/redux/map/constants.ts | 2 ++ src/redux/map/sagas.ts | 40 ++++++++++++++++++++++++++++++ src/redux/store.ts | 2 ++ src/redux/user/index.ts | 2 +- src/redux/user/selectors.ts | 4 ++- 11 files changed, 83 insertions(+), 20 deletions(-) create mode 100644 src/redux/map/sagas.ts diff --git a/src/components/Cursor.tsx b/src/components/Cursor.tsx index 52e8e93..eb0afeb 100644 --- a/src/components/Cursor.tsx +++ b/src/components/Cursor.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import { Icon } from '$components/panels/Icon'; -import { IModes, MODES } from '$constants/modes'; +import { MODES } from '$constants/modes'; import { IStickerPack, STICKERS } from '$constants/stickers'; import { StickerIcon } from '$components/StickerIcon'; +import { IRootReducer } from '$redux/user'; interface Props { - mode: keyof IModes, + mode: IRootReducer['mode'], sticker: string, set: keyof IStickerPack, } diff --git a/src/constants/modes.ts b/src/constants/modes.ts index 70f5588..e012dc3 100644 --- a/src/constants/modes.ts +++ b/src/constants/modes.ts @@ -1,8 +1,5 @@ -export interface IModes { - [x: string]: string, -} -export const MODES: IModes = { +export const MODES = { POLY: 'POLY', STICKERS: 'STICKERS', STICKERS_SELECT: 'STICKERS_SELECT', diff --git a/src/containers/App.tsx b/src/containers/App.tsx index bd1aa38..e26ea06 100644 --- a/src/containers/App.tsx +++ b/src/containers/App.tsx @@ -17,16 +17,15 @@ import { TopRightPanel } from '$components/panels/TopRightPanel'; import { LogoPreview } from '$components/logo/LogoPreview'; import { IStickerPack } from "$constants/stickers"; import { IDialogs } from "$constants/dialogs"; -import { IModes } from "$constants/modes"; import { Map } from "$containers/map/Map" -import { TileLayer } from '$containers/map/TileLayer'; +import { IRootReducer } from '$redux/user'; type Props = { sticker: string, renderer_active: boolean, - mode: keyof IModes, + mode: IRootReducer['mode'], dialog: keyof IDialogs, dialog_active: boolean, set: keyof IStickerPack, diff --git a/src/containers/map/Map/index.tsx b/src/containers/map/Map/index.tsx index 2c39b00..2aa1a64 100644 --- a/src/containers/map/Map/index.tsx +++ b/src/containers/map/Map/index.tsx @@ -24,7 +24,8 @@ const mapStateToProps = state => ({ const mapDispatchToProps = { mapSetRoute: MAP_ACTIONS.mapSetRoute, mapDropSticker: MAP_ACTIONS.mapDropSticker, - mapSetSticker: MAP_ACTIONS.mapSetSticker + mapSetSticker: MAP_ACTIONS.mapSetSticker, + mapClicked: MAP_ACTIONS.mapClicked }; type IProps = React.HTMLAttributes & @@ -37,26 +38,41 @@ const MapUnconnected: React.FC = ({ stickers, editing, + mapClicked, mapSetRoute, mapSetSticker, mapDropSticker }) => { const ref = React.useRef(null); - const [maps, setMaps] = React.useState(null); + const [layer, setLayer] = React.useState(null); + + const onClick = React.useCallback(event => { + mapClicked(event.latlng); + }, [mapClicked]); React.useEffect(() => { if (!ref.current) return; - setMaps(map(ref.current).setView([55.0153275, 82.9071235], 13)); + setLayer(map(ref.current).setView([55.0153275, 82.9071235], 13)); }, [ref]); + React.useEffect(() => { + if (!layer) return; + + layer.addEventListener("click", onClick) + + return () => { + layer.removeEventListener("click", onClick) + } + }, [layer, onClick]); + return createPortal(
- - + + = memo(({ route, is_editing, mapSetRoute, map }) => { useEffect(() => { if (!layer) return; - console.log('route use effect!') - const points = (route && route.length > 0 && route) || []; - layer.setPoints(points as LatLng[]); // TODO: refactor this + layer.setPoints(points as LatLng[]); }, [route, layer]); useEffect(() => { diff --git a/src/redux/map/actions.ts b/src/redux/map/actions.ts index 49aad53..c45885b 100644 --- a/src/redux/map/actions.ts +++ b/src/redux/map/actions.ts @@ -1,6 +1,7 @@ import { MAP_ACTIONS } from "./constants"; import { IMapReducer } from "./"; import { IStickerDump } from "$modules/Sticker"; +import { ILatLng } from "./types"; export const mapSet = (map: Partial) => ({ type: MAP_ACTIONS.SET_MAP, @@ -27,3 +28,8 @@ export const mapDropSticker = (index: number) => ({ type: MAP_ACTIONS.DROP_STICKER, index, }); + +export const mapClicked = (latlng: ILatLng) => ({ + type: MAP_ACTIONS.MAP_CLICKED, + latlng, +}); diff --git a/src/redux/map/constants.ts b/src/redux/map/constants.ts index 630c2d1..e9317fc 100644 --- a/src/redux/map/constants.ts +++ b/src/redux/map/constants.ts @@ -7,4 +7,6 @@ export const MAP_ACTIONS = { SET_STICKER: `${P}-SET_STICKER`, DROP_STICKER: `${P}-DROP_STICKER`, + + MAP_CLICKED: `${P}-MAP_CLICKED` } \ No newline at end of file diff --git a/src/redux/map/sagas.ts b/src/redux/map/sagas.ts new file mode 100644 index 0000000..abfbdc1 --- /dev/null +++ b/src/redux/map/sagas.ts @@ -0,0 +1,40 @@ +import { takeEvery, select, put } from "redux-saga/effects"; +import { MAP_ACTIONS } from "./constants"; +import { mapClicked, mapSet } from "./actions"; +import { selectUserMode, selectUserActiveSticker } from "$redux/user/selectors"; +import { IRootReducer } from "$redux/user"; +import { MODES } from "$constants/modes"; +import { selectMapStickers } from "./selectors"; +import { setActiveSticker, setMode } from "$redux/user/actions"; + +function* onMapClick({ latlng }: ReturnType) { + const mode = yield select(selectUserMode); + const { set, sticker } = yield select(selectUserActiveSticker); + const stickers = yield select(selectMapStickers); + + switch (mode) { + case MODES.STICKERS: + yield put( + mapSet({ + stickers: [ + ...stickers, + { + latlng, + set, + sticker, + text: "", + angle: 0, + } + ] + }) + ); + yield put(setMode(MODES.NONE)) + break; + + default: + } +} + +export function* mapSaga() { + yield takeEvery(MAP_ACTIONS.MAP_CLICKED, onMapClick); +} diff --git a/src/redux/store.ts b/src/redux/store.ts index 5774cd6..377c853 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -6,6 +6,7 @@ import createSagaMiddleware from 'redux-saga'; import { userReducer, IRootReducer } from '$redux/user'; import { userSaga } from '$redux/user/sagas'; +import { mapSaga } from '$redux/map/sagas'; import { createBrowserHistory } from 'history'; import { locationChanged } from '$redux/user/actions'; import { PersistConfig, Persistor } from "redux-persist/es/types"; @@ -42,6 +43,7 @@ export const store = createStore( export function configureStore(): { store: Store, persistor: Persistor } { sagaMiddleware.run(userSaga); + sagaMiddleware.run(mapSaga); const persistor = persistStore(store); diff --git a/src/redux/user/index.ts b/src/redux/user/index.ts index 4cfae99..1bc464f 100644 --- a/src/redux/user/index.ts +++ b/src/redux/user/index.ts @@ -37,7 +37,7 @@ export interface IRootReducer { ready: boolean, user: IUser, editing: boolean, - mode: keyof typeof MODES, + mode: typeof MODES[keyof typeof MODES], logo: keyof typeof LOGOS, routerPoints: number, distance: number, diff --git a/src/redux/user/selectors.ts b/src/redux/user/selectors.ts index 529aad2..5fec11b 100644 --- a/src/redux/user/selectors.ts +++ b/src/redux/user/selectors.ts @@ -1,3 +1,5 @@ import { IState } from '$redux/store' -export const selectUserEditing = (state: IState) => state.user.editing; \ No newline at end of file +export const selectUserEditing = (state: IState) => state.user.editing; +export const selectUserMode = (state: IState) => state.user.mode; +export const selectUserActiveSticker = (state: IState) => state.user.activeSticker; \ No newline at end of file