v0.2.2 — Fix add plant form (simplify, remove react-hook-form)
This commit is contained in:
Bonna Moon
@@ -2,9 +2,6 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { PlantCategory } from "@prisma/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -20,91 +17,108 @@ import { useToast } from "@/hooks/use-toast";
|
||||
import { Plus, Leaf } from "lucide-react";
|
||||
import { CATEGORY_LABELS, CATEGORY_ORDER } from "@/lib/garden/categories";
|
||||
import { searchPlants, type PlantSuggestion } from "@/lib/garden/plant-db";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const schema = z.object({
|
||||
commonName: z.string().min(1, "Name is required"),
|
||||
species: z.string().optional(),
|
||||
variety: z.string().optional(),
|
||||
category: z.nativeEnum(PlantCategory),
|
||||
zone: z.string().optional(),
|
||||
plantedAt: z.string().optional(),
|
||||
source: z.string().optional(),
|
||||
notes: z.string().optional(),
|
||||
});
|
||||
type FormValues = z.infer<typeof schema>;
|
||||
const BLANK = {
|
||||
commonName: "",
|
||||
species: "",
|
||||
variety: "",
|
||||
category: "CANOPY_TREE" as PlantCategory,
|
||||
zone: "",
|
||||
plantedAt: "",
|
||||
source: "",
|
||||
notes: "",
|
||||
};
|
||||
|
||||
export function AddPlantButton() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [fields, setFields] = useState(BLANK);
|
||||
const [error, setError] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [suggestions, setSuggestions] = useState<PlantSuggestion[]>([]);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const [category, setCategory] = useState<PlantCategory>("CANOPY_TREE");
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { category: "CANOPY_TREE" },
|
||||
});
|
||||
function set(key: keyof typeof BLANK, value: string) {
|
||||
setFields((f) => ({ ...f, [key]: value }));
|
||||
}
|
||||
|
||||
function onNameChange(value: string) {
|
||||
form.setValue("commonName", value);
|
||||
set("commonName", value);
|
||||
const results = searchPlants(value);
|
||||
setSuggestions(results);
|
||||
setShowSuggestions(results.length > 0);
|
||||
}
|
||||
|
||||
function applySuggestion(suggestion: PlantSuggestion) {
|
||||
form.setValue("commonName", suggestion.commonName);
|
||||
if (suggestion.species) form.setValue("species", suggestion.species);
|
||||
if (suggestion.notes && !form.getValues("notes")) form.setValue("notes", suggestion.notes);
|
||||
form.setValue("category", suggestion.category);
|
||||
setCategory(suggestion.category);
|
||||
function applySuggestion(s: PlantSuggestion) {
|
||||
setFields((f) => ({
|
||||
...f,
|
||||
commonName: s.commonName,
|
||||
species: s.species ?? f.species,
|
||||
category: s.category,
|
||||
notes: f.notes || s.notes || "",
|
||||
}));
|
||||
setSuggestions([]);
|
||||
setShowSuggestions(false);
|
||||
}
|
||||
|
||||
async function onSubmit(values: FormValues) {
|
||||
function handleClose() {
|
||||
setOpen(false);
|
||||
setFields(BLANK);
|
||||
setError("");
|
||||
setSuggestions([]);
|
||||
setShowSuggestions(false);
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!fields.commonName.trim()) {
|
||||
setError("Please enter the plant name.");
|
||||
return;
|
||||
}
|
||||
setError("");
|
||||
setBusy(true);
|
||||
const res = await fetch("/api/plants", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(values),
|
||||
body: JSON.stringify({
|
||||
commonName: fields.commonName.trim(),
|
||||
species: fields.species.trim() || undefined,
|
||||
variety: fields.variety.trim() || undefined,
|
||||
category: fields.category,
|
||||
zone: fields.zone.trim() || undefined,
|
||||
plantedAt: fields.plantedAt || undefined,
|
||||
source: fields.source.trim() || undefined,
|
||||
notes: fields.notes.trim() || undefined,
|
||||
}),
|
||||
});
|
||||
setBusy(false);
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}));
|
||||
toast({ title: "Error", description: err.error ?? "Could not save plant.", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
const plant = await res.json();
|
||||
toast({ title: "Plant added!", description: `${values.commonName} is now in your food forest.` });
|
||||
setOpen(false);
|
||||
form.reset();
|
||||
setCategory("CANOPY_TREE");
|
||||
setSuggestions([]);
|
||||
toast({ title: "Plant added!", description: `${fields.commonName} is now in your garden.` });
|
||||
handleClose();
|
||||
router.push(`/garden/${plant.id}`);
|
||||
router.refresh();
|
||||
}
|
||||
|
||||
function handleOpen() {
|
||||
setOpen(true);
|
||||
setSuggestions([]);
|
||||
setShowSuggestions(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button onClick={handleOpen} size="sm">
|
||||
<Button onClick={() => setOpen(true)} size="sm">
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Add plant
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
|
||||
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add a plant</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
|
||||
{/* Name with autocomplete */}
|
||||
@@ -114,17 +128,13 @@ export function AddPlantButton() {
|
||||
id="commonName"
|
||||
placeholder="Start typing — apple, comfrey, zinnia…"
|
||||
autoComplete="off"
|
||||
{...form.register("commonName", {
|
||||
onChange: (e) => onNameChange(e.target.value),
|
||||
})}
|
||||
value={fields.commonName}
|
||||
onChange={(e) => onNameChange(e.target.value)}
|
||||
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
||||
onFocus={() => suggestions.length > 0 && setShowSuggestions(true)}
|
||||
/>
|
||||
{form.formState.errors.commonName && (
|
||||
<p className="text-xs text-destructive">{form.formState.errors.commonName.message}</p>
|
||||
)}
|
||||
{error && <p className="text-xs text-destructive">{error}</p>}
|
||||
|
||||
{/* Suggestion dropdown */}
|
||||
{showSuggestions && (
|
||||
<div className="absolute top-full left-0 right-0 z-50 mt-1 bg-popover border rounded-md shadow-lg overflow-hidden">
|
||||
{suggestions.map((s) => (
|
||||
@@ -138,7 +148,9 @@ export function AddPlantButton() {
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium">{s.commonName}</p>
|
||||
{s.species && (
|
||||
<p className="text-xs text-muted-foreground italic truncate">{s.species} · {CATEGORY_LABELS[s.category]}</p>
|
||||
<p className="text-xs text-muted-foreground italic truncate">
|
||||
{s.species} · {CATEGORY_LABELS[s.category]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
@@ -152,18 +164,19 @@ export function AddPlantButton() {
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="variety">Variety / cultivar</Label>
|
||||
<Input id="variety" placeholder="Honeycrisp, Bob Gordon…" {...form.register("variety")} />
|
||||
<Input
|
||||
id="variety"
|
||||
placeholder="Honeycrisp, Bob Gordon…"
|
||||
value={fields.variety}
|
||||
onChange={(e) => set("variety", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label>Category *</Label>
|
||||
<Select
|
||||
value={category}
|
||||
onValueChange={(v) => {
|
||||
const c = v as PlantCategory;
|
||||
form.setValue("category", c);
|
||||
setCategory(c);
|
||||
}}
|
||||
value={fields.category}
|
||||
onValueChange={(v) => set("category", v)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
@@ -177,35 +190,65 @@ export function AddPlantButton() {
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label htmlFor="species">Scientific name <span className="text-muted-foreground font-normal">(filled in automatically if known)</span></Label>
|
||||
<Input id="species" placeholder="Malus domestica" className="italic" {...form.register("species")} />
|
||||
<Label htmlFor="species">
|
||||
Scientific name{" "}
|
||||
<span className="text-muted-foreground font-normal">(filled in automatically if known)</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="species"
|
||||
placeholder="Malus domestica"
|
||||
className="italic"
|
||||
value={fields.species}
|
||||
onChange={(e) => set("species", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label htmlFor="zone">Location on your property</Label>
|
||||
<Input id="zone" placeholder="Back yard north fence, Front guild, Raised bed #1…" {...form.register("zone")} />
|
||||
<Input
|
||||
id="zone"
|
||||
placeholder="Back yard north fence, Front guild, Raised bed #1…"
|
||||
value={fields.zone}
|
||||
onChange={(e) => set("zone", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="plantedAt">Date planted</Label>
|
||||
<Input id="plantedAt" type="date" {...form.register("plantedAt")} />
|
||||
<Input
|
||||
id="plantedAt"
|
||||
type="date"
|
||||
value={fields.plantedAt}
|
||||
onChange={(e) => set("plantedAt", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="source">Where it came from</Label>
|
||||
<Input id="source" placeholder="Jung's Nursery, from seed…" {...form.register("source")} />
|
||||
<Input
|
||||
id="source"
|
||||
placeholder="Jung's Nursery, from seed…"
|
||||
value={fields.source}
|
||||
onChange={(e) => set("source", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label htmlFor="notes">Notes</Label>
|
||||
<Textarea id="notes" placeholder="Anything worth remembering about this plant…" rows={3} {...form.register("notes")} />
|
||||
<Textarea
|
||||
id="notes"
|
||||
placeholder="Anything worth remembering about this plant…"
|
||||
rows={3}
|
||||
value={fields.notes}
|
||||
onChange={(e) => set("notes", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
|
||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||
{form.formState.isSubmitting ? "Saving…" : "Add plant"}
|
||||
<Button type="button" variant="outline" onClick={handleClose}>Cancel</Button>
|
||||
<Button type="submit" disabled={busy}>
|
||||
{busy ? "Saving…" : "Add plant"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// Bump on every user-visible release. Changelog entries live in `src/lib/changelog.ts`.
|
||||
export const APP_VERSION = "0.2.0";
|
||||
export const APP_VERSION = "0.2.2";
|
||||
|
||||
Reference in New Issue
Block a user