store map state in the hash [not so good AI]

AI couldn't create useMapHash correctly. I had to do quite a lot of manual editing. Basically, throttling wasn't working.

Author: caspg

package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@vis.gl/react-maplibre": "^1.0.0-alpha.4",
     "autoprefixer": "^10.4.20",
+    "lodash.throttle": "^4.1.1",
     "maplibre-gl": "^4.7.1",
     "postcss": "^8.4.49",
     "react": "^18.3.1",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

package.json

@@ -1,7 +1,14 @@
-import { createContext, ReactNode, useCallback, useContext } from "react";
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+} from "react";
 import { DEFAULT_SOURCE_ID, MAP_SOURCES } from "../constants/mapSources";
 import { useLocalStorage } from "../hooks/useLocalStorage";
 import { AppState, BoxCount, MapSource, MapState } from "../types";
+import { useMapHash } from "../hooks/useMapHash";
 
 function getInitialPanels() {
   // Get available source IDs excluding the default one
@@ -182,6 +189,14 @@ export function AppProvider({ children }: { children: ReactNode }) {
     initialState
   );
 
+  const hashState = useMapHash(state.mapState);
+
+  useEffect(() => {
+    if (hashState) {
+      dispatch({ type: "UPDATE_MAP_STATE", payload: hashState });
+    }
+  }, []);
+
   const dispatch = useCallback(
     (action: Action) => {
       setState((currentState) => appReducer(currentState, action));

src/contexts/AppContext.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import throttle from "lodash.throttle";
+import { MapState } from "../types";
+
+function parseHash(): MapState | null {
+  const hash = window.location.hash.slice(1);
+  const [zoom, lat, lng, bearing = "0", pitch = "0"] = hash.split("/");
+
+  if (!zoom || !lat || !lng) return null;
+
+  return {
+    center: [parseFloat(lng), parseFloat(lat)],
+    zoom: parseFloat(zoom),
+    bearing: parseFloat(bearing),
+    pitch: parseFloat(pitch),
+  };
+}
+
+function formatHash(mapState: MapState): string {
+  const { zoom, center, bearing, pitch } = mapState;
+  return `#${zoom.toFixed(2)}/${center[1].toFixed(4)}/${center[0].toFixed(
+    4
+  )}/${bearing.toFixed(0)}/${pitch.toFixed(0)}`;
+}
+
+export function useMapHash(mapState: MapState): MapState | null {
+  // Store initial hash state
+  const [initialState] = useState(parseHash);
+
+  function onHashChange(newState: MapState) {
+    console.log("throttledUpdateHash");
+    const newHash = formatHash(newState);
+    if (window.location.hash !== newHash) {
+      window.location.hash = newHash;
+    }
+  }
+
+  // Create throttled callback
+  const throttledUpdateHash = useCallback(
+    throttle(onHashChange, 500),
+    [] // Empty deps array as this function doesn't depend on any props/state
+  );
+
+  // Update hash when mapState changes
+  useEffect(() => {
+    throttledUpdateHash(mapState);
+  }, [mapState, throttledUpdateHash]);
+
+  return initialState;
+}