refactor: useMapStore

src/components/Container.jsx

@@ -4,6 +4,7 @@ import { MapContainer } from 'react-leaflet'
 
 import { useMemory } from '@hooks/useMemory'
 import { useStorage } from '@hooks/useStorage'
+import { useMapStore } from '@hooks/useMapStore'
 import Utility from '@services/Utility'
 
 import Map from './Map'
@@ -19,7 +20,7 @@ import {
 } from './Layers'
 import { Effects } from './Effects'
 
-/** @param {{ target: import('leaflet').Map, type: string }} */
+/** @param {{ target: import('leaflet').Map, type: string }} args */
 function setLocationZoom({ target: map }) {
   const { lat, lng } = map.getCenter()
   const zoom = map.getZoom()
@@ -42,18 +43,15 @@ export default function Container() {
     <MapContainer
       tap={false}
       center={location}
-      ref={(ref) =>
-        useMemory.setState((prev) => {
-          if (ref) {
-            ref.attributionControl.setPrefix(
-              prev.config.general.attributionPrefix || '',
-            )
-            ref.on('moveend', setLocationZoom)
-            ref.on('zoomend', setLocationZoom)
-          }
-          return { map: ref }
-        })
-      }
+      ref={(ref) => {
+        if (ref) {
+          const { attributionPrefix } = useMemory.getState().config.general
+          ref.attributionControl.setPrefix(attributionPrefix || '')
+          ref.on('moveend', setLocationZoom)
+          ref.on('zoomend', setLocationZoom)
+          useMapStore.setState({ map: ref })
+        }
+      }}
       zoom={zoom}
       zoomControl={false}
       maxBounds={MAX_BOUNDS}

src/components/Map.jsx

@@ -3,17 +3,20 @@ import * as React from 'react'
 
 import { useMemory } from '@hooks/useMemory'
 import { useStorage } from '@hooks/useStorage'
+import { useMapStore } from '@hooks/useMapStore'
 import Utility from '@services/Utility'
+
 import FilterPermCheck from './QueryData'
 
 export default function Map() {
   Utility.analytics(window.location.pathname)
 
-  const ready = useMemory((s) => !!s.map && !!s.Icons)
+  const iconsReady = useMemory((s) => !!s.Icons)
+  const mapReady = useMapStore((s) => !!s.map)
   const ui = useMemory((s) => s.ui)
   const profiling = useStorage((s) => s.profiling)
 
-  if (!ready) return null
+  if (!iconsReady || !mapReady) return null
   return (
     <>
       {Object.keys({ ...ui, ...ui.wayfarer, ...ui.admin }).map((category) => {

src/hooks/useMapStore.js

@@ -0,0 +1,7 @@
+import { create } from 'zustand'
+
+/**
+ * @typedef {{ map: import('leaflet').Map | null }} UseMapStore
+ * @type {import("zustand").UseBoundStore<import("zustand").StoreApi<UseMapStore>>}
+ */
+export const useMapStore = create(() => ({ map: null }))

src/hooks/useMemory.js

@@ -37,7 +37,6 @@ import { create } from 'zustand'
  *   settings: Record<string, any>
  *   userSettings: Record<string, any>
  *   clientError: string,
- *   map: import('leaflet').Map | null,
  *   timeOfDay: import('@rm/types').TimesOfDay,
  *   hideList: Set<string | number>,
  *   excludeList: string[],
@@ -73,7 +72,6 @@ export const useMemory = create((set) => ({
   reset: false,
   tileStyle: 'light',
   clientError: '',
-  map: null,
   theme: {
     primary: '#ff5722',
     secondary: '#00b0ff',

src/services/desktopNotification.js

@@ -4,6 +4,7 @@ import { t } from 'i18next'
 import { useMemory } from '@hooks/useMemory'
 import { useStorage } from '@hooks/useStorage'
 import SimpleTTLCache from '@services/ttlcache'
+import { useMapStore } from '@hooks/useMapStore'
 
 export const HAS_API = 'Notification' in window
 const cache = new SimpleTTLCache(1000 * 60 * 60)
@@ -63,7 +64,7 @@ export function sendNotification(key, title, category, options) {
           window.focus()
         }
         if (lat && lon) {
-          const { map } = useMemory.getState()
+          const { map } = useMapStore.getState()
           useMemory.setState({ manualParams: { category, id: key } })
           map.flyTo([lat, lon], 16)
         }

src/services/functions/getQueryArgs.js

@@ -1,7 +1,7 @@
-import { useMemory } from '@hooks/useMemory'
+import { useMapStore } from '@hooks/useMapStore'
 
 export function getQueryArgs() {
-  const { map } = useMemory.getState()
+  const { map } = useMapStore.getState()
   if (!map)
     return {
       zoom: 0,