steve
e4505ed9a7
Build image / build-and-push (push) Successful in 15s
Co-authored-by: Steve Dudenhoeffer <[email protected]>
47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { useState } from 'react'
|
|
import { Modal } from '@/components/ui/Modal'
|
|
import { Alert } from '@/components/ui/Alert'
|
|
import { Button } from '@/components/ui/Button'
|
|
import { errorMessage } from '@/lib/api'
|
|
import { useDeletePlant, type Plant } from '@/lib/plants'
|
|
|
|
/**
|
|
* Confirmation dialog for deleting a custom plant. A plant still used by
|
|
* plantings is refused by the server (409 PLANT_IN_USE); we surface that
|
|
* message inline rather than pretending it worked.
|
|
*/
|
|
export function DeletePlantModal({ plant, onClose }: { plant: Plant; onClose: () => void }) {
|
|
const deletion = useDeletePlant()
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
async function onConfirm() {
|
|
setError(null)
|
|
try {
|
|
await deletion.mutateAsync(plant.id)
|
|
onClose()
|
|
} catch (err) {
|
|
setError(errorMessage(err, 'Could not delete the plant.'))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal title="Delete plant" onClose={onClose} busy={deletion.isPending}>
|
|
<div className="flex flex-col gap-4">
|
|
<p className="text-sm text-muted">
|
|
Delete <span className="font-medium text-fg">{plant.name}</span> from your catalog? This can't be
|
|
undone.
|
|
</p>
|
|
{error && <Alert>{error}</Alert>}
|
|
<div className="flex justify-end gap-2">
|
|
<Button type="button" variant="ghost" onClick={onClose} disabled={deletion.isPending}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="button" variant="danger" onClick={onConfirm} disabled={deletion.isPending}>
|
|
{deletion.isPending ? 'Deleting…' : 'Delete'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|