adding stickers on click

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,
 }

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',

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,

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<HTMLDivElement> &
@@ -37,26 +38,41 @@ const MapUnconnected: React.FC<IProps> = ({
   stickers,
   editing,
 
+  mapClicked,
   mapSetRoute,
   mapSetSticker,
   mapDropSticker
 }) => {
   const ref = React.useRef(null);
-  const [maps, setMaps] = React.useState<MapInterface>(null);
+  const [layer, setLayer] = React.useState<MapInterface>(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(
     <div ref={ref}>
-      <TileLayer provider={provider} map={maps} />
+      <TileLayer provider={provider} map={layer} />
-      <Route route={route} mapSetRoute={mapSetRoute} map={maps} is_editing={editing} />
+      <Route route={route} mapSetRoute={mapSetRoute} map={layer} is_editing={editing} />
       <Stickers
         stickers={stickers}
-        map={maps}
+        map={layer}
         mapSetSticker={mapSetSticker}
         mapDropSticker={mapDropSticker}
         is_editing={editing}

src/containers/map/Route/index.tsx

@@ -59,11 +59,9 @@ const Route: FC<IProps> = 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(() => {

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<IMapReducer>) => ({
   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,
+});

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`
 }

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<typeof mapClicked>) {
+  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);
+}

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<any>, persistor: Persistor } {
   sagaMiddleware.run(userSaga);
+  sagaMiddleware.run(mapSaga);
 
   const persistor = persistStore(store);
 

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,

src/redux/user/selectors.ts

@@ -1,3 +1,5 @@
 import { IState } from '$redux/store'
 
 export const selectUserEditing = (state: IState) => state.user.editing;
+export const selectUserMode = (state: IState) => state.user.mode;
+export const selectUserActiveSticker = (state: IState) => state.user.activeSticker;