maaz519
1389a65e18
Implements the Groups & Routes admin page with a client-side RouteManager component (add/delete sync routes via fetch), server-side groups page that pre-fetches groups/routes from the API, and Next.js Route Handler proxies for /api/routes (GET, POST) and /api/routes/[id] (DELETE). Adds a custom jest environment that polyfills Node 18+ native fetch into the jsdom sandbox so tests can use jest.spyOn(global, 'fetch'). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
41 lines
947 B
TypeScript
41 lines
947 B
TypeScript
import { RouteManager } from './RouteManager';
|
|
|
|
interface Group {
|
|
id: string;
|
|
name: string;
|
|
platform: string;
|
|
}
|
|
|
|
interface Route {
|
|
id: string;
|
|
sourceGroupId: string;
|
|
targetGroupId: string;
|
|
sourceGroup: { name: string };
|
|
targetGroup: { name: string };
|
|
}
|
|
|
|
async function fetchJson<T>(url: string): Promise<T | null> {
|
|
try {
|
|
const res = await fetch(url, { cache: 'no-store' });
|
|
if (!res.ok) return null;
|
|
return res.json();
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export default async function GroupsPage() {
|
|
const apiUrl = process.env.API_URL ?? 'http://localhost:3001';
|
|
const [groups, routes] = await Promise.all([
|
|
fetchJson<Group[]>(`${apiUrl}/groups`),
|
|
fetchJson<Route[]>(`${apiUrl}/routes`),
|
|
]);
|
|
|
|
return (
|
|
<div className="max-w-2xl">
|
|
<h1 className="text-xl font-semibold mb-6">Groups & Routes</h1>
|
|
<RouteManager groups={groups ?? []} initialRoutes={routes ?? []} />
|
|
</div>
|
|
);
|
|
}
|