adding stickers on click

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 selectUserEditing = (state: IState) => state.user.editing;
+export const selectUserMode = (state: IState) => state.user.mode;
+export const selectUserActiveSticker = (state: IState) => state.user.activeSticker;