From 5926e2933eed460c90b0c5ce876c69ac69eb4f18 Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Thu, 21 Aug 2025 17:36:40 -0400
Subject: [PATCH] update properties stuff

---
 .../src/components/Properties/PropertyForm.js |  5 ++-
 .../src/pages/Properties/PropertyDetail.js    | 32 +++++++++++++++----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Properties/PropertyForm.js b/frontend/src/components/Properties/PropertyForm.js
index 178901f..ef6f538 100644
--- a/frontend/src/components/Properties/PropertyForm.js
+++ b/frontend/src/components/Properties/PropertyForm.js
@@ -1,8 +1,7 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet';
 import { Icon } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import toast from 'react-hot-toast';
 
 // Fix for default markers in react-leaflet
 delete Icon.Default.prototype._getIconUrl;
@@ -14,7 +13,7 @@ Icon.Default.mergeOptions({
 
 // Component to handle map clicks and update marker position
 function LocationMarker({ position, setPosition }) {
-  const map = useMapEvents({
+  useMapEvents({
     click(e) {
       setPosition([e.latlng.lat, e.latlng.lng]);
     },
diff --git a/frontend/src/pages/Properties/PropertyDetail.js b/frontend/src/pages/Properties/PropertyDetail.js
index 43cac9c..60ef76d 100644
--- a/frontend/src/pages/Properties/PropertyDetail.js
+++ b/frontend/src/pages/Properties/PropertyDetail.js
@@ -92,7 +92,7 @@ const PropertyDetail = () => {
 
   useEffect(() => {
     fetchPropertyDetails();
-  }, [id]);
+  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const fetchPropertyDetails = async () => {
     try {
@@ -180,6 +180,19 @@ const PropertyDetail = () => {
     );
   }
 
+  // Validate coordinates and provide fallbacks
+  const hasValidCoordinates = property && 
+    property.latitude !== undefined && 
+    property.longitude !== undefined && 
+    property.latitude !== null && 
+    property.longitude !== null &&
+    !isNaN(property.latitude) && 
+    !isNaN(property.longitude);
+    
+  const mapCenter = hasValidCoordinates 
+    ? [property.latitude, property.longitude]
+    : [40.7128, -74.0060]; // Default to NYC
+
   return (
     <div className="p-6">
       {/* Header */}
@@ -195,8 +208,11 @@ const PropertyDetail = () => {
             <h1 className="text-2xl font-bold text-gray-900">{property.name}</h1>
             <p className="text-gray-600 flex items-center gap-1">
               <MapPinIcon className="h-4 w-4" />
-              {property.address}
+              {property.address || 'No address specified'}
             </p>
+            {!hasValidCoordinates && (
+              <p className="text-red-600 text-sm">⚠️ Property coordinates not set - using default location</p>
+            )}
           </div>
         </div>
         <button
@@ -214,8 +230,8 @@ const PropertyDetail = () => {
           <div className="card p-0 overflow-hidden">
             <div style={{ height: '600px', width: '100%' }}>
               <MapContainer
-                center={[property.latitude, property.longitude]}
-                zoom={19}
+                center={mapCenter}
+                zoom={hasValidCoordinates ? 19 : 13}
                 style={{ height: '100%', width: '100%' }}
               >
                 <TileLayer
@@ -223,9 +239,11 @@ const PropertyDetail = () => {
                   url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
                 />
                 
-                <Marker position={[property.latitude, property.longitude]}>
-                  <Popup>{property.name}</Popup>
-                </Marker>
+                {hasValidCoordinates && (
+                  <Marker position={mapCenter}>
+                    <Popup>{property.name}</Popup>
+                  </Marker>
+                )}
 
                 {lawnSections.map((section) => (
                   <Polygon