PostComment() — astro Function Reference

Architecture documentation for the PostComment() function in PostComment.tsx from the astro codebase.

Function tsx E2ETesting TestFixtures

Entity Profile

E2ETesting→ TestFixtures→ PostComment() — astro Function Reference

Dependency Diagram

graph TD
  918ebb7f_6b29_6155_3c6e_e5831769cdee["PostComment()"]
  f944bfaf_ee24_132b_6a8e_a0701c4da227["PostComment.tsx"]
  918ebb7f_6b29_6155_3c6e_e5831769cdee -->|defined in| f944bfaf_ee24_132b_6a8e_a0701c4da227
  style 918ebb7f_6b29_6155_3c6e_e5831769cdee fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/e2e/fixtures/actions-blog/src/components/PostComment.tsx lines 5–71

export function PostComment({
	postId,
	serverBodyError,
}: {
	postId: string;
	serverBodyError?: string;
}) {
	const [comments, setComments] = useState<{ author: string; body: string }[]>([]);
	const [bodyError, setBodyError] = useState<string | undefined>(serverBodyError);
	const [unexpectedError, setUnexpectedError] = useState<string | undefined>(undefined);

	return (
		<>
			<form
				method="POST"
				data-testid="client"
				action={actions.blog.comment.toString()}
				onSubmit={async (e) => {
					e.preventDefault();
					const form = e.target as HTMLFormElement;
					const formData = new FormData(form);
					const { data, error } = await actions.blog.comment(formData);
					if (isInputError(error)) {
						return setBodyError(error.fields.body?.join(' '));
					} else if (error) {
						return setUnexpectedError(`${error.code}: ${error.message}`);
					}
					setBodyError(undefined);
					setComments((c) => [data, ...c]);
					form.reset();
				}}
			>
				{unexpectedError && (
					<p data-error="unexpected" style={{ color: 'red' }}>
						{unexpectedError}
					</p>
				)}
				<input type="hidden" name="postId" value={postId} />
				<label htmlFor="author">Author</label>
				<input id="author" type="text" name="author" placeholder="Your name" />
				<textarea rows={10} name="body"></textarea>
				{bodyError && (
					<p data-error="body" style={{ color: 'red' }}>
						{bodyError}
					</p>
				)}
				<button type="submit">Post</button>
			</form>
			<div data-testid="client-comments">
				{comments.map((c) => (
					<article
						key={c.body}
						style={{
							border: '2px solid color-mix(in srgb, var(--accent), transparent 80%)',
							padding: '0.3rem 1rem',
							borderRadius: '0.3rem',
							marginBlock: '0.3rem',
						}}
					>
						<p>{c.body}</p>
						<p>{c.author}</p>
					</article>
				))}
			</div>
		</>
	);
}