fixing vault. allow users to delete their builds or update
This commit is contained in:
@@ -12,16 +12,25 @@
|
||||
* Notes for devs:
|
||||
* - We intentionally keep ONE save-to-vault handler: handleSaveAs()
|
||||
* - Toast is used for clear user feedback (save success/fail)
|
||||
*
|
||||
* Auth note:
|
||||
* - /api/v1/builds/me/* requires JWT.
|
||||
* - The builder can render before AuthContext hydrates from localStorage, so we
|
||||
* guard “load build” calls until auth is ready to avoid a 401.
|
||||
*/
|
||||
|
||||
import { useMemo, useState, useEffect, useCallback, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams, useRouter } from "next/navigation";
|
||||
import { X, Link2, Square, CheckSquare } from "lucide-react";
|
||||
|
||||
import { useApi } from "@/lib/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
import { CATEGORIES } from "@/data/gunbuilderParts";
|
||||
import { BUILDER_SLOTS, isSlotSatisfied } from "@/data/builderSlots";
|
||||
import type { CategoryId, Part } from "@/types/gunbuilder";
|
||||
import { PART_ROLE_TO_CATEGORY } from "@/lib/catalogMappings";
|
||||
import { X, Link2, Square, CheckSquare } from "lucide-react";
|
||||
|
||||
// ✅ Centralized overlap rules + helpers
|
||||
import OverlapChip from "@/components/builder/OverlapChip";
|
||||
@@ -132,6 +141,11 @@ export default function GunbuilderPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
|
||||
const api = useApi();
|
||||
|
||||
// ✅ Auth: we need the token ready before calling /builds/me/*
|
||||
const { token, loading: authLoading, getAuthHeaders } = useAuth();
|
||||
|
||||
// -----------------------------
|
||||
// Save As… modal state (Vault variants)
|
||||
// -----------------------------
|
||||
@@ -509,13 +523,30 @@ export default function GunbuilderPage() {
|
||||
|
||||
if (!uuidToLoad) return;
|
||||
|
||||
// ✅ Wait for AuthProvider hydration before calling /me endpoints.
|
||||
if (authLoading) return;
|
||||
|
||||
// ✅ If not logged in, don't spam the backend; show a helpful message instead.
|
||||
if (!token) {
|
||||
setShareStatus("Please log in to load builds from your Vault.");
|
||||
window.setTimeout(() => setShareStatus(null), 4500);
|
||||
return;
|
||||
}
|
||||
|
||||
const run = async () => {
|
||||
try {
|
||||
setShareStatus("Loading build…");
|
||||
|
||||
// NOTE: using fetch here avoids any “stale api instance” issues and lets us
|
||||
// explicitly attach JWT headers.
|
||||
const res = await fetch(
|
||||
`${API_BASE_URL}/api/v1/builds/me/${encodeURIComponent(uuidToLoad)}`,
|
||||
{ credentials: "include" }
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...getAuthHeaders(),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
@@ -551,8 +582,14 @@ export default function GunbuilderPage() {
|
||||
};
|
||||
|
||||
run();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [searchParams, router]);
|
||||
}, [
|
||||
searchParams,
|
||||
router,
|
||||
authLoading,
|
||||
token,
|
||||
getAuthHeaders,
|
||||
// API_BASE_URL is a module constant; no need to include
|
||||
]);
|
||||
|
||||
// -----------------------------
|
||||
// SAVE AS… (single source of truth for saving to Vault)
|
||||
@@ -584,16 +621,11 @@ export default function GunbuilderPage() {
|
||||
setSaveAsSaving(true);
|
||||
showToast({ type: "info", message: "Saving build…" });
|
||||
|
||||
const res = await fetch(`${API_BASE_URL}/api/v1/builds/me`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
description: saveAsDesc?.trim() || null,
|
||||
isPublic: false,
|
||||
items,
|
||||
}),
|
||||
const res = await api.post("/api/v1/builds/me", {
|
||||
title,
|
||||
description: saveAsDesc?.trim() || null,
|
||||
isPublic: false,
|
||||
items,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
|
||||
+260
-537
@@ -1,305 +1,119 @@
|
||||
// app/vault/[uuid]/edit/page.tsx
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
type BuildItemDto = {
|
||||
id?: string;
|
||||
uuid?: string;
|
||||
slot?: string; // categoryId in your MVP
|
||||
position?: number | null;
|
||||
quantity?: number | null;
|
||||
productId?: string | null;
|
||||
productName?: string | null;
|
||||
productBrand?: string | null;
|
||||
productImageUrl?: string | null;
|
||||
};
|
||||
import { useApi } from "@/lib/api";
|
||||
|
||||
type BuildDto = {
|
||||
id: string;
|
||||
uuid: string;
|
||||
title: string;
|
||||
description?: string | null;
|
||||
isPublic?: boolean | null;
|
||||
createdAt?: string | null;
|
||||
updatedAt?: string | null;
|
||||
items?: BuildItemDto[] | null;
|
||||
|
||||
// Option B: metadata fields on Build (or related BuildProfile)
|
||||
platform?: string | null;
|
||||
caliber?: string | null;
|
||||
// purpose?: string | null;
|
||||
buildClass?: string | null;
|
||||
tags?: string[] | null;
|
||||
coverImageUrl?: string | null;
|
||||
items?: Array<{
|
||||
slot: string;
|
||||
productId: number;
|
||||
productName?: string | null;
|
||||
bestPrice?: number | string | null; // backend may serialize BigDecimal as string
|
||||
}>;
|
||||
};
|
||||
|
||||
const API_BASE_URL =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
|
||||
|
||||
// -----------------------------
|
||||
// Controlled vocab (platform + caliber)
|
||||
// -----------------------------
|
||||
const PLATFORM_OPTIONS = ["AR-15", "AR-10", "AR-9"] as const;
|
||||
type PlatformOption = (typeof PLATFORM_OPTIONS)[number] | "";
|
||||
|
||||
/**
|
||||
* Keep this intentionally small and controlled for now:
|
||||
* - Only calibers relevant to AR-15 / AR-10 / AR-9
|
||||
* - Easy future expansion: add strings to the arrays below
|
||||
* - If you later want “canonical” values vs “labels”, we can switch to { value, label } objects.
|
||||
*/
|
||||
const CALIBERS_BY_PLATFORM: Record<
|
||||
Exclude<PlatformOption, "">,
|
||||
readonly string[]
|
||||
> = {
|
||||
"AR-15": [
|
||||
"5.56 NATO",
|
||||
".223 Rem",
|
||||
".300 Blackout",
|
||||
"6.5 Grendel",
|
||||
"6mm ARC",
|
||||
"7.62x39",
|
||||
".224 Valkyrie",
|
||||
"350 Legend",
|
||||
"6.8 SPC",
|
||||
"458 SOCOM",
|
||||
],
|
||||
"AR-10": [
|
||||
"7.62 NATO",
|
||||
".308 Win",
|
||||
"6.5 Creedmoor",
|
||||
"6mm Creedmoor",
|
||||
".260 Rem",
|
||||
".243 Win",
|
||||
"8.6 Blackout",
|
||||
],
|
||||
"AR-9": ["9mm", "10mm", ".40 S&W", ".45 ACP"],
|
||||
} as const;
|
||||
|
||||
type CaliberOption = string | "";
|
||||
|
||||
// -----------------------------
|
||||
// Build Class (controlled list)
|
||||
// -----------------------------
|
||||
const BUILD_CLASS_OPTIONS = [
|
||||
"Home Defense",
|
||||
"Duty / Patrol",
|
||||
"Training",
|
||||
"Competition",
|
||||
"Hunting",
|
||||
"Range / Fun",
|
||||
] as const;
|
||||
|
||||
type BuildClassOption = (typeof BUILD_CLASS_OPTIONS)[number] | "";
|
||||
|
||||
function fmt(d?: string | null) {
|
||||
if (!d) return "—";
|
||||
const dt = new Date(d);
|
||||
if (Number.isNaN(dt.getTime())) return d;
|
||||
return dt.toLocaleString();
|
||||
return Number.isNaN(dt.getTime()) ? d : dt.toLocaleString();
|
||||
}
|
||||
|
||||
function isUuid(v: string) {
|
||||
return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
|
||||
v
|
||||
);
|
||||
}
|
||||
|
||||
export default function EditBuildPage() {
|
||||
export default function VaultBuildEditPage() {
|
||||
const { uuid } = useParams<{ uuid: string }>();
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const { user, loading, getAuthHeaders } = useAuth();
|
||||
|
||||
const uuid = String(params?.uuid ?? "");
|
||||
const authed = !!user;
|
||||
|
||||
const headers = useMemo(() => getAuthHeaders(), [getAuthHeaders]);
|
||||
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const api = useApi();
|
||||
const { token, loading: authLoading } = useAuth();
|
||||
|
||||
const [build, setBuild] = useState<BuildDto | null>(null);
|
||||
const [form, setForm] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
isPublic: false,
|
||||
});
|
||||
|
||||
// Editable submission/profile fields
|
||||
const [profile, setProfile] = useState<{
|
||||
title: string;
|
||||
description: string;
|
||||
isPublic: boolean;
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [savedMsg, setSavedMsg] = useState<string | null>(null);
|
||||
|
||||
platform: PlatformOption;
|
||||
caliber: CaliberOption;
|
||||
buildClass: BuildClassOption;
|
||||
const authed = !!token;
|
||||
|
||||
tagsText: string; // comma-separated for MVP
|
||||
coverImageUrl: string;
|
||||
} | null>(null);
|
||||
|
||||
// Redirect to login if not authed
|
||||
// Load build once auth is ready + token exists
|
||||
useEffect(() => {
|
||||
if (!loading && !authed) router.replace("/login");
|
||||
}, [loading, authed, router]);
|
||||
if (!uuid) return;
|
||||
if (authLoading) return;
|
||||
|
||||
// Load build
|
||||
useEffect(() => {
|
||||
if (loading || !authed) return;
|
||||
|
||||
if (!uuid || !isUuid(uuid)) {
|
||||
setError("Invalid build id.");
|
||||
if (!authed) {
|
||||
setError("Please log in to edit builds.");
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
(async () => {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// NOTE: ownership / public checks happen server-side
|
||||
const res = await fetch(
|
||||
`${API_BASE_URL}/api/v1/builds/me/${encodeURIComponent(uuid)}`,
|
||||
{
|
||||
credentials: "include",
|
||||
}
|
||||
setError(null);
|
||||
const res = await api.get(
|
||||
`/api/v1/builds/me/${encodeURIComponent(uuid)}`
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
const txt = await res.text().catch(() => "");
|
||||
throw new Error(txt || `Load failed (${res.status})`);
|
||||
throw new Error(txt || `Failed to load build (${res.status})`);
|
||||
}
|
||||
|
||||
const dto = (await res.json()) as BuildDto;
|
||||
const data = (await res.json()) as BuildDto;
|
||||
|
||||
if (cancelled) return;
|
||||
|
||||
setBuild(dto);
|
||||
|
||||
const normalizedPlatform: PlatformOption = PLATFORM_OPTIONS.includes(
|
||||
(dto.platform ?? "") as any
|
||||
)
|
||||
? (dto.platform as PlatformOption)
|
||||
: "";
|
||||
|
||||
const allowedCalibers = normalizedPlatform
|
||||
? CALIBERS_BY_PLATFORM[normalizedPlatform]
|
||||
: [];
|
||||
|
||||
const normalizedCaliber =
|
||||
dto.caliber && allowedCalibers.includes(dto.caliber)
|
||||
? dto.caliber
|
||||
: "";
|
||||
|
||||
setProfile({
|
||||
title: dto.title ?? "",
|
||||
description: dto.description ?? "",
|
||||
isPublic: !!dto.isPublic,
|
||||
|
||||
platform: normalizedPlatform,
|
||||
caliber: normalizedCaliber,
|
||||
|
||||
buildClass: (BUILD_CLASS_OPTIONS.includes(
|
||||
(dto.buildClass ?? "") as any
|
||||
)
|
||||
? (dto.buildClass as any)
|
||||
: "") as BuildClassOption,
|
||||
|
||||
tagsText: Array.isArray(dto.tags) ? dto.tags.join(", ") : "",
|
||||
coverImageUrl: dto.coverImageUrl ?? "",
|
||||
setBuild(data);
|
||||
setForm({
|
||||
title: data.title ?? "",
|
||||
description: data.description ?? "",
|
||||
isPublic: Boolean(data.isPublic),
|
||||
});
|
||||
} catch (e: any) {
|
||||
if (!cancelled) setError(e?.message || "Failed to load build");
|
||||
} finally {
|
||||
if (!cancelled) setBusy(false);
|
||||
if (!cancelled) setError(e?.message ?? "Failed to load build");
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [loading, authed, uuid, headers]);
|
||||
}, [uuid, authLoading, authed, api]);
|
||||
|
||||
// Derived caliber options based on selected platform
|
||||
const caliberOptions = useMemo(() => {
|
||||
if (!profile?.platform) return [];
|
||||
const dirty = useMemo(() => {
|
||||
if (!build) return false;
|
||||
return (
|
||||
CALIBERS_BY_PLATFORM[profile.platform as Exclude<PlatformOption, "">] ??
|
||||
[]
|
||||
form.title !== (build.title ?? "") ||
|
||||
form.description !== (build.description ?? "") ||
|
||||
form.isPublic !== Boolean(build.isPublic)
|
||||
);
|
||||
}, [profile?.platform]);
|
||||
}, [build, form]);
|
||||
|
||||
// If platform changes, ensure caliber is valid for that platform
|
||||
useEffect(() => {
|
||||
if (!profile) return;
|
||||
if (!profile.platform) return;
|
||||
|
||||
const allowed =
|
||||
CALIBERS_BY_PLATFORM[profile.platform as Exclude<PlatformOption, "">] ??
|
||||
[];
|
||||
if (!profile.caliber) return;
|
||||
|
||||
if (!allowed.includes(profile.caliber)) {
|
||||
setProfile((p) => (p ? { ...p, caliber: "" } : p));
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [profile?.platform]); // intentionally only platform
|
||||
|
||||
const save = async () => {
|
||||
if (!profile) return;
|
||||
if (!uuid || !isUuid(uuid)) return;
|
||||
|
||||
const title = profile.title.trim();
|
||||
if (!title) {
|
||||
setError("Title is required.");
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
async function onSave() {
|
||||
if (!uuid) return;
|
||||
setBusy(true);
|
||||
setSavedMsg(null);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
title,
|
||||
description: profile.description?.trim() || null,
|
||||
isPublic: !!profile.isPublic,
|
||||
|
||||
// Backend expects buildClass (not purpose)
|
||||
buildClass: profile.buildClass || null,
|
||||
|
||||
caliber: profile.caliber || null,
|
||||
coverImageUrl: profile.coverImageUrl?.trim() || null,
|
||||
|
||||
// Backend expects tags: string[]
|
||||
tags: profile.tagsText
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean),
|
||||
|
||||
// IMPORTANT: if your backend overwrites items when provided,
|
||||
// leave items undefined unless you intend to edit items here.
|
||||
// If your backend REQUIRES items, uncomment and map from build.items:
|
||||
// items: (build?.items ?? []).map((it) => ({
|
||||
// productId: it.productId ? Number(it.productId) : null,
|
||||
// slot: it.slot ?? "",
|
||||
// position: it.position ?? 0,
|
||||
// quantity: it.quantity ?? 1,
|
||||
// })).filter((it) => it.productId && it.slot),
|
||||
title: form.title.trim() || "Untitled Build",
|
||||
description: form.description.trim() || null,
|
||||
isPublic: form.isPublic,
|
||||
};
|
||||
|
||||
const res = await fetch(
|
||||
`${API_BASE_URL}/api/v1/builds/me/${encodeURIComponent(uuid)}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...headers,
|
||||
},
|
||||
credentials: "include",
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
const res = await api.put(
|
||||
`/api/v1/builds/me/${encodeURIComponent(uuid)}`,
|
||||
payload
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
@@ -307,341 +121,250 @@ export default function EditBuildPage() {
|
||||
throw new Error(txt || `Save failed (${res.status})`);
|
||||
}
|
||||
|
||||
const updated = (await res.json().catch(() => null)) as BuildDto | null;
|
||||
if (updated?.uuid) setBuild(updated);
|
||||
|
||||
router.replace("/vault");
|
||||
const updated = (await res.json()) as BuildDto;
|
||||
setBuild(updated);
|
||||
setForm({
|
||||
title: updated.title ?? "",
|
||||
description: updated.description ?? "",
|
||||
isPublic: Boolean(updated.isPublic),
|
||||
});
|
||||
setSavedMsg("Saved.");
|
||||
setTimeout(() => setSavedMsg(null), 2000);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Save failed");
|
||||
setError(e?.message ?? "Save failed");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading || busy) {
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-4 py-6">
|
||||
<div className="text-sm opacity-70">Loading…</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!authed) return null;
|
||||
async function onDelete() {
|
||||
if (!uuid) return;
|
||||
|
||||
const ok = window.confirm("Delete this build?\n\nThis cannot be undone.");
|
||||
if (!ok) return;
|
||||
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await api.del(
|
||||
`/api/v1/builds/me/${encodeURIComponent(uuid)}`
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
const txt = await res.text().catch(() => "");
|
||||
throw new Error(txt || `Delete failed (${res.status})`);
|
||||
}
|
||||
|
||||
router.replace("/vault");
|
||||
router.refresh();
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? "Delete failed");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-4 py-6">
|
||||
<div className="mb-6 flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<h1 className="text-2xl font-semibold truncate">Edit Build</h1>
|
||||
<div className="mt-1 text-xs opacity-70 font-mono truncate">
|
||||
{uuid}
|
||||
</div>
|
||||
<div className="mt-1 text-xs opacity-60">
|
||||
Updated: {fmt(build?.updatedAt)}
|
||||
<main className="mx-auto max-w-3xl p-6">
|
||||
<div className="mb-4 flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold">Edit Build</h1>
|
||||
<div className="mt-1 text-xs text-zinc-500">
|
||||
UUID: <span className="font-mono">{uuid}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
prefetch={false}
|
||||
href={`/builder?load=${encodeURIComponent(uuid)}`}
|
||||
className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-sm hover:bg-white/10"
|
||||
href="/vault"
|
||||
className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs hover:bg-white/10"
|
||||
>
|
||||
Open in Builder
|
||||
</Link>
|
||||
<Link href="/vault" className="text-sm opacity-80 hover:underline">
|
||||
← Vault
|
||||
</Link>
|
||||
|
||||
<button
|
||||
className="rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300 disabled:opacity-50"
|
||||
disabled={!uuid}
|
||||
onClick={() =>
|
||||
router.push(`/builder?load=${encodeURIComponent(uuid)}`)
|
||||
}
|
||||
title="Open this build in the builder to swap parts"
|
||||
>
|
||||
Open in Builder
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm">
|
||||
{authLoading && <div className="text-sm text-zinc-400">Loading…</div>}
|
||||
|
||||
{!authLoading && error && (
|
||||
<pre className="mb-4 whitespace-pre-wrap rounded-md border border-red-500/30 bg-red-500/10 p-3 text-xs text-red-200">
|
||||
{error}
|
||||
</div>
|
||||
</pre>
|
||||
)}
|
||||
|
||||
{!profile ? (
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-4 text-sm opacity-70">
|
||||
No build loaded.
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
{/* Left: form */}
|
||||
<div className="lg:col-span-2 rounded-xl border border-white/10 bg-white/5 p-4">
|
||||
<div className="mb-4">
|
||||
<div className="text-sm font-medium">Submission Details</div>
|
||||
<div className="text-xs opacity-70">
|
||||
Controlled fields keep the community feed clean + filterable.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{/* Title */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-medium text-white/70">
|
||||
Title
|
||||
</label>
|
||||
<input
|
||||
value={profile.title}
|
||||
onChange={(e) =>
|
||||
setProfile((p) => (p ? { ...p, title: e.target.value } : p))
|
||||
}
|
||||
className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
|
||||
placeholder='e.g. "Budget 16” General Purpose AR-15"'
|
||||
/>
|
||||
{!authLoading && build && (
|
||||
<div className="space-y-4">
|
||||
{/* meta */}
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="text-xs text-zinc-400">
|
||||
Created: {fmt(build.createdAt)} • Updated:{" "}
|
||||
{fmt(build.updatedAt)}
|
||||
</div>
|
||||
|
||||
{/* Platform */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-white/70">
|
||||
Platform
|
||||
</label>
|
||||
<select
|
||||
value={profile.platform}
|
||||
onChange={(e) =>
|
||||
setProfile((p) =>
|
||||
p
|
||||
? {
|
||||
...p,
|
||||
platform: e.target.value as PlatformOption,
|
||||
}
|
||||
: p
|
||||
)
|
||||
}
|
||||
className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
|
||||
>
|
||||
<option value="">Select…</option>
|
||||
{PLATFORM_OPTIONS.map((p) => (
|
||||
<option key={p} value={p}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="mt-1 text-xs text-white/40">
|
||||
Controlled list (prevents messy feed data).
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Caliber */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-white/70">
|
||||
Caliber
|
||||
</label>
|
||||
<select
|
||||
value={profile.caliber}
|
||||
onChange={(e) =>
|
||||
setProfile((p) =>
|
||||
p ? { ...p, caliber: e.target.value as CaliberOption } : p
|
||||
)
|
||||
}
|
||||
disabled={!profile.platform}
|
||||
className={`mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60 ${
|
||||
!profile.platform ? "opacity-50 cursor-not-allowed" : ""
|
||||
}`}
|
||||
>
|
||||
<option value="">
|
||||
{profile.platform ? "Select…" : "Select platform first…"}
|
||||
</option>
|
||||
{caliberOptions.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="mt-1 text-xs text-white/40">
|
||||
Options are tied to platform. Update{" "}
|
||||
<span className="font-mono">CALIBERS_BY_PLATFORM</span> to add
|
||||
more.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Build Class */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-white/70">
|
||||
Build Class
|
||||
</label>
|
||||
<select
|
||||
value={profile.buildClass}
|
||||
onChange={(e) =>
|
||||
setProfile((p) =>
|
||||
p
|
||||
? {
|
||||
...p,
|
||||
buildClass: e.target.value as BuildClassOption,
|
||||
}
|
||||
: p
|
||||
)
|
||||
}
|
||||
className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
|
||||
>
|
||||
<option value="">Select…</option>
|
||||
{BUILD_CLASS_OPTIONS.map((c) => (
|
||||
<option key={c} value={c}>
|
||||
{c}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-white/70">
|
||||
Tags
|
||||
</label>
|
||||
<input
|
||||
value={profile.tagsText}
|
||||
onChange={(e) =>
|
||||
setProfile((p) =>
|
||||
p ? { ...p, tagsText: e.target.value } : p
|
||||
)
|
||||
}
|
||||
className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
|
||||
placeholder="budget, general purpose, suppressed"
|
||||
/>
|
||||
<div className="mt-1 text-xs text-white/40">
|
||||
Comma-separated for MVP.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cover image URL */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-medium text-white/70">
|
||||
Cover Image URL
|
||||
</label>
|
||||
<input
|
||||
value={profile.coverImageUrl}
|
||||
onChange={(e) =>
|
||||
setProfile((p) =>
|
||||
p ? { ...p, coverImageUrl: e.target.value } : p
|
||||
)
|
||||
}
|
||||
className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
|
||||
placeholder="https://…"
|
||||
/>
|
||||
<div className="mt-1 text-xs text-white/40">
|
||||
Later we’ll replace this with uploads.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-medium text-white/70">
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
value={profile.description}
|
||||
onChange={(e) =>
|
||||
setProfile((p) =>
|
||||
p ? { ...p, description: e.target.value } : p
|
||||
)
|
||||
}
|
||||
rows={5}
|
||||
className="mt-1 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm text-white outline-none focus:ring-1 focus:ring-amber-400/60"
|
||||
placeholder="What’s the goal of this build? Any notes, constraints, lessons learned…"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Public toggle */}
|
||||
<div className="md:col-span-2 flex items-center justify-between rounded-md border border-white/10 bg-black/20 px-3 py-2">
|
||||
<div>
|
||||
<div className="text-sm font-medium">Make Public</div>
|
||||
<div className="text-xs opacity-70">
|
||||
When enabled, this build can appear in the community feed
|
||||
later.
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!profile.isPublic}
|
||||
onChange={(e) =>
|
||||
setProfile((p) =>
|
||||
p ? { ...p, isPublic: e.target.checked } : p
|
||||
)
|
||||
}
|
||||
className="h-5 w-5 accent-amber-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-6 flex items-center justify-end gap-3">
|
||||
<Link
|
||||
href="/vault"
|
||||
className="text-sm opacity-80 hover:underline"
|
||||
>
|
||||
Cancel
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={save}
|
||||
disabled={saving}
|
||||
className={`rounded-md px-4 py-2 text-sm font-semibold ${
|
||||
saving
|
||||
? "bg-white/10 text-white/60 cursor-not-allowed"
|
||||
: "bg-amber-400 text-black hover:bg-amber-300"
|
||||
<span
|
||||
className={`rounded-full border px-2 py-0.5 text-[11px] ${
|
||||
form.isPublic
|
||||
? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
|
||||
: "border-white/10 bg-white/5 text-white/70"
|
||||
}`}
|
||||
>
|
||||
{saving ? "Saving…" : "Save Changes"}
|
||||
</button>
|
||||
{form.isPublic ? "Published" : "Draft"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: preview */}
|
||||
{/* parts */}
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-4">
|
||||
<div className="mb-3">
|
||||
<div className="text-sm font-medium">Preview</div>
|
||||
<div className="text-xs opacity-70">
|
||||
This is roughly what the community card will show.
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<div className="text-sm font-semibold">Parts in this build</div>
|
||||
<div className="text-xs text-zinc-400">
|
||||
{build.items?.length ? `${build.items.length} items` : "—"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-white/10 bg-black/30 p-3">
|
||||
<div className="text-sm font-semibold truncate">
|
||||
{profile.title || "Untitled Build"}
|
||||
{!build.items?.length ? (
|
||||
<div className="text-sm opacity-70">No parts saved yet.</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{Object.entries(
|
||||
build.items.reduce<Record<string, typeof build.items>>(
|
||||
(acc, it) => {
|
||||
(acc[it.slot] ||= []).push(it);
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
)
|
||||
).map(([slot, items]) => (
|
||||
<div key={slot}>
|
||||
<div className="mb-2 text-xs font-semibold uppercase tracking-wider text-zinc-400">
|
||||
{slot}
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-white/10 bg-black/20">
|
||||
{items.map((it, idx) => (
|
||||
<div
|
||||
key={`${it.slot}-${it.productId}-${idx}`}
|
||||
className="flex items-center justify-between gap-4 px-3 py-2 text-sm border-b border-white/5 last:border-b-0"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-zinc-100">
|
||||
{it.productName ?? `Product #${it.productId}`}
|
||||
</div>
|
||||
<div className="text-xs text-zinc-400">
|
||||
ID:{" "}
|
||||
<span className="font-mono">{it.productId}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="shrink-0 text-right">
|
||||
<div className="font-semibold">
|
||||
{typeof it.bestPrice === "number"
|
||||
? `$${it.bestPrice.toFixed(2)}`
|
||||
: it.bestPrice
|
||||
? `$${Number(it.bestPrice).toFixed(2)}`
|
||||
: "—"}
|
||||
</div>
|
||||
<div className="text-[11px] text-zinc-500">
|
||||
Best price
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex flex-wrap gap-2 text-xs">
|
||||
<span className="rounded-full border border-white/10 bg-white/5 px-2 py-1">
|
||||
{profile.platform || "—"}
|
||||
</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/5 px-2 py-1">
|
||||
{profile.caliber || "—"}
|
||||
</span>
|
||||
<span className="rounded-full border border-white/10 bg-white/5 px-2 py-1">
|
||||
{profile.buildClass || "—"}
|
||||
</span>
|
||||
</div>
|
||||
{/* form */}
|
||||
<div className="rounded-xl border border-white/10 bg-white/5 p-4">
|
||||
<label className="block text-xs font-medium text-zinc-300">
|
||||
Title
|
||||
</label>
|
||||
<input
|
||||
value={form.title}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, title: e.target.value }))
|
||||
}
|
||||
className="mt-2 w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm outline-none focus:border-amber-400/50"
|
||||
placeholder="e.g. Suppressed MK2"
|
||||
maxLength={120}
|
||||
/>
|
||||
|
||||
{profile.tagsText?.trim() ? (
|
||||
<div className="mt-2 text-xs opacity-80">
|
||||
Tags:{" "}
|
||||
{profile.tagsText
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean)
|
||||
.slice(0, 6)
|
||||
.join(", ")}
|
||||
</div>
|
||||
) : null}
|
||||
<label className="mt-4 block text-xs font-medium text-zinc-300">
|
||||
Notes / Description
|
||||
</label>
|
||||
<textarea
|
||||
value={form.description}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, description: e.target.value }))
|
||||
}
|
||||
className="mt-2 min-h-[120px] w-full rounded-md border border-white/10 bg-black/30 px-3 py-2 text-sm outline-none focus:border-amber-400/50"
|
||||
placeholder="Why this build? Goals, suppressor setup, ammo, intended use, etc."
|
||||
maxLength={2000}
|
||||
/>
|
||||
|
||||
{profile.description?.trim() ? (
|
||||
<div className="mt-3 text-xs opacity-80 line-clamp-5">
|
||||
{profile.description}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-3 text-xs opacity-50">
|
||||
Add a description to help people understand the “why”.
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-4 flex items-center justify-between gap-3">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.isPublic}
|
||||
onChange={(e) =>
|
||||
setForm((f) => ({ ...f, isPublic: e.target.checked }))
|
||||
}
|
||||
/>
|
||||
<span className="text-zinc-200">Publish to community</span>
|
||||
</label>
|
||||
|
||||
<div className="mt-3 text-[11px] opacity-60">
|
||||
Build UUID: <span className="font-mono">{uuid}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{savedMsg && (
|
||||
<span className="text-xs text-emerald-300">{savedMsg}</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={onSave}
|
||||
disabled={busy || !dirty}
|
||||
className="rounded-md bg-white px-3 py-1.5 text-xs font-semibold text-black hover:bg-zinc-200 disabled:opacity-50"
|
||||
>
|
||||
{busy ? "Working…" : dirty ? "Save" : "Saved"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* danger zone */}
|
||||
<div className="rounded-xl border border-red-500/20 bg-red-500/5 p-4">
|
||||
<div className="text-sm font-semibold text-red-200">
|
||||
Danger zone
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-red-200/70">
|
||||
Deleting a build is permanent.
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onDelete}
|
||||
disabled={busy}
|
||||
className="mt-3 rounded-md border border-red-500/30 bg-red-500/10 px-3 py-1.5 text-xs font-semibold text-red-100 hover:bg-red-500/15 disabled:opacity-50"
|
||||
>
|
||||
Delete build
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
+27
-26
@@ -6,6 +6,7 @@ import { useEffect, useMemo, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { useApi } from "@/lib/api";
|
||||
|
||||
type BuildDto = {
|
||||
id: string; // internal numeric id (not used by UI)
|
||||
@@ -35,26 +36,36 @@ function fmt(d?: string | null) {
|
||||
|
||||
export default function VaultPage() {
|
||||
const router = useRouter();
|
||||
const { user, loading, getAuthHeaders } = useAuth();
|
||||
const api = useApi();
|
||||
|
||||
// NOTE:
|
||||
// - `loading` here is AuthContext hydration, not network.
|
||||
// - `token` is the real gate for /me endpoints.
|
||||
const { user, token, loading: authLoading } = useAuth();
|
||||
|
||||
const [builds, setBuilds] = useState<BuildDto[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const authed = !!user;
|
||||
const authed = !!user && !!token;
|
||||
|
||||
// Redirect if not logged in
|
||||
// Redirect if not logged in (after auth hydrates)
|
||||
useEffect(() => {
|
||||
if (!loading && !authed) {
|
||||
if (!authLoading && !authed) {
|
||||
router.replace("/login");
|
||||
}
|
||||
}, [loading, authed, router]);
|
||||
}, [authLoading, authed, router]);
|
||||
|
||||
const headers = useMemo(() => getAuthHeaders(), [getAuthHeaders]);
|
||||
// When auth identity changes, clear stale list to avoid “ghost builds”
|
||||
useEffect(() => {
|
||||
if (authLoading) return;
|
||||
setBuilds([]);
|
||||
setError(null);
|
||||
}, [authLoading, user?.uuid, token]);
|
||||
|
||||
// Fetch user builds
|
||||
useEffect(() => {
|
||||
if (loading || !authed) return;
|
||||
if (authLoading || !authed) return;
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
@@ -63,11 +74,9 @@ export default function VaultPage() {
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/v1/builds/me`, {
|
||||
method: "GET",
|
||||
headers,
|
||||
credentials: "include",
|
||||
});
|
||||
// IMPORTANT:
|
||||
// Use api wrapper so Authorization: Bearer <token> is consistently applied.
|
||||
const res = await api.get("/api/v1/builds/me");
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => "");
|
||||
@@ -86,9 +95,9 @@ export default function VaultPage() {
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [loading, authed, headers]);
|
||||
}, [authLoading, authed, api]);
|
||||
|
||||
if (loading) {
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-4 py-6">
|
||||
<div className="text-sm opacity-70">Loading…</div>
|
||||
@@ -142,7 +151,7 @@ export default function VaultPage() {
|
||||
|
||||
{builds.length === 0 ? (
|
||||
<div className="p-4 text-sm opacity-70">
|
||||
No builds yet. Create one in the builder and hit “Save Build”.
|
||||
No builds yet. Create one in the builder and hit “Save As…”
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-white/10">
|
||||
@@ -186,7 +195,7 @@ export default function VaultPage() {
|
||||
{!valid && (
|
||||
<span
|
||||
className="shrink-0 rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[11px] text-red-200"
|
||||
title="This build record has an invalid UUID. The backend returned a bad identifier."
|
||||
title="This build record has an invalid UUID."
|
||||
>
|
||||
Invalid UUID
|
||||
</span>
|
||||
@@ -215,11 +224,7 @@ export default function VaultPage() {
|
||||
? "border-white/10 bg-white/5 hover:bg-white/10"
|
||||
: "border-white/10 bg-white/5 opacity-40 pointer-events-none"
|
||||
}`}
|
||||
title={
|
||||
valid
|
||||
? "Load this build into the builder"
|
||||
: "Invalid build id"
|
||||
}
|
||||
title={valid ? "Load this build into the builder" : "Invalid build id"}
|
||||
>
|
||||
Open
|
||||
</Link>
|
||||
@@ -233,11 +238,7 @@ export default function VaultPage() {
|
||||
? "border-white/10 bg-white/5 hover:bg-white/10"
|
||||
: "border-white/10 bg-white/5 opacity-40 pointer-events-none"
|
||||
}`}
|
||||
title={
|
||||
valid
|
||||
? "Add details + submit/publish later"
|
||||
: "Invalid build id"
|
||||
}
|
||||
title={valid ? "Edit details / publish later" : "Invalid build id"}
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
|
||||
+3
-12
@@ -13,6 +13,7 @@ const API_BASE_URL =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
|
||||
|
||||
type AuthUser = {
|
||||
uuid: string;
|
||||
email: string;
|
||||
displayName?: string | null;
|
||||
role: string;
|
||||
@@ -35,14 +36,7 @@ type AuthContextValue = {
|
||||
* Used for non-password auth flows (ex: magic link).
|
||||
* Persists session exactly like login/register.
|
||||
*/
|
||||
setSession: (
|
||||
token: string,
|
||||
user: {
|
||||
email: string;
|
||||
displayName: string | null;
|
||||
role: string;
|
||||
}
|
||||
) => void;
|
||||
setSession: (token: string, user: NonNullable<AuthUser>) => void;
|
||||
};
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | undefined>(undefined);
|
||||
@@ -95,10 +89,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
}, []);
|
||||
|
||||
const setSession = useCallback(
|
||||
(
|
||||
nextToken: string,
|
||||
nextUser: { email: string; displayName: string | null; role: string }
|
||||
) => {
|
||||
(nextToken: string, nextUser: NonNullable<AuthUser>) => {
|
||||
setToken(nextToken);
|
||||
setUser(nextUser);
|
||||
persistAuth(nextToken, nextUser);
|
||||
|
||||
+55
-18
@@ -1,26 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
const API_BASE_URL =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
|
||||
|
||||
type JsonValue = any;
|
||||
|
||||
export function useApi() {
|
||||
const { token } = useAuth();
|
||||
|
||||
async function get(path: string) {
|
||||
return fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}${path}`, {
|
||||
headers: {
|
||||
Authorization: token ? `Bearer ${token}` : "",
|
||||
},
|
||||
});
|
||||
}
|
||||
return useMemo(() => {
|
||||
function authHeaders(extra?: HeadersInit): HeadersInit {
|
||||
const base: Record<string, string> = {};
|
||||
if (token) base.Authorization = `Bearer ${token}`;
|
||||
return { ...base, ...(extra as any) };
|
||||
}
|
||||
|
||||
async function post(path: string, body: any) {
|
||||
return fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}${path}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: token ? `Bearer ${token}` : "",
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
}
|
||||
async function get(path: string, init?: RequestInit) {
|
||||
return fetch(`${API_BASE_URL}${path}`, {
|
||||
...init,
|
||||
headers: authHeaders(init?.headers),
|
||||
});
|
||||
}
|
||||
|
||||
return { get, post };
|
||||
async function post(path: string, body: JsonValue, init?: RequestInit) {
|
||||
return fetch(`${API_BASE_URL}${path}`, {
|
||||
method: "POST",
|
||||
...init,
|
||||
headers: authHeaders({
|
||||
"Content-Type": "application/json",
|
||||
...(init?.headers as any),
|
||||
}),
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
}
|
||||
|
||||
async function put(path: string, body: JsonValue, init?: RequestInit) {
|
||||
return fetch(`${API_BASE_URL}${path}`, {
|
||||
method: "PUT",
|
||||
...init,
|
||||
headers: authHeaders({
|
||||
"Content-Type": "application/json",
|
||||
...(init?.headers as any),
|
||||
}),
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
}
|
||||
|
||||
async function del(path: string, init?: RequestInit) {
|
||||
return fetch(`${API_BASE_URL}${path}`, {
|
||||
method: "DELETE",
|
||||
...init,
|
||||
headers: authHeaders(init?.headers),
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ stable reference unless token changes
|
||||
return { get, post, put, del };
|
||||
}, [token]);
|
||||
}
|
||||
Reference in New Issue
Block a user