|
|
@@ -4,15 +4,10 @@ import { useEffect, useRef, useState, useCallback } from 'react'
|
|
|
|
|
|
import { createLeafletMapProvider, type MapProvider, type MapBounds } from '@/lib/map'
|
|
|
import { useAuth } from '@/hooks/useAuth'
|
|
|
-import { useWebSocket } from '@/hooks/useWebSocket'
|
|
|
import type { Place } from '@/types'
|
|
|
import { api } from '@/lib/api'
|
|
|
|
|
|
-/**
|
|
|
- * Основной компонент карты. Инициализирует Leaflet, загружает места,
|
|
|
- * отображает маркеры и показывает карточку места при клике.
|
|
|
- * Для неавторизованных пользователей через WebSocket показывает точки других посетителей на карте.
|
|
|
- */
|
|
|
+/** Основной компонент карты. Инициализирует Leaflet, загружает места, отображает маркеры и показывает карточку места при клике. */
|
|
|
export default function MapView() {
|
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
|
const mapRef = useRef<MapProvider | null>(null)
|
|
|
@@ -20,7 +15,6 @@ export default function MapView() {
|
|
|
const [places, setPlaces] = useState<Place[]>([])
|
|
|
const [selectedPlace, setSelectedPlace] = useState<Place | null>(null)
|
|
|
const [mapError, setMapError] = useState(false)
|
|
|
- const [userPos, setUserPos] = useState<{ lat: number; lng: number } | null>(null)
|
|
|
|
|
|
const fetchPlaces = useCallback(async (bounds?: MapBounds) => {
|
|
|
try {
|
|
|
@@ -50,16 +44,6 @@ export default function MapView() {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
- if (navigator.geolocation) {
|
|
|
- navigator.geolocation.getCurrentPosition(
|
|
|
- (pos) => {
|
|
|
- setUserPos({ lat: pos.coords.latitude, lng: pos.coords.longitude })
|
|
|
- provider.setCenter(pos.coords.latitude, pos.coords.longitude)
|
|
|
- },
|
|
|
- () => {},
|
|
|
- )
|
|
|
- }
|
|
|
-
|
|
|
provider.onMove((_center, _zoom, bounds) => {
|
|
|
fetchPlaces(bounds)
|
|
|
})
|
|
|
@@ -76,17 +60,6 @@ export default function MapView() {
|
|
|
}
|
|
|
}, [])
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- const provider = mapRef.current
|
|
|
- if (!userPos || !provider || !provider.isReady()) return
|
|
|
-
|
|
|
- provider.removeMarker('_user_location')
|
|
|
- provider.addMarker('_user_location', userPos.lat, userPos.lng, {
|
|
|
- type: 'location',
|
|
|
- color: user ? '#FF4B4B' : '#FFF82A',
|
|
|
- })
|
|
|
- }, [userPos, user])
|
|
|
-
|
|
|
useEffect(() => {
|
|
|
const provider = mapRef.current
|
|
|
if (!provider || !provider.isReady()) return
|
|
|
@@ -106,22 +79,6 @@ export default function MapView() {
|
|
|
}
|
|
|
}, [places, user])
|
|
|
|
|
|
- const { visitors } = useWebSocket(!user)
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- const provider = mapRef.current
|
|
|
- if (!provider || !provider.isReady()) return
|
|
|
-
|
|
|
- visitors.forEach((v, i) => {
|
|
|
- const type = v.user_id ? 'visitor_registered' : 'visitor'
|
|
|
- provider.addMarker(`ws-visitor-${i}`, v.lat, v.lng, { type, ghost: !user && !v.user_id })
|
|
|
- })
|
|
|
-
|
|
|
- return () => {
|
|
|
- visitors.forEach((_, i) => provider.removeMarker(`ws-visitor-${i}`))
|
|
|
- }
|
|
|
- }, [visitors, user])
|
|
|
-
|
|
|
return (
|
|
|
<div className="relative h-full w-full">
|
|
|
{mapError ? (
|