70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
// Deleting a note, in two steps: the button asks, and a second press does it. The attached files are
|
|
// not deleted with the note (they are the project's); the confirmation says so.
|
|
|
|
import { type ProjectSlugs, useTransport } from "@conusai-kit/ui"
|
|
import { type ReactElement, useState } from "react"
|
|
|
|
export interface DeleteNoteLabels {
|
|
readonly button: string
|
|
readonly confirm: string
|
|
readonly yes: string
|
|
readonly no: string
|
|
readonly failed: string
|
|
}
|
|
|
|
export function DeleteNote({
|
|
slugs,
|
|
noteId,
|
|
listHref,
|
|
labels,
|
|
}: {
|
|
slugs: ProjectSlugs
|
|
noteId: string
|
|
/** Where to go once the note is gone. */
|
|
listHref: string
|
|
labels: DeleteNoteLabels
|
|
}): ReactElement {
|
|
const { call, describe } = useTransport()
|
|
const [state, setState] = useState<{ kind: "idle" | "asking" | "busy" } | { kind: "failed"; detail: string }>({
|
|
kind: "idle",
|
|
})
|
|
|
|
const remove = async (): Promise<void> => {
|
|
setState({ kind: "busy" })
|
|
try {
|
|
await call("notes.note.delete", { ...slugs, noteId })
|
|
window.location.assign(listHref)
|
|
} catch (error) {
|
|
setState({ kind: "failed", detail: describe(error) })
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{state.kind === "asking" || state.kind === "busy" ? (
|
|
<fieldset>
|
|
<legend>{labels.button}</legend>
|
|
<p>{labels.confirm}</p>
|
|
<button type="button" disabled={state.kind === "busy"} onClick={() => void remove()}>
|
|
{labels.yes}
|
|
</button>
|
|
<button type="button" disabled={state.kind === "busy"} onClick={() => setState({ kind: "idle" })}>
|
|
{labels.no}
|
|
</button>
|
|
</fieldset>
|
|
) : (
|
|
<button type="button" onClick={() => setState({ kind: "asking" })}>
|
|
{labels.button}
|
|
</button>
|
|
)}
|
|
{state.kind === "failed" ? (
|
|
<p className="app-error" role="alert">
|
|
{labels.failed.replace("{detail}", state.detail)}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|