77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import { useState } from "react";
|
|
import type { CampaignId, Npc } from "@/lib/types";
|
|
import { pb } from "@/lib/pocketbase";
|
|
import { BaseForm } from "@/components/form/BaseForm";
|
|
import { SingleLineInput } from "@/components/form/SingleLineInput";
|
|
import { MultiLineInput } from "@/components/form/MultiLineInput";
|
|
import { useDocumentCache } from "@/context/document/hooks";
|
|
|
|
/**
|
|
* Renders a form to add a new npc. Calls onCreate with the new npc document.
|
|
*/
|
|
export const NewNpcForm = ({
|
|
campaign,
|
|
onCreate,
|
|
}: {
|
|
campaign: CampaignId;
|
|
onCreate: (npc: Npc) => Promise<void>;
|
|
}) => {
|
|
const { dispatch } = useDocumentCache();
|
|
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 npcDoc: Npc = await pb.collection("documents").create({
|
|
campaign,
|
|
type: "npc",
|
|
data: {
|
|
name,
|
|
description,
|
|
},
|
|
});
|
|
setName("");
|
|
setDescription("");
|
|
dispatch({ type: "setDocument", doc: npcDoc });
|
|
await onCreate(npcDoc);
|
|
} catch (e: any) {
|
|
setError(e?.message || "Failed to add npc.");
|
|
} finally {
|
|
setAdding(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<BaseForm
|
|
title="Create new NPC"
|
|
onSubmit={handleSubmit}
|
|
isLoading={adding}
|
|
error={error}
|
|
content={
|
|
<>
|
|
<SingleLineInput
|
|
label="Name"
|
|
value={name}
|
|
onChange={setName}
|
|
disabled={adding}
|
|
placeholder="Enter NPC name"
|
|
/>
|
|
<MultiLineInput
|
|
label="Description"
|
|
value={description}
|
|
placeholder="Enter NPC description"
|
|
onChange={setDescription}
|
|
disabled={adding}
|
|
/>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
};
|