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>
61 lines
1.8 KiB
TypeScript
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>
|
|
);
|
|
}
|