3b9672e0ff
The routeData Y.Map's ~15 string keys (geojson, coordinates, segmentBoundaries, road metadata, profile, colorMode, baseLayer, overlays, poiCategories) were read and written raw at ~30 call sites, each with its own JSON parsing and casts; parseJsonArray existed twice and waypoint extraction four times. GPX assembly was duplicated between SaveToJournalButton and ExportButton, so the saved plan and the exported file could silently diverge. - new lib/route-data.ts owns the routeData (+ noGoAreas) schema: typed read/write, JSON encoding internal, ColorMode moves here (re-exported from ColoredRoute for existing importers) - new lib/gpx-export.ts owns GPX assembly: buildRouteGpx / buildPlanGpx / buildDayGpxFiles / hasDayBreaks; multi-day splitting becomes a pure, tested function - waypoint-ymap.ts gains extractWaypoints / extractWaypointData; the four hand-rolled copies (use-routing, use-waypoint-manager, WaypointSidebar, use-days) now share it, and WaypointSidebar's moveWaypoint reuses the round-trip helpers instead of re-listing every waypoint field - all hooks/components consume the seam; no raw routeData key strings remain outside route-data.ts Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { useState, useCallback } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { YjsState } from "~/lib/use-yjs";
|
|
import { buildPlanGpx } from "~/lib/gpx-export";
|
|
|
|
interface SaveToJournalButtonProps {
|
|
yjs: YjsState;
|
|
sessionId: string;
|
|
returnUrl?: string;
|
|
}
|
|
|
|
export function SaveToJournalButton({ yjs, sessionId, returnUrl }: SaveToJournalButtonProps) {
|
|
const { t } = useTranslation("planner");
|
|
const [saving, setSaving] = useState(false);
|
|
const [saved, setSaved] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const handleSave = useCallback(async () => {
|
|
setSaving(true);
|
|
setError(null);
|
|
|
|
try {
|
|
// Full plan GPX (track + waypoints + no-go areas + notes) so the
|
|
// route round-trips correctly through the journal.
|
|
const gpx = buildPlanGpx(yjs);
|
|
|
|
// POST to the planner's server-side proxy. The proxy attaches the
|
|
// journal Bearer token (stored on the session row) and forwards
|
|
// the GPX. Token never leaves the planner server — see
|
|
// routes/api.save-to-journal.ts.
|
|
const response = await fetch("/api/save-to-journal", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ sessionId, gpx }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const result = await response.json();
|
|
throw new Error(result.error ?? "Save failed");
|
|
}
|
|
|
|
setSaved(true);
|
|
} catch (err) {
|
|
setError((err as Error).message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}, [yjs, sessionId]);
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="rounded bg-green-600 px-3 py-1 text-sm text-white hover:bg-green-700 disabled:opacity-50"
|
|
>
|
|
{saving ? t("saving") : t("saveToJournal")}
|
|
</button>
|
|
{saved && <span className="text-xs text-green-600">{t("saved")}</span>}
|
|
{error && <span className="text-xs text-red-600">{error}</span>}
|
|
{saved && returnUrl && (
|
|
<a href={returnUrl} className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-700 hover:bg-gray-200">
|
|
{t("returnToJournal")}
|
|
</a>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|