8eba5b2d9e
Follow-up to PR #406 — addresses the two items deferred from the audit: #7 — Centralize auth helpers - New `requireSessionUser(request)` in lib/auth/session.server.ts that returns the user or throws a redirect to /auth/login. - New `requireSessionUserJson(request)` companion that throws a 401 JSON response (for fetcher/JSON endpoints). - Replace the repeated const user = await getSessionUser(request); if (!user) return redirect("/auth/login"); pattern across 18 route loaders/actions. Removes the duplicated guard preamble and gives a single chokepoint to evolve later (e.g., for terms-version gating). #8 — Extract heavy loaders into .server.ts siblings - routes/home.tsx → home.server.ts (DB count query + listActivities + listRecentPublicActivities) - routes/users.$username.tsx → users.$username.server.ts (user lookup + follow state + counts + listPublicRoutes/Activities + persona check) - routes/settings.connections.tsx → settings.connections.server.ts (connected_services join + manifest merge) Each route file shrinks to a thin delegator: `loader` calls `loadXxx(request)`. The component module no longer transitively pulls `getDb` and Drizzle schema into its import graph — Vite's tree-shake already strips server-only code from the client bundle, but the explicit `.server.ts` suffix makes that contract local and auditable. Other 17 routes that mix loader/action with components are left as-is for now: they're each small enough that the split adds churn without buying much clarity. The pattern is documented by the three examples; the rest can convert opportunistically when they grow. Tests: - lib/auth/session.server.test.ts (4 cases — redirect for missing cookie, redirect for ghost userId, success path, JSON 401 variant) Full repo: pnpm typecheck, pnpm lint, pnpm test all green (181 passed | 31 integration-gated skipped). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
|
|
import { data, redirect } from "react-router";
|
|
import type { Route } from "./+types/routes.new";
|
|
import { requireSessionUser } from "~/lib/auth/session.server";
|
|
import { createRoute } from "~/lib/routes.server";
|
|
|
|
export async function loader({ request }: Route.LoaderArgs) {
|
|
await requireSessionUser(request);
|
|
return data({});
|
|
}
|
|
|
|
export async function action({ request }: Route.ActionArgs) {
|
|
const user = await requireSessionUser(request);
|
|
|
|
const formData = await request.formData();
|
|
const name = formData.get("name") as string;
|
|
const description = formData.get("description") as string;
|
|
const gpxFile = formData.get("gpx") as File | null;
|
|
|
|
if (!name) return data({ error: "Name is required" }, { status: 400 });
|
|
|
|
let gpx: string | undefined;
|
|
if (gpxFile && gpxFile.size > 0) {
|
|
gpx = await gpxFile.text();
|
|
}
|
|
|
|
const routeId = await createRoute(user.id, { name, description, gpx });
|
|
return redirect(`/routes/${routeId}`);
|
|
}
|
|
|
|
export function meta(_args: Route.MetaArgs) {
|
|
return [{ title: "New Route — trails.cool" }];
|
|
}
|
|
|
|
export default function NewRoutePage() {
|
|
return (
|
|
<div className="mx-auto max-w-2xl px-4 py-8">
|
|
<h1 className="text-2xl font-bold text-gray-900">New Route</h1>
|
|
|
|
<form method="post" encType="multipart/form-data" className="mt-6 space-y-4">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
|
|
Name
|
|
</label>
|
|
<input
|
|
id="name"
|
|
name="name"
|
|
type="text"
|
|
required
|
|
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
placeholder="Sunday morning ride"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="description" className="block text-sm font-medium text-gray-700">
|
|
Description
|
|
</label>
|
|
<textarea
|
|
id="description"
|
|
name="description"
|
|
rows={3}
|
|
className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="gpx" className="block text-sm font-medium text-gray-700">
|
|
GPX file (optional)
|
|
</label>
|
|
<input
|
|
id="gpx"
|
|
name="gpx"
|
|
type="file"
|
|
accept=".gpx,application/gpx+xml"
|
|
className="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:rounded-md file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-medium file:text-blue-700 hover:file:bg-blue-100"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3">
|
|
<button
|
|
type="submit"
|
|
className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
|
|
>
|
|
Create Route
|
|
</button>
|
|
<a
|
|
href="/routes"
|
|
className="rounded-md border border-gray-300 px-4 py-2 text-gray-700 hover:bg-gray-50"
|
|
>
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|