feat: placeId in URL to share easily / location / offsites (#14080)

veryayskiy · web-flow · commit 7d4d22f7fbb0 · 2025-12-12T17:22:24.000+01:00
* feat: placeId in URL to share easily

* hide offsites for now

* try to get user location based on ip

* make them session based
diff --git a/src/components/HogMap/EventsMap.tsx b/src/components/HogMap/EventsMap.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react'
 import { useEventsMapData } from './EventsLayer'
+import { useUserLocation } from '../../hooks/useUserLocation'
 import 'mapbox-gl/dist/mapbox-gl.css'
 type EventItem = {
     id: number
@@ -63,6 +64,8 @@ export default function EventsMap({
     selectedEventId?: number | null
 }): JSX.Element {
     const [isClient, setIsClient] = useState(false)
+    const { location: userLocation, isLoading: isLocationLoading } = useUserLocation()
+
     useEffect(() => {
         setIsClient(true)
     }, [])
@@ -144,6 +147,10 @@ export default function EventsMap({
             console.error('Not client')
             return
         }
+        if (isLocationLoading) {
+            // Wait for location to load before initializing map
+            return
+        }
         const mapboxgl = getMapbox()
         if (!mapboxgl) {
             console.error('No mapboxgl')
@@ -356,7 +363,7 @@ export default function EventsMap({
         mapRef.current = new mapboxgl.Map({
             container: mapContainerRef.current as HTMLDivElement,
             style: styleUrl,
-            center: [-0.1276, 51.5074], // London
+            center: [userLocation.longitude, userLocation.latitude],
             zoom: 4,
             attributionControl: true,
         })
@@ -401,7 +408,7 @@ export default function EventsMap({
                 mapRef.current = null
             }
         }
-    }, [isClient, token, styleUrl])
+    }, [isClient, token, styleUrl, isLocationLoading, userLocation])
 
     useEffect(() => {
         return setupMap()
@@ -506,7 +513,12 @@ export default function EventsMap({
     }, [handleExternalSelection])
 
     return (
-        <div className="box-border w-full h-full rounded border border-primary overflow-hidden">
+        <div className="box-border w-full h-full rounded border border-primary overflow-hidden relative">
+            {isLocationLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-primary/50 z-20">
+                    <div className="text-primary text-sm">Loading map...</div>
+                </div>
+            )}
             <div ref={mapContainerRef} className="w-full h-full" />
         </div>
     )
diff --git a/src/components/HogMap/PeopleMap.tsx b/src/components/HogMap/PeopleMap.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react'
 import { navigate } from 'gatsby'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import { useUserLocation } from '../../hooks/useUserLocation'
 import {
     computeOffsets,
     getMapbox,
@@ -127,6 +128,8 @@ const useCoordsByQuery = (isClient: boolean, token: string | undefined, members:
 
 export default function PeopleMap({ members: membersProp }: { members?: any[] }): JSX.Element {
     const [isClient, setIsClient] = useState(false)
+    const { location: userLocation, isLoading: isLocationLoading } = useUserLocation()
+
     useEffect(() => {
         setIsClient(true)
     }, [])
@@ -200,6 +203,10 @@ export default function PeopleMap({ members: membersProp }: { members?: any[] })
             console.error('Not client')
             return
         }
+        if (isLocationLoading) {
+            // Wait for location to load before initializing map
+            return
+        }
         const mapboxgl = getMapbox()
         if (!mapboxgl) {
             console.error('No mapboxgl')
@@ -338,7 +345,7 @@ export default function PeopleMap({ members: membersProp }: { members?: any[] })
         mapRef.current = new mapboxgl.Map({
             container: mapContainerRef.current as HTMLDivElement,
             style: styleUrl,
-            center: [-0.1276, 51.5074], // London
+            center: [userLocation.longitude, userLocation.latitude],
             zoom: 4,
             attributionControl: true,
         })
@@ -383,7 +390,7 @@ export default function PeopleMap({ members: membersProp }: { members?: any[] })
                 mapRef.current = null
             }
         }
-    }, [isClient, token, styleUrl])
+    }, [isClient, token, styleUrl, isLocationLoading, userLocation])
 
     useEffect(() => {
         return setupMap()
@@ -400,7 +407,12 @@ export default function PeopleMap({ members: membersProp }: { members?: any[] })
     }, [coordsByQuery, members])
 
     return (
-        <div className="box-border w-full h-full rounded border border-primary overflow-hidden">
+        <div className="box-border w-full h-full rounded border border-primary overflow-hidden relative">
+            {isLocationLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-primary/50 z-20">
+                    <div className="text-primary text-sm">Loading map...</div>
+                </div>
+            )}
             <div ref={mapContainerRef} className="w-full h-full" />
         </div>
     )
diff --git a/src/components/HogMap/PlacesMap.tsx b/src/components/HogMap/PlacesMap.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState, useCallback } from 'react'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import { PlaceType, PlaceItem } from './types'
 import { useUser } from '../../hooks/useUser'
+import { useUserLocation } from '../../hooks/useUserLocation'
 import SearchBar, { createSearchMarker } from './SearchBar'
 import { usePlacesMapData, Coordinates } from './PlacesLayer'
 import { renderToString } from 'react-dom/server'
@@ -59,6 +60,7 @@ export default function PlacesMap({
 }): JSX.Element {
     const [isClient, setIsClient] = useState(false)
     const { isModerator, getJwt } = useUser()
+    const { location: userLocation, isLoading: isLocationLoading } = useUserLocation()
 
     useEffect(() => {
         setIsClient(true)
@@ -147,6 +149,10 @@ export default function PlacesMap({
             console.error('Not client')
             return
         }
+        if (isLocationLoading) {
+            // Wait for location to load before initializing map
+            return
+        }
         const mapboxgl = getMapbox()
         if (!mapboxgl) {
             console.error('No mapboxgl')
@@ -260,7 +266,7 @@ export default function PlacesMap({
         mapRef.current = new mapboxgl.Map({
             container: mapContainerRef.current as HTMLDivElement,
             style: styleUrl,
-            center: [-0.1276, 51.5074], // London
+            center: [userLocation.longitude, userLocation.latitude],
             zoom: 4,
             attributionControl: true,
         })
@@ -307,7 +313,7 @@ export default function PlacesMap({
                 mapRef.current = null
             }
         }
-    }, [isClient, token, styleUrl])
+    }, [isClient, token, styleUrl, isLocationLoading, userLocation])
 
     useEffect(() => {
         return setupMap()
@@ -428,6 +434,11 @@ export default function PlacesMap({
 
     return (
         <div className="box-border w-full h-full overflow-hidden relative">
+            {isLocationLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-primary/50 z-20">
+                    <div className="text-primary text-sm">Loading map...</div>
+                </div>
+            )}
             <div ref={mapContainerRef} className="w-full h-full" />
             {isModerator && (
                 <div className="absolute top-4 left-4 z-10">
diff --git a/src/components/HogMap/types.ts b/src/components/HogMap/types.ts
@@ -4,7 +4,7 @@ export enum PlaceType {
     HOTEL = 'Hotel',
     AIRBNB = 'Airbnb',
     CO_WORKING = 'Co-working',
-    OFFSITE = 'Offsite',
+    //OFFSITE = 'Offsite',
 }
 export interface PlaceItem {
     id: number
diff --git a/src/hooks/useUserLocation.ts b/src/hooks/useUserLocation.ts
@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react'
+
+interface UserLocation {
+    latitude: number
+    longitude: number
+    country?: string
+    city?: string
+}
+
+const DEFAULT_LOCATION: UserLocation = {
+    latitude: 51.5074,
+    longitude: -0.1276,
+    country: 'GB',
+    city: 'London',
+}
+
+// Module-level cache (in-memory only, not persisted to storage)
+let cachedLocation: UserLocation | null = null
+let fetchPromise: Promise<UserLocation> | null = null
+
+/**
+ * Hook to get the user's approximate location based on their IP address.
+ * Caches the result in memory for the browser session (no persistent storage).
+ * Falls back to London if geolocation fails or is unavailable.
+ */
+export function useUserLocation(): { location: UserLocation; isLoading: boolean } {
+    const [location, setLocation] = useState<UserLocation>(cachedLocation || DEFAULT_LOCATION)
+    const [isLoading, setIsLoading] = useState<boolean>(!cachedLocation)
+
+    useEffect(() => {
+        // Only run on client side
+        if (typeof window === 'undefined') return
+
+        // If we already have a cached location, use it
+        if (cachedLocation) {
+            setLocation(cachedLocation)
+            setIsLoading(false)
+            return
+        }
+
+        // If a fetch is already in progress, wait for it
+        if (fetchPromise) {
+            fetchPromise.then((loc) => {
+                setLocation(loc)
+                setIsLoading(false)
+            })
+            return
+        }
+
+        // Start a new fetch
+        fetchPromise = fetch('https://ipapi.co/json/')
+            .then((response) => response.json())
+            .then((data) => {
+                if (data.latitude && data.longitude) {
+                    const userLocation: UserLocation = {
+                        latitude: data.latitude,
+                        longitude: data.longitude,
+                        country: data.country_code,
+                        city: data.city,
+                    }
+                    cachedLocation = userLocation
+                    return userLocation
+                }
+                cachedLocation = DEFAULT_LOCATION
+                return DEFAULT_LOCATION
+            })
+            .catch((error) => {
+                console.log('Could not determine user location, using default:', error)
+                cachedLocation = DEFAULT_LOCATION
+                return DEFAULT_LOCATION
+            })
+
+        fetchPromise.then((loc) => {
+            setLocation(loc)
+            setIsLoading(false)
+        })
+    }, [])
+
+    return { location, isLoading }
+}
diff --git a/src/pages/places/index.tsx b/src/pages/places/index.tsx
@@ -15,6 +15,7 @@ function Places(): JSX.Element {
     const [selectedLayers, setSelectedLayers] = useState<string[]>(Object.values(PlaceType))
     const [places, setPlaces] = useState<PlaceItem[]>([])
     const [selectedPlace, setSelectedPlace] = useState<PlaceItem | null>(null)
+    const [isInitialized, setIsInitialized] = useState(false)
     const placesRef = useRef<PlaceItem[]>([])
 
     // Receive places data from PlacesMap component
@@ -32,7 +33,7 @@ function Places(): JSX.Element {
                 setTimeout(() => {
                     const place = placesRef.current.find((p) => p.id === placeId)
                     if (place) {
-                        setSelectedPlace(place)
+                        handlePlaceSelect(place)
                     }
                 }, 500)
             }
@@ -42,14 +43,64 @@ function Places(): JSX.Element {
         return () => window.removeEventListener('hogmap:places-updated', handlePlaceAdded as EventListener)
     }, [])
 
-    // Show place detail overlay when a marker is clicked
-    const handlePlaceClick = useCallback((placeId: number) => {
-        const place = placesRef.current.find((p) => p.id === placeId)
-        if (place) {
-            setSelectedPlace(place)
+    // Select a place and update URL hash
+    const handlePlaceSelect = useCallback((place: PlaceItem, updateHash = true) => {
+        setSelectedPlace(place)
+
+        if (updateHash) {
+            window.history.replaceState(null, '', `#placeId=${place.id}`)
         }
     }, [])
 
+    // Show place detail overlay when a marker is clicked
+    const handlePlaceClick = useCallback(
+        (placeId: number) => {
+            const place = placesRef.current.find((p) => p.id === placeId)
+            if (place) {
+                handlePlaceSelect(place)
+            }
+        },
+        [handlePlaceSelect]
+    )
+
+    // Close place detail and clear URL hash
+    const handleClosePlace = useCallback(() => {
+        setSelectedPlace(null)
+        window.history.replaceState(null, '', window.location.pathname)
+    }, [])
+
+    // Initialize from URL hash on page load
+    useEffect(() => {
+        if (!isInitialized && places.length > 0) {
+            const hash = window.location.hash
+            const match = hash.match(/#placeId=(\d+)/)
+
+            if (match) {
+                const placeId = parseInt(match[1], 10)
+                const place = places.find((p) => p.id === placeId)
+
+                if (place) {
+                    // Select place without updating hash (since we're reading from it)
+                    handlePlaceSelect(place, false)
+                }
+            }
+
+            setIsInitialized(true)
+        }
+    }, [places, isInitialized, handlePlaceSelect])
+
+    // Handle ESC key to close detail panel
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && selectedPlace) {
+                handleClosePlace()
+            }
+        }
+
+        window.addEventListener('keydown', handleKeyDown)
+        return () => window.removeEventListener('keydown', handleKeyDown)
+    }, [selectedPlace, handleClosePlace])
+
     // Count places by type
     const placesByType = places.reduce((acc, place) => {
         const type = place.type || PlaceType.COFFEE
@@ -156,9 +207,7 @@ function Places(): JSX.Element {
 
                     <div className="flex-1 relative h-full border-primary border-t @xl:border-t-0">
                         <AnimatePresence>
-                            {selectedPlace && (
-                                <PlaceDetail place={selectedPlace} onClose={() => setSelectedPlace(null)} />
-                            )}
+                            {selectedPlace && <PlaceDetail place={selectedPlace} onClose={handleClosePlace} />}
                         </AnimatePresence>
 
                         <PlacesMap

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ export enum PlaceType {`
`4`	`4`	`HOTEL = 'Hotel',`
`5`	`5`	`AIRBNB = 'Airbnb',`
`6`	`6`	`CO_WORKING = 'Co-working',`
`7`		`- OFFSITE = 'Offsite',`
	`7`	`+ //OFFSITE = 'Offsite',`
`8`	`8`	`}`
`9`	`9`	`export interface PlaceItem {`
`10`	`10`	`id: number`