From 7ec4d5b8d768d3d215eb7c824e3095b00f799d62 Mon Sep 17 00:00:00 2001
From: bholmesdev <hey@bholmes.dev>
Date: Fri, 3 May 2024 17:13:08 -0400
Subject: [PATCH] feat: test input error in comment example

---
 .../fixtures/actions-blog/src/actions/index.ts     |  2 +-
 .../actions-blog/src/components/PostComment.tsx    | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/astro/test/fixtures/actions-blog/src/actions/index.ts b/packages/astro/test/fixtures/actions-blog/src/actions/index.ts
index 5af3a53f20f5f..859dcdebce00a 100644
--- a/packages/astro/test/fixtures/actions-blog/src/actions/index.ts
+++ b/packages/astro/test/fixtures/actions-blog/src/actions/index.ts
@@ -27,7 +27,7 @@ export default {
       input: z.object({
         postId: z.string(),
         author: z.string(),
-        body: z.string(),
+        body: z.string().min(50),
       }),
       handler: async ({ postId, author, body }) => {
         const comment = await db.insert(Comment).values({
diff --git a/packages/astro/test/fixtures/actions-blog/src/components/PostComment.tsx b/packages/astro/test/fixtures/actions-blog/src/components/PostComment.tsx
index 280edbaa50720..c07054ea62e62 100644
--- a/packages/astro/test/fixtures/actions-blog/src/components/PostComment.tsx
+++ b/packages/astro/test/fixtures/actions-blog/src/components/PostComment.tsx
@@ -1,8 +1,9 @@
-import { getNameProps, actions } from "astro:actions";
+import { getNameProps, actions, isInputError } from "astro:actions";
 import { useState } from "react";
 
 export function PostComment({postId}: {postId: string}) {
 	const [comments, setComments] = useState<{ author: string, body: string }[]>([]);
+	const [bodyError, setBodyError] = useState<string | undefined>(undefined);
 
 	return (
 		<>
@@ -10,8 +11,14 @@ export function PostComment({postId}: {postId: string}) {
 			e.preventDefault();
 			const form = e.target as HTMLFormElement;
 			const formData = new FormData(form);
-			const {comment} = await actions.blog.comment(formData);
-			setComments(c => [comment, ...c]);
+			const {	data, error } = await actions.blog.comment.safe(formData);
+			if (isInputError(error)) {
+				return setBodyError(error.fields.body?.join(' '));
+			}
+			if (data) {
+				setBodyError(undefined);
+				setComments(c => [data.comment, ...c]);
+			}
 			form.reset();
 		}}>
 			<input {...getNameProps(actions.blog.comment)} />
@@ -19,6 +26,7 @@ export function PostComment({postId}: {postId: string}) {
 			<label className="sr-only" htmlFor="author">Author</label>
 			<input id="author" type="text" name="author" placeholder="Your name" />
 			<textarea rows={10} name="body"></textarea>
+			{bodyError && <p style={{ color: 'red' }}>{bodyError}</p>}
 			<button type="submit">Post</button>
 		</form>
 		{comments.map(c => (