cloudflare/vinext
Publicmirrored from https://github.com/cloudflare/vinextAvailable
tests/fixtures/app-basic/app/actions/message-form.tsx
36lines · modecode
| 1 | "use client"; |
| 2 | |
| 3 | import { useState, useTransition } from "react"; |
| 4 | import { addMessage } from "./actions"; |
| 5 | |
| 6 | export function MessageForm() { |
| 7 | const [result, setResult] = useState<string | null>(null); |
| 8 | const [isPending, startTransition] = useTransition(); |
| 9 | |
| 10 | function handleSubmit(e: React.FormEvent<HTMLFormElement>) { |
| 11 | e.preventDefault(); |
| 12 | const formData = new FormData(e.currentTarget); |
| 13 | startTransition(async () => { |
| 14 | const response = await addMessage(formData); |
| 15 | setResult(response); |
| 16 | }); |
| 17 | } |
| 18 | |
| 19 | return ( |
| 20 | <div> |
| 21 | <form onSubmit={handleSubmit}> |
| 22 | <input |
| 23 | type="text" |
| 24 | name="message" |
| 25 | data-testid="message-input" |
| 26 | placeholder="Type a message..." |
| 27 | defaultValue="" |
| 28 | /> |
| 29 | <button type="submit" data-testid="send-btn" disabled={isPending}> |
| 30 | {isPending ? "Sending..." : "Send"} |
| 31 | </button> |
| 32 | </form> |
| 33 | {result && <p data-testid="message-result">{result}</p>} |
| 34 | </div> |
| 35 | ); |
| 36 | } |
| 37 | |