trails/apps/planner/app/routes/session.$id.tsx
Ullrich Schäfer 40e541fcce Implement Planner-Journal handoff (Group 9)
JWT-based handoff between Journal and Planner:

Journal side:
- JWT token generation scoped to route_id with 7-day expiry (jose)
- "Edit in Planner" button on route detail page — generates JWT,
  redirects to Planner /new with callback URL, token, and GPX
- Callback endpoint (POST /api/routes/:id/callback) validates JWT
  and creates new route version from received GPX

Planner side:
- /new route accepts callback, token, returnUrl, gpx params
- Creates session with callback metadata, initializes with GPX
- "Save to Journal" button POSTs GPX with Bearer token to callback
- "Return to Journal" link shown after successful save

All 6 Group 9 tasks complete.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 20:22:58 +00:00

61 lines
1.8 KiB
TypeScript

import { useParams, useSearchParams } from "react-router";
import type { Route } from "./+types/session.$id";
import { getSession } from "~/lib/sessions";
import { data } from "react-router";
import { ClientOnly } from "~/components/ClientOnly";
import { lazy, Suspense } from "react";
const SessionView = lazy(() =>
import("~/components/SessionView").then((m) => ({ default: m.SessionView })),
);
export function meta(_args: Route.MetaArgs) {
return [{ title: "trails.cool Planner — Session" }];
}
export async function loader({ params }: Route.LoaderArgs) {
const session = await getSession(params.id);
if (!session) {
throw data({ error: "Session not found" }, { status: 404 });
}
return data({
sessionId: session.id,
callbackUrl: session.callbackUrl ?? null,
callbackToken: session.callbackToken ?? null,
});
}
export default function SessionPage({ loaderData }: Route.ComponentProps) {
const { id } = useParams();
const [searchParams] = useSearchParams();
const returnUrl = searchParams.get("returnUrl") ?? undefined;
return (
<div className="flex h-full flex-col">
<ClientOnly
fallback={
<div className="flex h-full items-center justify-center">
<p className="text-gray-500">Loading planner...</p>
</div>
}
>
{() => (
<Suspense
fallback={
<div className="flex h-full items-center justify-center">
<p className="text-gray-500">Loading planner...</p>
</div>
}
>
<SessionView
sessionId={id!}
callbackUrl={loaderData.callbackUrl ?? undefined}
callbackToken={loaderData.callbackToken ?? undefined}
returnUrl={returnUrl}
/>
</Suspense>
)}
</ClientOnly>
</div>
);
}