use astro actions

Author: KevinVandy

apps/0-json-server/db.json

@@ -4333,20 +4333,6 @@
       "name": "ex eaque eum natus",
       "email": "[email protected]",
       "body": "perspiciatis quis doloremque\nveniam nisi eos velit sed\nid totam inventore voluptatem laborum et eveniet\naut aut aut maxime quia temporibus ut omnis"
-    },
-    {
-      "body": "lksfds",
-      "email": "[email protected]",
-      "name": "User",
-      "postId": 1,
-      "id": 501
-    },
-    {
-      "body": "asfasf",
-      "email": "[email protected]",
-      "name": "User",
-      "postId": 1,
-      "id": 502
     }
   ]
 }

apps/4-streaming/4-4-astro-server-islands/astro.config.mjs

@@ -3,10 +3,14 @@ import { defineConfig } from "astro/config";
 
 import tailwindcss from "@tailwindcss/vite";
 
+import vercel from "@astrojs/vercel";
+
 // https://astro.build/config
 export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
   },
+
   output: "server",
-});
+  adapter: vercel(),
+});

apps/4-streaming/4-4-astro-server-islands/package.json

@@ -9,6 +9,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/vercel": "^8.0.7",
     "@tailwindcss/vite": "^4.0.7",
     "astro": "^5.3.0",
     "tailwindcss": "^4.0.7"

apps/4-streaming/4-4-astro-server-islands/src/actions/index.ts

@@ -0,0 +1,77 @@
+import { defineAction } from "astro:actions";
+import { z } from "astro:schema";
+
+export const server = {
+  addComment: defineAction({
+    accept: "form",
+    input: z.object({
+      postId: z.string(),
+      text: z.string(),
+    }),
+    handler: async ({ postId, text }) => {
+      console.log({ postId, text });
+      try {
+        const newComment = {
+          body: text,
+          email: "[email protected]",
+          name: "User",
+          postId: Number(postId),
+        };
+
+        const response = await fetch("http://localhost:3300/comments", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(newComment),
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to create comment");
+        }
+
+        return {
+          success: true,
+        };
+      } catch (error) {
+        console.error("Error creating comment:", error);
+        return {
+          success: false,
+          error: "Error creating comment",
+        };
+      }
+    },
+  }),
+
+  deleteComment: defineAction({
+    accept: "form",
+    input: z.object({
+      commentId: z.string(),
+      postId: z.string(),
+    }),
+    handler: async ({ commentId }) => {
+      try {
+        const response = await fetch(
+          `http://localhost:3300/comments/${commentId}`,
+          {
+            method: "DELETE",
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error("Failed to delete comment");
+        }
+
+        return {
+          success: true,
+        };
+      } catch (error) {
+        console.error("Error deleting comment:", error);
+        return {
+          success: false,
+          error: "Error deleting comment",
+        };
+      }
+    },
+  }),
+};

apps/4-streaming/4-4-astro-server-islands/src/components/Comments.astro

@@ -8,13 +8,13 @@ interface Props {
 const { postId } = Astro.props;
 
 // Fetch comments for this post with artificial delay
-await new Promise(resolve => setTimeout(resolve, 3000));
+await new Promise((resolve) => setTimeout(resolve, 1000));
 const commentsResponse = await fetch(
   `http://localhost:3300/posts/${postId}/comments`,
   {
     headers: {
-      'Cache-Control': 'public, max-age=60, stale-while-revalidate=30'
-    }
+      "Cache-Control": "public, max-age=60, stale-while-revalidate=30",
+    },
   }
 );
 const comments = (await commentsResponse.json()) as IComment[];
@@ -54,9 +54,8 @@ const comments = (await commentsResponse.json()) as IComment[];
         >
           {comment.email === "[email protected]" && (
             <form
-              method="POST"
-              action={`/api/delete-comment?redirectHash=comments`}
               class="absolute right-2 top-2"
+              id={`delete-comment-${comment.id}`}
             >
               <input type="hidden" name="commentId" value={comment.id} />
               <input type="hidden" name="postId" value={postId} />
@@ -84,29 +83,27 @@ const comments = (await commentsResponse.json()) as IComment[];
             </form>
           )}
           <h4 class="text-lg font-bold mb-1">{comment.name}</h4>
-          <h5 class="text-md font-medium text-gray-600 mb-2">{comment.email}</h5>
+          <h5 class="text-md font-medium text-gray-600 mb-2">
+            {comment.email}
+          </h5>
           <p class="text-gray-700">{comment.body}</p>
         </div>
       ))
     }
   </div>
-  <form
-    method="POST"
-    action={`/api/add-comment?postId=${postId}&redirectHash=comments`}
-    class="space-y-4"
-    enctype="multipart/form-data"
-  >
+  <form id="comment-form" class="space-y-4">
+    <input type="hidden" name="postId" value={postId} />
     <div>
       <label for="comment" class="block text-sm font-medium text-gray-700"
         >Post a Comment</label
       >
-      <textarea
+      <input
+        type="text"
         id="comment"
-        name="body"
-        rows="3"
+        name="text"
         class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
         required
-      ></textarea>
+      />
     </div>
     <button
       type="submit"
@@ -116,3 +113,36 @@ const comments = (await commentsResponse.json()) as IComment[];
     </button>
   </form>
 </div>
+
+<script>
+  import { actions } from "astro:actions";
+
+  const form = document.querySelector("#comment-form") as HTMLFormElement;
+  form?.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const formData = new FormData(form);
+    const { error } = await actions.addComment(formData);
+    if (!error) {
+      form.reset();
+      location.reload();
+    }
+  });
+
+  // Handle delete comment forms
+  const deleteForms = document.querySelectorAll(
+    "form[id^='delete-comment-']"
+  ) as NodeListOf<HTMLFormElement>;
+  deleteForms.forEach((form) => {
+    form.addEventListener("submit", async (event: Event) => {
+      event.preventDefault();
+      if (confirm("Are you sure you want to delete this comment?")) {
+        const formData = new FormData(form as HTMLFormElement);
+        const { error } = await actions.deleteComment(formData);
+        if (!error) {
+          form.reset();
+          location.reload();
+        }
+      }
+    });
+  });
+</script>