Logan CusanoandClaude Opus 5
be79499635
Three of the app's routes were referenced but never existed, so the redesign's
navigation pointed at 404s from several directions.
/dashboard was the post-login and fallback redirect target in nine places --
login, onboarding, middleware, the admin/nodes/systems/tokens/settings guards,
and the marketing header -- but app/dashboard/ was never created. Signing in
normally dropped the user on a 404. The real signed-in home is "/", which
app/page.tsx already renders as LiveView for an authed user with an org, and
which the nav labels "Live"; all nine now point there.
Nav also linked /watch and /network, neither of which existed. /watch is the
alerts screen under its redesign name, so it re-exports app/alerts/page.tsx
and /alerts stays reachable for old links. /network is new: the "my equipment"
hub the redesign moved /nodes, /systems and /tokens behind and then never
built, which had left /systems and /tokens with no entry point in the UI at
all. Its hooks all run before the admin/operator guard, per d041c86.
Separately, the admin page's guard read isAdmin without authLoading, so every
cold load of /admin -- typed URL, hard refresh, bookmark -- redirected away
while the Firebase claims were still resolving. Admin was only reachable by
clicking through from an already-mounted page. Now it waits, like every other
guarded route does.
And /incidents no longer lies about an empty list: a failed Firestore query
leaves `incidents` empty just as a quiet night does, and the page was printing
"No incidents recorded yet" over the top of a missing-composite-index error.
useIncidents already returned `error`; the page just ignored it. It now renders
an ErrorBanner instead, so the undeployed indexes in server-26#13 read as a
failure rather than as silence on the radio.
Closes server-26#30, server-26#31. server-26#13 stays open -- the rules and
indexes still have to be pushed to the live project by hand.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useNodes } from "@/lib/useNodes";
|
|
import { useSystems } from "@/lib/useSystems";
|
|
import { NodeCard } from "@/components/NodeCard";
|
|
import { NodeConfigModal } from "@/components/NodeConfigModal";
|
|
import { useAuth } from "@/components/AuthProvider";
|
|
import type { NodeRecord } from "@/lib/types";
|
|
|
|
export default function NodesPage() {
|
|
const { isAdmin, isOperator, loading: authLoading } = useAuth();
|
|
const router = useRouter();
|
|
const { nodes, loading } = useNodes();
|
|
const { systems } = useSystems();
|
|
|
|
useEffect(() => {
|
|
if (!authLoading && !isAdmin && !isOperator) router.replace("/");
|
|
}, [authLoading, isAdmin, isOperator, router]);
|
|
|
|
const [configNode, setConfigNode] = useState<NodeRecord | null>(null);
|
|
|
|
// Every hook must run before this guard. React tracks hooks by call order,
|
|
// so returning early on the first render and then reaching a useState on the
|
|
// next one is error #310 ("rendered more hooks than during the previous
|
|
// render") -- which crashed this whole page to a blank client-exception
|
|
// screen the moment auth resolved.
|
|
if (authLoading || (!isAdmin && !isOperator)) return null;
|
|
const systemMap = Object.fromEntries(systems.map((s) => [s.system_id, s]));
|
|
const pending = nodes.filter((n) => !n.configured);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-xl font-bold text-white font-mono">Nodes</h1>
|
|
|
|
{pending.length > 0 && (
|
|
<div className="space-y-2">
|
|
<h2 className="text-sm font-semibold text-indigo-400 uppercase tracking-wider">
|
|
Needs Configuration ({pending.length})
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{pending.map((n) => (
|
|
<div key={n.node_id} onClick={() => setConfigNode(n)} className="cursor-pointer">
|
|
<NodeCard node={n} system={systemMap[n.assigned_system_id ?? ""]} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">
|
|
All Nodes ({nodes.length})
|
|
</h2>
|
|
{loading ? (
|
|
<p className="text-gray-600 text-sm font-mono">Loading…</p>
|
|
) : nodes.length === 0 ? (
|
|
<p className="text-gray-600 text-sm font-mono">No nodes registered yet. Boot a Pi to get started.</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{nodes.map((n) => (
|
|
<NodeCard key={n.node_id} node={n} system={systemMap[n.assigned_system_id ?? ""]} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{configNode && (
|
|
<NodeConfigModal
|
|
node={configNode}
|
|
systems={systems}
|
|
onClose={() => setConfigNode(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|