const React = window.React;
const { useState, useEffect, useRef } = React;
function debounce(func, wait) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => func(...args), wait);
};
}
const DATE_CATEGORIES = window.DATE_CATEGORIES || [
{ value: 'restaurant', label: 'Restaurant' },
{ value: 'bar', label: 'Bar' },
{ value: 'brunch', label: 'Brunch' },
{ value: 'viewpoint', label: 'Viewpoint' },
{ value: 'other', label: 'Other' },
];
const DATE_CATEGORY_STYLES = window.DATE_CATEGORY_STYLES || {
restaurant: 'bg-[#FFDAD4] text-[#410001] border-[#FFB4A9]',
bar: 'bg-[#FFDAD4] text-[#410001] border-[#FFB4A9]',
brunch: 'bg-[#FFDAD4] text-[#410001] border-[#FFB4A9]',
viewpoint: 'bg-[#FFDAD4] text-[#410001] border-[#FFB4A9]',
other: 'bg-[#FFDAD4] text-[#410001] border-[#FFB4A9]',
};
const { Star, Trash, MapPin, LinkIcon } = window;
const FilterBar = window.FilterBar;
const FilterButton = window.FilterButton;
// ============================================================================
// DATES VIEW COMPONENT
// ============================================================================
const getDateCategoryLabel = (value) => {
const found = DATE_CATEGORIES.find(c => c.value === value);
return found ? found.label : 'Other';
};
const DatesLeafletMap = ({ places, focusedId }) => {
const mapRef = useRef(null);
const mapInstanceRef = useRef(null);
const markersLayerRef = useRef(null);
const markersRef = useRef(new Map());
const [mapReady, setMapReady] = useState(false);
const [leafletReady, setLeafletReady] = useState(typeof window.L !== 'undefined');
const [mapError, setMapError] = useState('');
useEffect(() => {
if (leafletReady) return;
let cancelled = false;
const loadLeaflet = window.loadLeafletAssets || (() => Promise.resolve(window.L));
loadLeaflet()
.then((L) => {
if (cancelled) return;
if (L) setLeafletReady(true);
else setMapError('Map unavailable');
})
.catch((error) => {
console.error('Leaflet loading error:', error);
if (!cancelled) setMapError('Map unavailable');
});
return () => { cancelled = true; };
}, [leafletReady]);
useEffect(() => {
if (!mapRef.current || !leafletReady) return;
const L = window.L;
if (!mapInstanceRef.current) {
mapInstanceRef.current = L.map(mapRef.current).setView([38.7223, -9.1393], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mapInstanceRef.current);
markersLayerRef.current = L.layerGroup().addTo(mapInstanceRef.current);
setMapReady(true);
}
return () => {
if (mapInstanceRef.current) {
mapInstanceRef.current.remove();
mapInstanceRef.current = null;
markersLayerRef.current = null;
markersRef.current.clear();
setMapReady(false);
}
};
}, [leafletReady]);
useEffect(() => {
if (!mapInstanceRef.current || !mapReady) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
mapInstanceRef.current.invalidateSize();
observer.disconnect();
}
});
}, { threshold: 0.1 });
observer.observe(mapRef.current);
return () => observer.disconnect();
}, [mapReady]);
useEffect(() => {
if (!mapReady || !mapInstanceRef.current || !markersLayerRef.current) return;
const L = window.L;
const map = mapInstanceRef.current;
const layerGroup = markersLayerRef.current;
layerGroup.clearLayers();
markersRef.current.clear();
const bounds = L.latLngBounds([]);
let hasMarkers = false;
places.forEach(place => {
const lat = Number(place.lat);
const lng = Number(place.lng);
if (Number.isFinite(lat) && Number.isFinite(lng)) {
const latLng = L.latLng(lat, lng);
bounds.extend(latLng);
hasMarkers = true;
const safeName = window.escapeHtml?.(place.name || '') || '';
const safeCategory = window.escapeHtml?.(getDateCategoryLabel(place.category)) || 'Other';
const safeAddress = window.escapeHtml?.(place.address || '') || '';
const safeLink = window.safeExternalUrl?.(place.link) || '';
const popupContent = `
${safeName}
${safeCategory}
${safeAddress ? `
${safeAddress}` : ''}
${safeLink ? `
Open link` : ''}
`;
const marker = L.marker(latLng).bindPopup(popupContent).addTo(layerGroup);
markersRef.current.set(place.id, marker);
}
});
if (hasMarkers) {
map.invalidateSize();
map.fitBounds(bounds, { padding: [30, 30], maxZoom: 15 });
}
}, [places, mapReady]);
useEffect(() => {
if (!mapReady || !mapInstanceRef.current || !focusedId) return;
const marker = markersRef.current.get(focusedId);
if (marker) {
mapInstanceRef.current.setView(marker.getLatLng(), 15);
marker.openPopup();
}
}, [focusedId, mapReady]);
return (
{!mapReady && (
{mapError || 'Loading map...'}
)}
© OpenStreetMap contributors
);
};
const DateCard = ({ place, onDelete, onFocus, onToggleFavourite, isFocused, onUpdateDate }) => {
const photoInputRef = useRef(null);
const categoryStyle = DATE_CATEGORY_STYLES[place.category] || DATE_CATEGORY_STYLES.other;
const safeLink = window.safeExternalUrl?.(place.link) || '';
const safePhoto = window.safeImageUrl?.(place.photo) || '';
const lat = Number(place.lat);
const lng = Number(place.lng);
const hasCoordinates = Number.isFinite(lat) && Number.isFinite(lng);
const mapsLink = hasCoordinates
? `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}&zoom=15`
: place.address
? `https://www.openstreetmap.org/search?query=${encodeURIComponent(place.address)}`
: null;
const handlePhotoUpload = (e) => {
const file = e.target.files?.[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (ev) => {
const img = new Image();
img.onload = () => {
const maxW = 800;
const scale = img.width > maxW ? maxW / img.width : 1;
const canvas = document.createElement('canvas');
canvas.width = Math.round(img.width * scale);
canvas.height = Math.round(img.height * scale);
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
onUpdateDate?.(place.id, { photo: canvas.toDataURL('image/jpeg', 0.75) });
};
img.src = ev.target.result;
};
reader.readAsDataURL(file);
e.target.value = '';
};
const StarRating = () => {
const [hover, setHover] = useState(0);
const rating = place.starRating || 0;
return (
e.stopPropagation()}>
{[1,2,3,4,5].map(n => (
))}
);
};
return (
onFocus(place.id)}
>
{safePhoto ? (
) : (
)}
{place.name}
{getDateCategoryLabel(place.category)}
{place.address &&
{place.address}
}
{place.notes &&
{place.notes}
}
Locations
Restaurants, bars, viewpoints, and places worth saving.
setCategoryFilter('all')} />
{DATE_CATEGORIES.map(c => (
setCategoryFilter(c.value)} />
))}
setOnlyFavourites(v => !v)} />
setOnlyVisited(v => !v)} />
{sorted.length === 0 ? (
places.length === 0 ? (
) : (
)
) : (
{sorted.map(place => (
))}
)}
);
};
Object.assign(window, { DatesView });