added RigsList client
This commit is contained in:
parent
57d5177c70
commit
d0e6c0bf2f
2 changed files with 139 additions and 1 deletions
139
app/rigs/RigsListClient.tsx
Normal file
139
app/rigs/RigsListClient.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
// app/rigs/RigsListClient.tsx
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { useToast } from "@/hooks/use-toast";
|
||||||
|
|
||||||
|
type RigRow = {
|
||||||
|
id: number | string;
|
||||||
|
name: string;
|
||||||
|
rig_type_name?: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
async function apiJson<T>(url: string, init?: RequestInit): Promise<T> {
|
||||||
|
const res = await fetch(url, {
|
||||||
|
...init,
|
||||||
|
headers: {
|
||||||
|
Accept: "application/json",
|
||||||
|
...(init?.headers || {}),
|
||||||
|
},
|
||||||
|
credentials: "include",
|
||||||
|
cache: "no-store",
|
||||||
|
});
|
||||||
|
|
||||||
|
const txt = await res.text().catch(() => "");
|
||||||
|
if (res.ok) {
|
||||||
|
try {
|
||||||
|
return (txt ? JSON.parse(txt) : ({} as any)) as T;
|
||||||
|
} catch {
|
||||||
|
return {} as T;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let body: any = null;
|
||||||
|
try { body = txt ? JSON.parse(txt) : null; } catch {}
|
||||||
|
const message = body?.error || body?.message || txt || `HTTP ${res.status} for ${url}`;
|
||||||
|
|
||||||
|
// If unauthorized, send to sign-in (our flow always lands on /portal)
|
||||||
|
if (res.status === 401 && typeof window !== "undefined") {
|
||||||
|
window.location.assign("/auth/sign-in");
|
||||||
|
}
|
||||||
|
|
||||||
|
const err: any = new Error(message);
|
||||||
|
err.status = res.status;
|
||||||
|
err.body = body ?? txt;
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RigsListClient() {
|
||||||
|
const { toast } = useToast();
|
||||||
|
const [rigs, setRigs] = useState<RigRow[] | null>(null);
|
||||||
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
const [err, setErr] = useState<string | null>(null);
|
||||||
|
const [deleting, setDeleting] = useState<Record<string | number, boolean>>({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setErr(null);
|
||||||
|
const j = await apiJson<{ data: RigRow[] }>("/api/my/rigs");
|
||||||
|
setRigs(j?.data ?? []);
|
||||||
|
} catch (e: any) {
|
||||||
|
setErr(e?.message || "Failed to load rigs");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function onDelete(id: string | number) {
|
||||||
|
if (!confirm("Delete this rig?")) return;
|
||||||
|
try {
|
||||||
|
setDeleting((d) => ({ ...d, [id]: true }));
|
||||||
|
await apiJson(`/api/my/rigs/${id}`, { method: "DELETE" });
|
||||||
|
setRigs((prev) => (prev ? prev.filter((r) => r.id !== id) : prev));
|
||||||
|
toast({ title: "Rig deleted" });
|
||||||
|
} catch (e: any) {
|
||||||
|
toast({
|
||||||
|
title: "Delete failed",
|
||||||
|
description: e?.message || "Could not delete rig.",
|
||||||
|
variant: "destructive",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setDeleting((d) => {
|
||||||
|
const copy = { ...d };
|
||||||
|
delete copy[id];
|
||||||
|
return copy;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-md border p-4 text-sm opacity-70">
|
||||||
|
Loading your rigs…
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (err) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-md border border-red-300 bg-red-50 p-4 text-sm text-red-700">
|
||||||
|
{err}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="divide-y divide-border rounded-md border">
|
||||||
|
{(!rigs || rigs.length === 0) && (
|
||||||
|
<div className="p-4 text-sm opacity-70">No rigs yet.</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{rigs?.map((r) => (
|
||||||
|
<div key={r.id} className="flex items-center justify-between p-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="font-medium">{r.name}</div>
|
||||||
|
{r.rig_type_name && (
|
||||||
|
<Badge variant="secondary">{r.rig_type_name}</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onDelete(r.id)}
|
||||||
|
disabled={!!deleting[r.id]}
|
||||||
|
>
|
||||||
|
{deleting[r.id] ? "Deleting…" : "Delete"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -4,7 +4,6 @@ import RigsListClient from "./RigsListClient";
|
||||||
export const metadata = { title: "Rigs" };
|
export const metadata = { title: "Rigs" };
|
||||||
|
|
||||||
export default async function RigsPage() {
|
export default async function RigsPage() {
|
||||||
// Server shell only; the client component fetches via /api/my/rigs with user cookie
|
|
||||||
return (
|
return (
|
||||||
<main className="mx-auto max-w-5xl px-6 py-10">
|
<main className="mx-auto max-w-5xl px-6 py-10">
|
||||||
<h1 className="mb-6 text-3xl font-bold tracking-tight">Your Rigs</h1>
|
<h1 className="mb-6 text-3xl font-bold tracking-tight">Your Rigs</h1>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue