fix location access issue (#49)

* change visibility trackign

* rename getConfig -> getConfigStore

* remove comment code

Author: johngarrett

src/config/config-store.ts

@@ -59,7 +59,7 @@ export const initConfig = (
     });
 };
 
-export const getConfig = () => {
+export const getConfigStore = () => {
     if (!configStore) {
         throw Error("missing config store");
     }

src/config/default-config.ts

@@ -8,4 +8,5 @@ export const defaultConfig = {
         [34.18152307750378, -116.41490672855878], // south-west
         [34.18253355653219, -116.41373685883292], // north-east
     ),
+    hasGrantedLocationAccess: false,
 } as const satisfies Config;

src/config/types.ts

@@ -13,7 +13,8 @@ export type FeatureKey = keyof FeaturesConfig;
 export type Config = {
     features: Record<FeatureKey, FeatureConfig>;
     bounds?: L.LatLngBounds;
-} & Record<Exclude<string, "features" | "bounds">, unknown>;
+    hasGrantedLocationAccess: boolean;
+};
 
 export type FeatureUpdateEvent = {
     key: "features";
@@ -28,4 +29,12 @@ export type BoundsUpdateEvent = {
     value: L.LatLngBounds;
 };
 
-export type ConfigEvent = FeatureUpdateEvent | BoundsUpdateEvent;
+export type LocationPermissionUpdateEvent = {
+    key: "hasGrantedLocationAccess";
+    value: boolean;
+};
+
+export type ConfigEvent =
+    | FeatureUpdateEvent
+    | BoundsUpdateEvent
+    | LocationPermissionUpdateEvent;

src/console/console-tracker.ts

@@ -1,15 +1,13 @@
-import { getConfig } from "../config";
+import { getConfigStore } from "../config";
 import { getElementOrThrow, logger, type LogLevel } from "../utils";
 
 export class ConsoleTracker {
     constructor() {
-        const configStore = getConfig();
+        const configStore = getConfigStore();
         this.consoleElement = getElementOrThrow({ id: "console" });
         this.unsubscribeFn = undefined;
 
-        this.handleVisibilityChange(
-            configStore.getFeature("console").value,
-        );
+        this.handleVisibilityChange(configStore.getFeature("console").value);
 
         configStore.addListener((event) => {
             if (event.key !== "features") {

src/location/location-tracker.ts

@@ -1,25 +1,20 @@
 import { debug, info } from "../utils";
 import type { LocationPoint } from "./types";
 import { Observable } from "../observable";
-import { getConfig } from "../config";
+import { getConfigStore } from "../config";
 
 export class LocationTracker extends Observable<LocationPoint> {
-    /**
-     * Initialize position tracker and EventListener
-     */
     constructor() {
-        // TODO: move this out
         super();
-
-        document.addEventListener(
-            "visibilitychange",
-            this.handleVisibilityChange,
-        );
-
-        // Initialize map elements
-        // TODO: map elements in this class feels like tight coupling
+        getConfigStore().addListener(({ key, value }) => {
+            if (key === "hasGrantedLocationAccess") {
+                if (value === true) {
+                    debug("[LocationTracker] hasGrantedLocationAccess changed");
+                    this.start();
+                }
+            }
+        });
     }
-
     /**
      * start tracking via navigator.geolocation
      */
@@ -56,19 +51,20 @@ export class LocationTracker extends Observable<LocationPoint> {
         }
     };
 
-    private handleVisibilityChange = () => {
+    public handleVisibilityChange = () => {
         debug("[LocationTracker] handleVisibilityChange");
         if (document.hidden) {
             this.stop();
         } else {
-            // TODO: only if the user has hit the locate button
-            this.start();
+            if (getConfigStore().config.hasGrantedLocationAccess) {
+                this.start();
+            }
         }
     };
 
-    private handlePosition = (position: GeolocationPosition) => {
+    public handlePosition = (position: GeolocationPosition) => {
         const { latitude, longitude, accuracy } = position.coords;
-        const bounds = getConfig().getBounds();
+        const bounds = getConfigStore().getBounds();
         if (bounds && !bounds.contains([latitude, longitude])) {
             info(
                 "[LocationTracker] location outside bounds, stopping tracking",

src/main.ts

@@ -10,7 +10,7 @@ import {
 import { SettingsMenu } from "./settings";
 import { LocationStore, LocationTracker, OrientationTracker } from "./location";
 import { ConsoleTracker } from "./console";
-import { getConfig, initConfig } from "./config";
+import { getConfigStore, initConfig } from "./config";
 
 import "./styles.css"; // TODO: remove tailwind and import normally
 
@@ -25,7 +25,7 @@ import { LocationController } from "./location/location-controller";
 import { MapMovementController } from "./map/map-movement-controller";
 
 initConfig();
-const configStore = getConfig();
+const configStore = getConfigStore();
 
 new ConsoleTracker();
 new SettingsMenu();
@@ -119,6 +119,8 @@ document.addEventListener("visibilitychange", () => {
     debug("[main] handleVisibilityChange");
     // save location when the user minimizes
     locationStore.saveToStorage();
+
+    locationTracker.handleVisibilityChange();
 });
 
 window.addEventListener("beforeunload", () => {

src/points/POI-bounds-controller.ts

@@ -1,4 +1,4 @@
-import { getConfig } from "../config";
+import { getConfigStore } from "../config";
 import type { POI } from "../types";
 import { debug } from "../utils";
 import L from "leaflet";
@@ -17,7 +17,7 @@ const poiToBoundsLayer = (poi: POI) =>
 
 export class POIBoundsController {
     constructor({ POIs }: POIBoundsControllerParams) {
-        const configStore = getConfig();
+        const configStore = getConfigStore();
 
         configStore.addListener((event) => {
             if (event.key !== "features") {

src/settings/settings.ts

@@ -1,6 +1,6 @@
 import { LocalStorageProvider } from "../storage";
 import { getElementOrThrow } from "../utils";
-import { getConfig, type FeatureKey } from "../config";
+import { getConfigStore, type FeatureKey } from "../config";
 
 export class SettingsMenu {
     constructor() {
@@ -27,11 +27,10 @@ export class SettingsMenu {
             LocalStorageProvider.clear();
         });
 
-        const configStore = getConfig();
+        const configStore = getConfigStore();
 
         // TODO: remove partial and use .map
-        const checkboxByKey: Partial<Record<FeatureKey, HTMLInputElement>> =
-            {};
+        const checkboxByKey: Partial<Record<FeatureKey, HTMLInputElement>> = {};
 
         Object.entries(configStore.config.features).forEach(
             ([key, feature]) => {