fix: add real-time lat/lon validation to prevent map crash (#808) (#822)

Co-authored-by: wilhel1812 <wilhelm@linksim.link>

Author: wilhel1812

src/components/map/MapEditorPanel.test.tsx

@@ -258,7 +258,6 @@ describe("MapEditorPanel", () => {
     const latInput = await screen.findByLabelText("Latitude");
     await userEvent.clear(latInput);
     await userEvent.type(latInput, "956894");
-    await userEvent.click(screen.getByRole("button", { name: "Create Site" }));
 
     expect(screen.getByText(/Latitude must be between -90 and 90/)).toBeInTheDocument();
     expect(useAppStore.getState().mapEditor).not.toBeNull();
@@ -282,7 +281,6 @@ describe("MapEditorPanel", () => {
     const lonInput = await screen.findByLabelText("Longitude");
     await userEvent.clear(lonInput);
     await userEvent.type(lonInput, "956894");
-    await userEvent.click(screen.getByRole("button", { name: "Create Site" }));
 
     expect(screen.getByText(/Longitude must be between -180 and 180/)).toBeInTheDocument();
     expect(useAppStore.getState().mapEditor).not.toBeNull();
@@ -306,7 +304,6 @@ describe("MapEditorPanel", () => {
     const latInput = await screen.findByLabelText("Latitude");
     await userEvent.clear(latInput);
     await userEvent.type(latInput, "    956894");
-    await userEvent.click(screen.getByRole("button", { name: "Create Site" }));
 
     expect(screen.getByText(/Latitude must be between -90 and 90/)).toBeInTheDocument();
     expect(useAppStore.getState().mapEditor).not.toBeNull();

src/components/map/MapEditorPanel.tsx

@@ -249,21 +249,25 @@ function SiteEditorCard({
         <label className="field-grid">
           <span>Latitude</span>
           <input
+            aria-invalid={form.latError ? true : undefined}
             onChange={(e) => form.setLatDraft(e.target.value)}
             step="0.000001"
             type="number"
             value={form.latDraft}
           />
+          {form.latError ? <p className="field-help warning-text">{form.latError}</p> : null}
         </label>
 
         <label className="field-grid">
           <span>Longitude</span>
           <input
+            aria-invalid={form.lonError ? true : undefined}
             onChange={(e) => form.setLonDraft(e.target.value)}
             step="0.000001"
             type="number"
             value={form.lonDraft}
           />
+          {form.lonError ? <p className="field-help warning-text">{form.lonError}</p> : null}
         </label>
 
         <label className="field-grid">

src/components/map/useMapEditorFormState.ts

@@ -741,11 +741,19 @@ export function useMapEditorFormState() {
     }
   };
 
+  const [latError, setLatError] = useState<string | null>(null);
+  const [lonError, setLonError] = useState<string | null>(null);
+
   const setSitePositionDraft = (nextLat: number | string, nextLon: number | string, nextGround = groundDraft) => {
     const lat = parseNumber(String(nextLat));
     const lon = parseNumber(String(nextLon));
     setLatDraft(lat);
     setLonDraft(lon);
+    const latErr = validateLatitude(lat);
+    const lonErr = validateLongitude(lon);
+    setLatError(latErr);
+    setLonError(lonErr);
+    if (latErr || lonErr) return;
     setMapEditorSiteDraft({ lat, lon, groundElevationM: nextGround });
   };
 
@@ -785,8 +793,12 @@ export function useMapEditorFormState() {
     canWrite,
     currentUser,
     // site
-    latDraft, setLatDraft: (v: number | string) => setSitePositionDraft(v, lonDraft),
-    lonDraft, setLonDraft: (v: number | string) => setSitePositionDraft(latDraft, v),
+    latDraft,
+    lonDraft,
+    latError,
+    lonError,
+    setLatDraft: (v: number | string) => setSitePositionDraft(v, lonDraft),
+    setLonDraft: (v: number | string) => setSitePositionDraft(latDraft, v),
     groundDraft, setGroundDraft: (v: number | string) => {
       const nextGround = parseNumber(String(v));
       setGroundDraft(nextGround);