passing editing status to map

src/redux/map/actions.ts

@@ -1,5 +1,6 @@
 import { MAP_ACTIONS } from "./constants";
 import { IMapReducer } from "./";
+import { IStickerDump } from "$modules/Sticker";
 
 export const mapSet = (map: Partial<IMapReducer>) => ({
   type: MAP_ACTIONS.SET_MAP,
@@ -15,3 +16,14 @@ export const mapSetRoute = (route: IMapReducer['route']) => ({
   type: MAP_ACTIONS.SET_ROUTE,
   route,
 });
+
+export const mapSetSticker = (index: number, sticker: IStickerDump) => ({
+  type: MAP_ACTIONS.SET_STICKER,
+  index,
+  sticker,
+});
+
+export const mapDropSticker = (index: number) => ({
+  type: MAP_ACTIONS.DROP_STICKER,
+  index,
+});

src/redux/map/constants.ts

@@ -4,4 +4,7 @@ export const MAP_ACTIONS = {
   SET_MAP: `${P}-SET_MAP`,
   SET_PROVIDER: `${P}-SET_PROVIDER`,
   SET_ROUTE: `${P}-SET_ROUTE`,
+
+  SET_STICKER: `${P}-SET_STICKER`,
+  DROP_STICKER: `${P}-DROP_STICKER`,
 }

src/redux/map/handlers.ts

@@ -1,6 +1,6 @@
 import { MAP_ACTIONS } from "./constants";
 import { IMapReducer } from ".";
-import { mapSet, mapSetProvider, mapSetRoute } from "./actions";
+import { mapSet, mapSetProvider, mapSetRoute, mapSetSticker } from "./actions";
 
 const setMap = (
   state: IMapReducer,
@@ -26,8 +26,26 @@ const setRoute = (
   route
 });
 
+const setSticker = (
+  state: IMapReducer,
+  { sticker, index }: ReturnType<typeof mapSetSticker>
+): IMapReducer => ({
+  ...state,
+  stickers: state.stickers.map((item, i) => (i === index ? sticker : item))
+});
+
+const dropSticker = (
+  state: IMapReducer,
+  { index }: ReturnType<typeof mapSetSticker>
+): IMapReducer => ({
+  ...state,
+  stickers: state.stickers.filter((_, i) => i !== index)
+});
+
 export const MAP_HANDLERS = {
   [MAP_ACTIONS.SET_MAP]: setMap,
   [MAP_ACTIONS.SET_PROVIDER]: setProvider,
-  [MAP_ACTIONS.SET_ROUTE]: setRoute
+  [MAP_ACTIONS.SET_ROUTE]: setRoute,
+  [MAP_ACTIONS.SET_STICKER]: setSticker,
+  [MAP_ACTIONS.DROP_STICKER]: dropSticker,
 };

src/redux/user/sagas.ts

@@ -167,11 +167,13 @@ function* loadMapSaga(path) {
 
     // TODO: REACTIVE BRANCH:
     // yield put(mapSetProvider(route.provider));
-    yield put(mapSet({
-      provider: route.provider,
-      route: route.route,
-      stickers: route.stickers,
-    }))
+    yield put(
+      mapSet({
+        provider: route.provider,
+        route: route.route,
+        stickers: route.stickers
+      })
+    );
 
     return { route, random_url };
   }
@@ -263,7 +265,7 @@ function* mapInitSaga() {
 }
 
 function* authCheckSaga({ key }: RehydrateAction) {
-  if (key !== 'user') return;
+  if (key !== "user") return;
 
   pushLoaderState(70);
 
@@ -360,15 +362,31 @@ function* clearSaga({ type }) {
     case USER_ACTIONS.CLEAR_POLY:
       yield editor.poly.clearAll();
       yield editor.router.clearAll();
+      yield put(
+        mapSet({
+          route: []
+        })
+      );
       break;
 
     case USER_ACTIONS.CLEAR_STICKERS:
       yield editor.stickers.clearAll();
+      yield put(
+        mapSet({
+          stickers: []
+        })
+      );
       break;
 
     case USER_ACTIONS.CLEAR_ALL:
       yield editor.clearAll();
       yield put(setChanged(false));
+      yield put(
+        mapSet({
+          route: [],
+          stickers: []
+        })
+      );
       break;
 
     default:
@@ -539,7 +557,7 @@ function* changeProviderSaga({
   yield put(setProvider(provider));
 
   // TODO: REACTIVE BRANCH
-  yield put(mapSetProvider(provider))
+  yield put(mapSetProvider(provider));
 
   if (current_provider === provider) return;
 

src/redux/user/selectors.ts

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