diff --git a/src/app/projects/map/page.js b/src/app/projects/map/page.js index 4fc5a46..bb5f0ed 100644 --- a/src/app/projects/map/page.js +++ b/src/app/projects/map/page.js @@ -94,22 +94,8 @@ function ProjectsMapPageContent() { setMeasurementLine(null); }; - // Wrapper component for the map with proper loading state - const MapWrapper = React.useMemo(() => { - return function MapWrapperComponent(props) { - return ( - }> - - - ); - }; - }, [t, isMeasuring, measurementPoints, addMeasurementPoint]); - const statusConfig = { + // Status configuration with colors and labels - memoized + const statusConfig = React.useMemo(() => ({ registered: { color: "#6B7280", label: formatProjectStatus("registered"), @@ -135,7 +121,7 @@ function ProjectsMapPageContent() { label: formatProjectStatus("cancelled"), shortLabel: "Wycofany", }, - }; + }), []); // Toggle all status filters const toggleAllFilters = () => { @@ -160,12 +146,12 @@ function ProjectsMapPageContent() { })); }; - // Layer control functions - const handleBaseLayerChange = (layerName) => { + // Layer control functions - memoized to prevent re-renders + const handleBaseLayerChange = React.useCallback((layerName) => { setActiveBaseLayer(layerName); - }; + }, []); - const toggleOverlay = (layerName) => { + const toggleOverlay = React.useCallback((layerName) => { setActiveOverlays((prev) => { if (prev.includes(layerName)) { return prev.filter((name) => name !== layerName); @@ -173,14 +159,14 @@ function ProjectsMapPageContent() { return [...prev, layerName]; } }); - }; + }, []); - const toggleLayerPanel = () => { + const toggleLayerPanel = React.useCallback(() => { setShowLayerPanel(!showLayerPanel); - }; + }, [showLayerPanel]); // Update URL with current map state (debounced to avoid too many updates) - const updateURL = (center, zoom) => { + const updateURL = React.useCallback((center, zoom) => { const params = new URLSearchParams(); params.set("lat", center[0].toFixed(6)); params.set("lng", center[1].toFixed(6)); @@ -188,10 +174,10 @@ function ProjectsMapPageContent() { // Use replace to avoid cluttering browser history router.replace(`/projects/map?${params.toString()}`, { scroll: false }); - }; + }, [router]); - // Handle map view changes with debouncing - const handleMapViewChange = (center, zoom) => { + // Handle map view changes with debouncing - memoized + const handleMapViewChange = React.useCallback((center, zoom) => { setMapCenter(center); setMapZoom(zoom); @@ -200,7 +186,7 @@ function ProjectsMapPageContent() { window.mapUpdateTimeout = setTimeout(() => { updateURL(center, zoom); }, 500); // Wait 500ms after the last move to update URL - }; + }, [updateURL]); // Hide navigation and ensure full-screen layout useEffect(() => { @@ -298,38 +284,39 @@ function ProjectsMapPageContent() { } }, [currentTool, isMeasuring]); - // Convert projects to map markers with filtering - const markers = projects - .filter((project) => project.coordinates) - .filter((project) => statusFilters[project.project_status] !== false) - .map((project) => { - const [lat, lng] = project.coordinates - .split(",") - .map((coord) => parseFloat(coord.trim())); - if (isNaN(lat) || isNaN(lng)) { - return null; - } + // Convert projects to map markers with filtering - memoized to prevent re-renders + const markers = React.useMemo(() => { + return projects + .filter((project) => project.coordinates) + .filter((project) => statusFilters[project.project_status] !== false) + .map((project) => { + const [lat, lng] = project.coordinates + .split(",") + .map((coord) => parseFloat(coord.trim())); + if (isNaN(lat) || isNaN(lng)) { + return null; + } - const statusInfo = - statusConfig[project.project_status] || statusConfig.registered; + const statusInfo = + statusConfig[project.project_status] || statusConfig.registered; - return { - position: [lat, lng], - color: statusInfo.color, - popup: ( -
-
-

- {project.project_name} -

- {project.project_number && ( -
- {project.project_number} -
- )} -
+ return { + position: [lat, lng], + color: statusInfo.color, + popup: ( +
+
+

+ {project.project_name} +

+ {project.project_number && ( +
+ {project.project_number} +
+ )} +
-
+
{project.address && (
marker !== null); + }, [projects, statusFilters, statusConfig, t]); if (loading) { return ( @@ -980,7 +968,7 @@ function ProjectsMapPageContent() {
) : (
-