84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import { useState } from "react";
|
|
import type { CampaignId, Location } from "@/lib/types";
|
|
import { pb } from "@/lib/pocketbase";
|
|
|
|
/**
|
|
* Renders a form to add a new location. Calls onCreate with the new location document.
|
|
*/
|
|
export const NewLocationForm = ({
|
|
campaign,
|
|
onCreate,
|
|
}: {
|
|
campaign: CampaignId;
|
|
onCreate: (location: Location) => Promise<void>;
|
|
}) => {
|
|
const [name, setName] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const [adding, setAdding] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!name.trim()) return;
|
|
setAdding(true);
|
|
setError(null);
|
|
try {
|
|
const locationDoc: Location = await pb.collection("documents").create({
|
|
campaign,
|
|
type: "location",
|
|
data: {
|
|
name,
|
|
description,
|
|
},
|
|
});
|
|
setName("");
|
|
setDescription("");
|
|
await onCreate(locationDoc);
|
|
} catch (e: any) {
|
|
setError(e?.message || "Failed to add location.");
|
|
} finally {
|
|
setAdding(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form
|
|
className="flex items-left flex-col gap-2 mt-4"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<h3>Create new location</h3>
|
|
<div className="flex gap-5 w-full items-center">
|
|
<label>Name</label>
|
|
<input
|
|
type="text"
|
|
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
|
|
placeholder="Name"
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
disabled={adding}
|
|
aria-label="Name"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-5 w-full items-center">
|
|
<label>Description</label>
|
|
<textarea
|
|
className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
|
|
placeholder="Description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
disabled={adding}
|
|
aria-label="Description"
|
|
/>
|
|
</div>
|
|
{error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
|
|
disabled={adding || !name.trim()}
|
|
>
|
|
{adding ? "Adding..." : "Create"}
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|