"use client";
import { useActionState } from "react";
import { useState } from "react";
import { Link } from "@lazarv/react-server/navigation";
import { createOrUpdateNote, Note } from "../actions";
export default function NoteForm({ note }: { note: Note }) {
const [editedNote, setEditedNote] = useState(true);
const [state, submitAction, isPending] = useActionState(createOrUpdateNote, {
error: null,
});
return (
<form action={submitAction}>
{note?.id && <input type="hidden" name="id" value={note.id} />}
<div>
<label>
Title:
<input
defaultValue={note.title}
type="text"
name="title"
disabled={isPending}
/>
</label>
</div>
<div>
<label>
Note:{" "}
<input type="checkbox" onChange={() => setEditedNote(!editedNote)} />{" "}
allow edit
<textarea
defaultValue={note.note}
name="note"
disabled={isPending || !editedNote}
></textarea>
</label>
</div>
{state?.error?.map?.(({ message }, i) => (
<p key={i} className="error">
{message}
</p>
)) ??
(state.error && <p className="error">{state.error?.toString()}</p>)}
<div className="button-group">
<Link to="/" className="button">
Cancel
</Link>
<button type="submit" className="button primary" disabled={isPending}>
Save Note
</button>
</div>
</form>
);
}