df562742e1
Completes the .server.ts split started in #418. Every route that mixes a default-export component with a server-only loader/action now has a sibling <route>.server.ts holding the data-fetching helpers; the route .tsx is a thin delegator. Routes converted (21): activities._index, activities.$id, activities.new, auth.accept-terms, auth.verify, explore, feed, notifications, routes._index, routes.$id, routes.$id.edit, routes.new, settings, settings.account, settings.connections.komoot, settings.profile, settings.security, sync.import.$provider, sync.import.komoot, users.$username.followers, users.$username.following Pattern (same as home.tsx / users.$username.tsx / settings.connections.tsx): - loader → `return data(await loadX(request, params?))` - action → `return await xAction(request, params?)` - All `getDb` / Drizzle schema / `~/lib/*.server` imports move to the .server.ts sibling. - `throw redirect(...)` and `throw data(...)` propagate through the delegator unchanged. No behavior changes — pure module-graph cleanup. Component modules no longer transitively import the DB client; Vite's tree-shake of server-only code is now backed by an explicit, file-local contract. Verified: - pnpm typecheck — green - pnpm lint — green - pnpm test — 181 passed, 31 integration-gated skipped - pnpm --filter @trails-cool/journal build — succeeds Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
|
|
import { data } from "react-router";
|
|
import type { Route } from "./+types/routes.new";
|
|
import { loadRoutesNew, routesNewAction } from "./routes.new.server";
|
|
|
|
export async function loader({ request }: Route.LoaderArgs) {
|
|
return data(await loadRoutesNew(request));
|
|
}
|
|
|
|
export async function action({ request }: Route.ActionArgs) {
|
|
return await routesNewAction(request);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|