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>
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import { data } from "react-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { Route } from "./+types/routes._index";
|
|
import { requireSessionUser } from "~/lib/auth/session.server";
|
|
import { listRoutes } from "~/lib/routes.server";
|
|
import { ClientDate } from "~/components/ClientDate";
|
|
import { ClientMap } from "~/components/ClientMap";
|
|
|
|
export async function loader({ request }: Route.LoaderArgs) {
|
|
const user = await requireSessionUser(request);
|
|
|
|
const userRoutes = await listRoutes(user.id);
|
|
return data({
|
|
routes: userRoutes.map((r) => ({
|
|
id: r.id,
|
|
name: r.name,
|
|
distance: r.distance,
|
|
elevationGain: r.elevationGain,
|
|
updatedAt: r.updatedAt.toISOString(),
|
|
geojson: r.geojson ?? null,
|
|
})),
|
|
});
|
|
}
|
|
|
|
export function meta(_args: Route.MetaArgs) {
|
|
return [{ title: "My Routes — trails.cool" }];
|
|
}
|
|
|
|
export default function RoutesListPage({ loaderData }: Route.ComponentProps) {
|
|
const { routes } = loaderData;
|
|
const { t } = useTranslation("journal");
|
|
|
|
return (
|
|
<div className="mx-auto max-w-4xl px-4 py-8">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-gray-900">{t("routes.myRoutes")}</h1>
|
|
<a
|
|
href="/routes/new"
|
|
className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
|
|
>
|
|
{t("routes.new")}
|
|
</a>
|
|
</div>
|
|
|
|
{routes.length === 0 ? (
|
|
<p className="mt-8 text-center text-gray-500">
|
|
{t("routes.noRoutesYet")}
|
|
</p>
|
|
) : (
|
|
<ul className="mt-6 space-y-4">
|
|
{routes.map((route) => (
|
|
<li key={route.id}>
|
|
<a
|
|
href={`/routes/${route.id}`}
|
|
className="block rounded-lg border border-gray-200 p-4 hover:bg-gray-50"
|
|
>
|
|
<div className="flex gap-4">
|
|
<div className="w-48 shrink-0">
|
|
{route.geojson ? (
|
|
<ClientMap geojson={route.geojson} />
|
|
) : (
|
|
<div className="flex h-36 w-full items-center justify-center rounded bg-gray-100 text-xs text-gray-400">
|
|
{t("routes.noMapPreview")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-1 flex-col justify-between">
|
|
<div>
|
|
<h2 className="text-lg font-medium text-gray-900">{route.name}</h2>
|
|
<div className="mt-1 flex gap-4 text-sm text-gray-500">
|
|
{route.distance != null && (
|
|
<span>{(route.distance / 1000).toFixed(1)} km</span>
|
|
)}
|
|
{route.elevationGain != null && (
|
|
<span>↑ {route.elevationGain} m</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<span className="text-sm text-gray-400">
|
|
<ClientDate iso={route.updatedAt} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|