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>
82 lines
3 KiB
TypeScript
82 lines
3 KiB
TypeScript
import { data, useSearchParams } from "react-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { Route } from "./+types/settings.connections";
|
|
import { loadConnectionsSettings } from "./settings.connections.server";
|
|
|
|
const KNOWN_ERRORS = ["too_many_tokens", "sync_failed", "generic"] as const;
|
|
type KnownError = (typeof KNOWN_ERRORS)[number];
|
|
function isKnownError(value: string | null): value is KnownError {
|
|
return value !== null && (KNOWN_ERRORS as readonly string[]).includes(value);
|
|
}
|
|
|
|
export function meta() {
|
|
return [{ title: "Connected services — Settings — trails.cool" }];
|
|
}
|
|
|
|
export async function loader({ request }: Route.LoaderArgs) {
|
|
return data(await loadConnectionsSettings(request));
|
|
}
|
|
|
|
export default function ConnectionsSettings({ loaderData }: Route.ComponentProps) {
|
|
const { providers } = loaderData;
|
|
const { t } = useTranslation(["journal"]);
|
|
const [searchParams] = useSearchParams();
|
|
const errorParam = searchParams.get("error");
|
|
const errorKey: KnownError | null = isKnownError(errorParam) ? errorParam : errorParam ? "generic" : null;
|
|
|
|
return (
|
|
<section>
|
|
<h2 className="text-lg font-semibold text-gray-900">{t("settings.services.title")}</h2>
|
|
{errorKey && (
|
|
<div
|
|
role="alert"
|
|
className="mt-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800"
|
|
>
|
|
{t(`settings.services.errors.${errorKey}`)}
|
|
</div>
|
|
)}
|
|
<div className="mt-4 space-y-3">
|
|
{providers.map((p) => (
|
|
<div
|
|
key={p.id}
|
|
className="flex items-center justify-between rounded-md border border-gray-200 px-4 py-3"
|
|
>
|
|
<div>
|
|
<p className="font-medium text-gray-900">{p.name}</p>
|
|
{p.connected && p.providerUserId && (
|
|
<p className="text-xs text-gray-500">
|
|
{t("settings.services.connectedAs", { id: p.providerUserId })}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{p.connected ? (
|
|
<div className="flex items-center gap-3">
|
|
<a
|
|
href={`/sync/import/${p.id}`}
|
|
className="text-sm text-blue-600 hover:underline"
|
|
>
|
|
{t("sync.import")}
|
|
</a>
|
|
<form method="post" action={`/api/sync/disconnect/${p.id}`}>
|
|
<button
|
|
type="submit"
|
|
className="text-sm text-red-600 hover:underline"
|
|
>
|
|
{t("settings.services.disconnect")}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
) : (
|
|
<a
|
|
href={p.connectUrl ?? `/api/sync/connect/${p.id}`}
|
|
className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
|
|
>
|
|
{t("settings.services.connect")}
|
|
</a>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|