Map layers generated from config.

Trustroots · Nov 21, 2024 · 689b492 · 689b492
1 parent 639e51c
commit 689b492
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 49 deletions.
diff --git a/nr-app/src/common/constants.ts b/nr-app/src/common/constants.ts
@@ -3,3 +3,32 @@ export const DEV_PUBKEY =
 
 export const HITCHMAPS_AUTHOR_PUBLIC_KEY =
   "53055ee011e96a00a705b38253b9cbc6614ccbd37df4dad42ec69bbe608c4209" as const;
+
+export type MapLayer = {
+  title: string;
+  rootUrl: string;
+  kind: 30399 | 30398;
+  pubKey: string;
+};
+
+export type MAP_LAYER_KEY = "hitchmap" | "timesafari" | "triphopping";
+export const MAP_LAYERS: { [key in MAP_LAYER_KEY]: MapLayer } = {
+  hitchmap: {
+    title: "Hitchmap",
+    rootUrl: "https://www.hitchmap.com",
+    kind: 30399,
+    pubKey: "abcd",
+  },
+  timesafari: {
+    title: "Time Safari",
+    rootUrl: "https://www.timesafari.app",
+    kind: 30399,
+    pubKey: "abc",
+  },
+  triphopping: {
+    title: "Trip Hopping",
+    rootUrl: "https://www.triphopping.com",
+    kind: 30398,
+    pubKey: "abc",
+  },
+} as const;
diff --git a/nr-app/src/components/Map.tsx b/nr-app/src/components/Map.tsx
@@ -16,7 +16,8 @@ import { setVisiblePlusCodes } from "@/redux/actions/map.actions";
 import React, { useState } from "react";
 import { Button, Modal, TextInput } from "react-native";
 import { getFirstTagValueFromEvent } from "@/common/utils";
-import { toggleLayer } from "@/redux/slices/map.slice";
+import { mapSelectors, toggleLayer } from "@/redux/slices/map.slice";
+import { MAP_LAYER_KEY, MAP_LAYERS, MapLayer } from "@/common/constants";
 
 const NoteMarker = ({ event }: { event: EventWithMetadata }) => {
   const plusCode = getFirstTagValueFromEvent(event.event, "open-location-code");
@@ -42,6 +43,7 @@ const NoteMarker = ({ event }: { event: EventWithMetadata }) => {
 
 export default function Map() {
   const events = useAppSelector(eventsSelectors.selectAll);
+  const enabledLayers = useAppSelector(mapSelectors.selectEnabledLayers);
   const dispatch = useAppDispatch();
 
   const handleAddNote = () => {
@@ -91,27 +93,17 @@ export default function Map() {
         ))}
       </MapView>
       <View>
-        <View style={styles.toggleContainer}>
-          <Text>Hitchmap</Text>
-          <Switch
-            value={true}
-            onValueChange={() => void dispatch(toggleLayer("hitchmap"))}
-          />
-        </View>
-        <View style={styles.toggleContainer}>
-          <Text>TimeSafari</Text>
-          <Switch
-            value={true}
-            onValueChange={() => void dispatch(toggleLayer("timesafari"))}
-          />
-        </View>
-        <View style={styles.toggleContainer}>
-          <Text>TripHopping</Text>
-          <Switch
-            value={true}
-            onValueChange={() => void dispatch(toggleLayer("triphopping"))}
-          />
-        </View>
+        {(Object.entries(MAP_LAYERS) as [MAP_LAYER_KEY, MapLayer][]).map(
+          ([key, config]) => (
+            <View key={key} style={styles.toggleContainer}>
+              <Text>{config.title}</Text>
+              <Switch
+                value={enabledLayers[key]}
+                onValueChange={() => void dispatch(toggleLayer(key))}
+              />
+            </View>
+          ),
+        )}
       </View>
 
       <Modal

diff --git a/nr-app/src/redux/sagas/map.saga.ts b/nr-app/src/redux/sagas/map.saga.ts
@@ -1,5 +1,4 @@
-import { DEV_PUBKEY } from "@/common/constants";
-import { MAP_LAYER_KEY, MAP_LAYERS } from "@/utils/map.utils";
+import { DEV_PUBKEY, MAP_LAYER_KEY, MAP_LAYERS } from "@/common/constants";
 import { PayloadAction } from "@reduxjs/toolkit";
 import { Filter } from "nostr-tools";
 import { all, Effect, put, select, throttle } from "redux-saga/effects";

diff --git a/nr-app/src/redux/slices/map.slice.ts b/nr-app/src/redux/slices/map.slice.ts
@@ -1,7 +1,7 @@
-import { MAP_LAYER_KEY } from "@/utils/map.utils";
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { setVisiblePlusCodes } from "../actions/map.actions";
 import { RootState } from "../store";
+import { MAP_LAYER_KEY } from "@/common/constants";
 
 export const SLICE_NAME = "map";
 
@@ -57,6 +57,7 @@ const mapSlice = createSlice({
       const enabledKeys = keys.filter((key) => state.enabledLayers[key]);
       return enabledKeys;
     },
+    selectEnabledLayers: (state) => state.enabledLayers,
   },
 });
 

diff --git a/nr-app/src/utils/map.utils.ts b/nr-app/src/utils/map.utils.ts
@@ -4,30 +4,6 @@ import {
 } from "@/constants";
 import OpenLocationCode from "open-location-code-typescript";
 
-export type MapLayer = {
-  rootUrl: string;
-  kind: 30399 | 30398;
-  pubKey: string;
-};
-export type MAP_LAYER_KEY = "hitchmap" | "timesafari" | "triphopping";
-export const MAP_LAYERS: { [key in MAP_LAYER_KEY]: MapLayer } = {
-  hitchmap: {
-    rootUrl: "https://www.hitchmap.com",
-    kind: 30399,
-    pubKey: "abcd",
-  },
-  timesafari: {
-    rootUrl: "https://www.timesafari.app",
-    kind: 30399,
-    pubKey: "abc",
-  },
-  triphopping: {
-    rootUrl: "https://www.triphopping.com",
-    kind: 30398,
-    pubKey: "abc",
-  },
-} as const;
-
 type PlusCodeShortLength = 2 | 4 | 6 | 8;
 
 const plusCodeCharacters = "23456789CFGHJMPQRVWX" as const;